Simple & Customizable jQuery Lightbox Plugin – Colorbox

Colorbox is a very simple and customizable jQuery lightbox plugin that supports photos, grouping, slideshow, ajax, inline, and iframed content as lightbox element. There are huge predefined options that can be customized the appearance of the lightbox accordingly.

Features:

• It can be installed with NPM.
• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Appearance is controlled through CSS so it can be modified as you need.
• Lightweight and easy to implement.
• Supports on all modern browsers.

Install with NPM

$ npm install jquery-colorbox

How to use it:

1. Include the Javascript jquery.colorbox-min.js at the bottom of the web page.

<script src="path/to/jquery.colorbox-min.js"></script>

2. Include the CSS colorbox.css in the header of the page.

<link rel="stylesheet" href="path/to/colorbox.css">

3. Add the basic HTML to the page.

<a class="group1" title="Title 1" href="path/to/demo-1.jpg">
  <img src="path/to/demo-1.jpg"/>
</a>

4. Initialize the plugin and we’re ready to go.

$(".group1").colorbox({
  rel:'group1'
});

5. Also you need to include images folder for icon, loader and background overlay.

Responsive

By default, it will not work properly in small screen resolutions, but don’t be worry, you will just need to add the code given below and it will work excellent on all devices.

// Make ColorBox responsive
    jQuery.colorbox.settings.maxWidth  = '95%';
    jQuery.colorbox.settings.maxHeight = '95%';

    // ColorBox resize function
    var resizeTimer;
    function resizeColorBox()
    {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                        jQuery.colorbox.load(true);
                }
        }, 300);
    }

    // Resize ColorBox when resizing window or changing mobile device orientation
    jQuery(window).resize(resizeColorBox);
    window.addEventListener("orientationchange", resizeColorBox, false);

Plugin’s default options:

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
// Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});

Event Hooks

// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});