Fork me on GitHub

Galereya

Responsive, easily customizable jquery gallery with a masonry layout.

Download    Demo
Bookmark and Share

Browser compatibility

Works on Chrome, Safari, Firefox, Opera(turned off some CSS animations), IE7+(Graceful degradation), Android browser, Chrome mobile, Firefox mobile, Safari on iOS and etc.


Galereya effects and browser compatibility depends on your custom CSS styles a lot!

Rapid start

                        
$('#gal1').galereya({
    load: function(next) {
        $.getJSON('images.json',
        function(data) {
            // var data = [{"lowsrc":"upload\/thumbnails\/5165b70278e0e2.80829014.jpg","fullsrc":"upload\/5165b70278e0e2.80829014.jpg","description":"Mehmet Dere","category":"drawing"}, ...]
            next(data);
        });
    }
});
                        
                    

or this way:

                        
‹div id="gal1"›
    ‹img src="path/to/thumbnail"
        alt="Title here"
        title="Or here(more priority)"
        data-desc="some description"
        data-category="image category here"
        data-fullsrc="path/to/full/image."
    /›
                                    ...
    ‹img src="imgs/thumbnails/image42.jpg"
        alt="Image"
        data-desc="Example"
        data-fullsrc="imgs/image42.jpg"
    /›
‹/div›
                        
                    
                        
$('#gal1').galereya();
                        
                    
View

Options

                        
$('#galleryherepls').galereya({
    // spacing between cells of the masonry grid
    spacing: 0,

    // waving visual effect
    wave: true,

    // waving visual effect timeout duration
    waveTimeout: 300,

    // special CSS modifier for the gallery
    modifier: '',

    // speed of the slide show
    slideShowSpeed: 10000,

    // speed of appearance of cells
    cellFadeInSpeed: 200,

    // the name of the general category
    noCategoryName: 'all',

    // set to true, if you don't want to show the slider on a cell click.
    disableSliderOnClick: false,

    // loading of images from JS. Just pass data to the callback 'next'.
    load: function(next) {
         //Data structure example
         //var data = [{"lowsrc":"upload\/thumbnails\/5165b70278e0e2.80829014.jpg","fullsrc":"upload\/5165b70278e0e2.80829014.jpg","description":"Mehmet Dere","category":"drawing"}]
         next(data);
    },

    //Cell click handler. Works even when the 'disableSliderOnClick' property is true.
    onCellClick: function(e) {}
});
                        
                    

Methods

                            
var gallery = $('#gal1').galereya();
gallery.openSlider(5);
                            
                        
                            
// Opens slider. `visibleIndex` parameter is an index of a set of visible cells.
gallery.openSlider(5);

// Yes, close it.
gallery.closeSlider();

// Show a special category of images. `categoryName` is a name of a category.
gallery.changeCategory(categoryName)

// Start slide show.
gallery.startSlideShow();

// Stop slide show.
gallery.stopSlideShow();

// Go to the next slide, if slider is opened.
gallery.nextSlide();

// Go to the previous slide, if slider is opened.
gallery.prevSlide();

//Load additional images to the galereya. `data` is an object like in the load function.
loadMore([{"lowsrc":"upload\/thumbnails\/5165b70278e0e2.80829014.jpg","fullsrc":"upload\/5165b70278e0e2.80829014.jpg","description":"Mehmet Dere","category":"drawing"}, ...]);
                            
                        

Customization example

Note: Don't set animations of cells using size properties like width, height, margins, paddings, instead of this use transform property. I recommend you to use an animation of a transform property everywhere when it is possible, it is more faster, safer and more modern.


For customizing Galereya you can start writing your styles from scratch or use modifier:

                        
.galereya.ex1 {
    max-width: 1400px;
    margin: auto;
}

    .galereya.ex1 .galereya-top { display: none; }

    .galereya.ex1 .galereya-grid { top: 0; }

    .galereya.ex1 .galereya-cell {
        width: 80px;
        padding: 0;

        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    .galereya.ex1 .galereya-cell:hover {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-box-shadow: 0 0 2em #000;
        box-shadow: 0 0 2em #000;
    }

        .galereya.ex1 .galereya-cell-img { width: 80px; }

        .galereya.ex1 .galereya-cell-desc { display: none; }

        .galereya.ex1 .galereya-cell-overlay {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

.galereya-slider.ex1 {
    opacity: 0;

    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translate(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
    -o-transition: none;
}
.galereya-slider.ex1.opened { opacity: 100; }

    .galereya-slider.ex1 .galereya-slider-desc {
        font-size: 12pt;

        top: 0;
        bottom: auto;
        left: 0;

        width: 200px;
    }

    .galereya-slider.ex1 .galereya-slider-play,
    .galereya-slider.ex1 .galereya-slider-close {
        top: auto;
        bottom: 0;
    }

    .galereya-slider.ex1 .galereya-slider-slide {
        opacity: 100;
        background: #000 url(img/wild_oliva.png);
        -webkit-transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        transition: opacity .5s ease-out;
        -o-transition: none;
    }
    .galereya-slider.ex1 .galereya-slider-slide.next {
        opacity: 0;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translate(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    .galereya-slider.ex1 .galereya-slider-slide.current {}
    .galereya-slider.ex1 .galereya-slider-slide.prev {}


        .galereya-slider.ex1 .galereya-slide-img {
            -webkit-box-shadow: 0 0 1em #000;
            box-shadow: 0 0 2em #000;
        }


@media only screen and (min-width: 601px) {
    .galereya.ex1 .galereya-cell { width: 150px; }
        .galereya.ex1 .galereya-cell-img { width: 150px; }
}
                        
                    
                        
$('#ex1').galereya({
    wave: false,
    modifier: 'ex1',
    spacing: 5,
    disableSliderOnClick: true,
    load: function(next) {
        $.getJSON('images.json', function(data) {
            next(data);
        });
    }
});
                        
                    
View