Galereya
Responsive, easily customizable jquery gallery with a masonry layout.
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();
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);
});
}
});