A repository of over 1000 quality jQuery plugins

jQuery xGallerify

xGallerify is a jQuery Galleries plugin.

Created by X Remix

A lightweight, responsive, smart gallery based on jQuery.

Not what you're looking for? Click here to view more Galleries jQuery plugins

xGallerify

npm version Bower version

A lightweight, responsive, smart gallery based on jQuery.

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

NameDefault / OptionsTypeDescription
margine.g. 10intValue in pixels of the margin of each image on each side
modedefault, bootstrap, bootstrapv4, flickr, small or custom objectstring or objectThe style mode wich defines how the gallery should be displayed and how many images fit in a row. See description in the mode section.
lastRowadjust, fullwidth or hiddenstringSet the last row to the full width, hide it or find a good adjustment. NOTE: I personally prefer adjust, wich is also the default.
jsSetuptrue or falseboolSets some default CSS values to the elements like dislay:inline-block and for each image inside of a container width:100%. This can be disabled if you want to have your own floating or style this in plain CSS.
debounceLoadtrue or falseboolThis functionality waits 50ms before rendering a new loaded image to boost the performance on older machines. Default is set to true.
debounceTime50intSet the time for the debounceLoad. Default is set to 50ms.
width800intWidth of the gallery in px - Work in Progress! It is recommended to use an outer div with a specific width to controll the width of the Gallery.

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

ModeBreakpointImages per row
default modeContainer width > 18004
Container width > 12003
Container width > 7682
Container width < 7681
Maximal image heightScreen Height * 0.5
bootstrap modeContainer width > 11704
Container width > 9703
Container width > 7502
Container width < 7501
Maximal image heightScreen Height * 0.5
bootstrapv4 modeContainer width > 12004
Container width > 9923
Container width > 7682
Container width < 7681
Maximal image heightScreen Height * 0.5
flickr modeContainer width > 18004
Container width > 13003
Container width > 6102
Container width < 6101
Maximal image heightScreen Height * 0.4
small modeContainer width > 180014
Container width > 130010
Container width > 6106
Container width < 6104
Maximal image heightScreen Height * 0.4

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.

Analytics



You might also like these other Galleries jQuery Plugins

  • Product Showcase

    A jQuery plugin to showcase your top products on your webpage. Creates a slideshow with icon controls.

  • PhotoSwipe

    JavaScript image gallery with zoom support and touch gestures.

  • Viewer JS

    JavaScript image viewer

 Views
 Downloads

Download Github Page
License:

The MIT License (MIT)