xGallerify

A lightweight, responsive, smart gallery based on jQuery.

• Responsive
• Simple to use
• Customizable and custom styling
• Only 3kb file size
• AngularJS directive available

Demo

Check out the Demo or try it yourself with CodePen

To see a real-live sample see the Flickr Demo or try it yourself with the CodePen Sample

Usage

$('.photos').gallerify({
    margin:10,
    mode:'default'
});

In this sample .photos is a <div> containing the images. xGallerify will resize the images in a pleasant way for you.

Custom Styling

You can put your images inside of div's and style them the way you want. Check out the full working CodePen Demo for a sample with a custom styled div.

CDN (jsDelivr)

<!-- Latest Version -->
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/latest/jquery.xgallerify.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/latest/jquery.xgallerify.js"></script>

<!-- Specific Version -->
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/0.0.14/jquery.xgallerify.min.js"></script>

Parameters

Modes

The modes property defines how many images do show at what container width

NOTE If you want to have another mode you are welcome to contribute or open an issue.
The maximal image height helps to show multiple images in a row, if the images do have a very high ratio like 3:9.

Predefined Modes

Custom Modes

The mode parameter can also be an object that defnies the breakpoints and max height of an image.
Check out the Codepen demo or the following sample object:

var gallery = $('.photos').gallerify({
    margin:5,
    mode:{
        maxHeight: screen.height * 0.5,
        breakPoints:[
            {
                minWidth: 1170,
                columns: 10,
            },{
                minWidth: 970,
                columns: 6,
            },{
                minWidth: 750,
                columns: 3,
            },{
                maxWidth: 750,
                columns: 2,
            }
        ]
    },
    lastRow:'adjust'
}); 

Functions

Render

To reinitialize the gallery when new images are added / loaded

$('.photos').gallerify();
//...
$(window).on('load', function() { // Eventlistener that fires when all images are loaded
    $('.photos').gallerify.render();
});

Render Async Images

Automatically renders every time an image has been loaded. This needs to get called everytime you add a new image to .photos after calling gallerify(), if you don't have your own image loaded event listener like described in the Render function documentation.

$('.photos').gallerify();

$('.photos').append('<img src="sample-image.jpg">');
$('.photos').append('<img src="sample-image2.jpg">');
$('.photos').append('<img src="sample-image3.jpg">');

$('.photos').gallerify.renderAsyncImages();

Community

xGallerify AngularJS directive: JohnnyTheTank/angular-xGallerify

Thanks everyone for contributing. Suggestions are always welcome.
Also I'm happy to hear in which projects you've used the library.