jQuery Adaptive Mosaic grid Gallery

a fast and lightweight jQuery plugin

version 2.3

Latest version: 2.3
Older versions: 2.0, 1.0
(last update: 26 Dec 2015)

Go to example with MBC ImageLightbox: 2.3b

A fast, responsive, reliable and lightweight script for mosaic grid galleries with constant [dynamic] height. Images can be added dynamically in every moment

Customizable: height range, padding*, min number of images in a row.

Compatible with every browser, lightbox-compatible.

* padding values must be updated in main CSS too, to work properly. Default is 3px.

Fill with Javascript only

HTML

Add an adaptive mosaic gallery <div> in <body>:


<div id="gallery" class="adaptiveGallery"></div>

JAVASCRIPT

1) Create a list of objects containing:


var aImages = [
    {
        src: [string]              //the image path - mandatory
        attr: {                    //the standard attributes (href, title etc.)
            href: '[string]',
            title: '[string]'
        }
        data: {                    //object containing HTML5 data to append to hyperlink (*as attributes!*)
            lightbox: '[string]',  //e.g. <a data-lightbox="album1">
            title: '[string]'
        }
    },
    //...
]

2) When document ready, add this code:


var myGallery = $('#gallery').adaptiveGallery({
    pad: 3,                       //[3] grid width (space between image boxes)
    maxD: 300,                    //[300] max height of each box
    minN: 1,                      //[1] min number of box in a row
    popSpeed: 200,                //[250] ms delay between chained fade animation for loaded images (0 = all at the same time)
    onAdd: function(a){           //[function(){}] click callback for new image added to dom tree
        a.click(function(){
            lightbox.start($(this));
            return false;
        });
    },
    imgs: aImages                 //[null] array of images 
});

3) To add other images use:


var aImagesToAdd = []; //[array] see point 1 
myGallery[0].adaptiveGallery.add(aImagesToAdd);

Fill with HTML only

Gallery with existent images tag <img>.

Do not leave spaces or new lines between boxes!

HTML

Add an adaptive mosaic gallery <div> in <body>. Fill it with this markup.

Do not leave spaces or new lines between boxes!
This example show you how to implement lightbox2 too


<div id="gallery" class="adaptiveGallery"><!--
    --><div class="box">
        <a href="img/for/lightbox" data-lightbox="group"><div class="overlay">description 1</div></a>
        <img src="img/to/display">
    </div><!--
    --><div class="box">
        <a href="img/for/lightbox" data-lightbox="group"><div class="overlay">description 2</div></a>
        <img src="img/to/display">
    </div>
</div>

JAVASCRIPT

When document ready, add code to initialize adaptive gallery (see point 3 above) without setting images array (or set it to null).