Lightboxes

Colorbox

You can use Justified Gallery with any lightbox in the way you prefer. In this tutorial you can see how to use Colorbox and Swipebox, but the same principles can be applied to use any other lightbox.

To use Colorbox you need to create a listener for the jg.complete callback to initialize Colorbox. Note that we are also using the rel = 'gallery2' option, that sets to 'gallery1' the rel attribute for all the links. In this way Colorbox can create a group of images.

<div id="colorboxExample">
    <a href="image1.jpg">
        <img alt="title 1" src="image1_thumbnail.jpg" />
    </a>
    <a href="image2.jpg">
        <img alt="title 2" src="image2_thumbnail.jpg" />
    </a>
    ...
</div>

$('#colorboxExample').justifiedGallery({
    lastRow : 'nojustify', 
    rowHeight : 100, 
    rel : 'gallery1', //replace with 'gallery1' the rel attribute of each link
    margins : 1
}).on('jg.complete', function () {
    $(this).find('a').colorbox({
        maxWidth : '80%',
        maxHeight : '80%',
        opacity : 0.8,
        transition : 'elastic',
        current : ''
    });
});

Swipebox

To use Swipebox you need to use again a listener for the jg.complete callback.

$('.swipeboxExampleImg').swipebox();

Look at the following code for a complete example:

<div id="swipeboxExample">
    <a href="image1.jpg" class="swipeboxExampleImg">
        <img alt="title 1" src="image1_thumbnail.jpg" />
    </a>
    <a href="image2.jpg" class="swipeboxExampleImg">
        <img alt="title 2" src="image2_thumbnail.jpg" />
    </a>
    ...
</div>

$('#swipeboxExample').justifiedGallery({
    lastRow : 'nojustify', 
    rowHeight : 100, 
    rel : 'gallery2',
    margins : 1
}).on('jg.complete', function () {
    $('.swipeboxExampleImg').swipebox();
});

Swipebox seems has problems with certain types of jQuery versions. The version 2.x versions seems the only ones that work (here we use v2.1.0).

Multiple gallery with one call

The three galleries are created with a single call to the plugin. Note that, to create the groups, the images have different rel tags. Note: certain types of lightbox libraries could accept different methods to create those groups.

<div class="myExMul" >
    <a href="image1_b.jpg" rel="myExMul-1">
        <img alt="title 1" src="image1_thumbnail.jpg" />
    </a>
    <a href="image2_b.jpg" rel="myExMul-1">
        <img alt="title 2" src="image1_thumbnail.jpg" />
    </a>
    ...
</div>
<div class="myExMul" >
    <a href="image3_b.jpg" rel="myExMul-2">
        <img alt="title 3" src="image3_thumbnail.jpg" />
    </a>
    <a href="image4_b.jpg" rel="myExMul-2">
        <img alt="title 4" src="image4_thumbnail.jpg" />
    </a>
    ...
</div>
<div class="myExMul" >
    <a href="image5_b.jpg" rel="myExMul-3">
        <img alt="title 5" src="image5_thumbnail.jpg" />
    </a>
    <a href="image6_b.jpg" rel="myExMul-3">
        <img alt="title 6" src="image6_thumbnail.jpg" />
    </a>
    ...
</div>

$('.myExMul').justifiedGallery({
    rowHeight : 50 
}).on('jg.complete', function () {
    $(this).find('a').colorbox({
        maxWidth : '80%',
        maxHeight : '80%',
        opacity : 0.8,
        transition : 'elastic',
        current : ''
    });
});

To set the rel automatically, just call the Justified Gallery inside a foreach.

$('.myExMul').each(function (i, el) {
    $(el).justifiedGallery({rel: 'myExMul-' + i}).on('jg.complete', function () {
        $(this).find('a').colorbox({
            maxWidth : '80%',
            maxHeight : '80%',
            opacity : 0.8,
            transition : 'elastic',
            current : ''
        });
    });
});

Lightboxes

Colorbox

Swipebox

Multiple gallery with one call

Gallery 1

Gallery 2

Gallery 3