Colorbox (Modal Window)

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Advanced

Colorbox is an implementation of the modal window graphical control element. It is also commonly referred to as lightbox. It is essentially a box of content that sits above the rest of the page content with background shade that reduces page content distractions. It is commonly used to show a photo or gallery in more detail. It can also be used to create a dialog box that user must interact with.

The modal plugin provides access to the colorbox functionality. To use this plugin follow these markup guidelines:

  1. Create an anchor element <a id="stadium-photo" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/stadium.jpg"> that links to the content you'd like to put into the modal window.
  2. Load the modal plugin with the following script element, updating the callback function passed with statements that should be executed after the colorbox function has been injected into jQuery.
    Please note that the statements you need to execute will vary based on your markup and how you wish to use colorbox.
    <script>
        WDN.initializePlugin('modal', [ function() {
            var $ = require('jquery');
            $('#stadium-photo').colorbox();
        } ]);
    </script>
    

For more advanced usage and detailed documentation of options, please visit the colorbox site.

Examples

Elastic Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/stadium.jpg" class="group1">Grouped Photo 1</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/kauffman.jpg" class="group1">Grouped Photo 2</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/love.jpg" class="group1">Grouped Photo 3</a></p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.group1').colorbox({rel: 'group1'});
    }]);
</script>

Fade Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/stadium.jpg" class="group2">Grouped Photo 1</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/kauffman.jpg" class="group2">Grouped Photo 2</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/love.jpg" class="group2">Grouped Photo 3</a></p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.group2').colorbox({rel: 'group2', transition:'fade'});
    }]);
</script>

No Transition + fixed width and height (75% of screen size)

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/stadium.jpg" class="group3">Grouped Photo 1</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/kauffman.jpg" class="group3">Grouped Photo 2</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/love.jpg" class="group3">Grouped Photo 3</a></p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.group3').colorbox({rel: 'group3', transition: 'none', width: '75%', height: '75%'});
    }]);
</script>

Slideshow

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/stadium.jpg" class="group4">Grouped Photo 1</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/kauffman.jpg" class="group4">Grouped Photo 2</a></p>
<p><a href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/love.jpg" class="group4">Grouped Photo 3</a></p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.group4').colorbox({rel: 'group4', slideshow: true});
    }]);
</script>

Other Content Types

Outside HTML (Ajax)

Flash / Video (Iframe/Direct Link To YouTube)

Flash / Video (Iframe/Direct Link To Vimeo)

Outside Webpage (Iframe)

Inline HTML

<p><a class="ajax" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/ajax.html">Outside HTML (Ajax)</a></p>
<p><a class="youtube" href="https://www.youtube.com/embed/SxPE9xwsXTs">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class="vimeo" href="https://player.vimeo.com/video/48222241">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class="iframe" href="http://wdn.unl.edu/">Outside Webpage (Iframe)</a></p>
<p><a class="inline" href="#inline_content">Inline HTML</a></p>
<div class="hidden">
	<div id="inline_content" style="padding:10px; background:#fff;">
    <p><strong>This content comes from a hidden element on this page.</strong></p>
    <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
    <p><button id="click" href="#" style="padding:5px; background:#ccc;">Click me, it will be preserved!</button></p>
    <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
    <p>Updating Content Example:<br>
    <a class="ajax" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/ajax.html">Click here to load new content</a></p>
    </div>
</div>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.ajax').colorbox();
        $('.youtube').colorbox({iframe: true, innerWidth: 640, innerHeight: 390});
        $('.vimeo').colorbox({iframe: true, innerWidth: 640, innerHeight: 390});
        $('.iframe').colorbox({iframe: true, width: '80%', height:'80%'});
        $('.inline').colorbox({inline: true, width: '50%'});

        $('#click').click(function(){
            $('#click').css({'background-color':'#f00', 'color':'#fff', 'cursor':'inherit'}).text('Open this window again and this message will still be here.');
            return false;
        });
    }]);
</script>

Demonstration of using callbacks

Example with alerts. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.

<p><a class="callbacks" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselGraduation.jpg">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.callbacks').colorbox({
            onOpen: function(){ alert('onOpen: colorbox is about to open'); },
            onLoad: function(){ alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete: function(){ alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup: function(){ alert('onCleanup: colorbox has begun the close process'); },
            onClosed: function(){ alert('onClosed: colorbox has completely closed'); }
        });
    }]);
</script>

Retina Images

Retina

Non-Retina

<p><a class="retina" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/unsplash_527bf5fd7f5f6.jpg">Retina</a></p>
<p><a class="non-retina" href="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/unsplash_527bf5fd7f5f6.jpg">Non-Retina</a></p>
<script>
    WDN.initializePlugin('modal', [function() {
        var $ = require('jquery');
        $('.non-retina').colorbox({rel: 'group5', transition: 'none'})
        $('.retina').colorbox({rel: 'group5', transition: 'none', retinaImage: true, retinaUrl: true});
    }]);
</script>
Contributed By: 
IIM