Galleria.js, an easy-to-use gallery generator library
Galleria is a Javascript framework that simplifies the process of generating an online gallery for your images.
It’s open source, straightforward to use, and responsive. Also, they have great docs.
I’ll demonstrate it with a gallery that I made from my travel photos from 2016.
First, I have selected and resized 299 images from my photos, and I copied them into the /img/ folder of my blog. Then, I made thumbnails for the images in order to optimize the site. (These steps can be done in bulk with your favorite image editor.) Thumbnails are tiny versions of the pictures, with a thumbnail - prefix.
Then I made a html page skeleton, referencing
- JQuery (necessary for Galleria)
- the Galleria minified javascript file
- the Galleria classic theme css file
- my custom script
<head>
<!-- Loading jquery -->
<script src="js/jquery.min.js"></script>
<!-- Loading Galleria .css and .js files -->
<script src="galleria/galleria-1.4.2.min.js"></script>
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<!-- Loading custom js -->
<script src="js/script.js"></script>
</head>The html body contains only one div, with a galleria class. We will use this div to display the images with Galleria.
<div class="galleria">
<!-- images will be displayed in this div -->
</div>Then, the actual Javascript snippet - that makes the work for us - is the following:
// Initialize array for the images
var data = [];
// Fill up array with images from the img folder.
// There will be exactly 299 pictures.
// This is a poor solution: this number should not be hard coded.
// It could possibly be done with AJAX.
for (i = 1; i<300; i++) {
var image = {
image : "img/" + i + ".jpg",
thumb : "img/thumb - " + i + ".jpg"
// thumbnails added for performance
};
data.push(image); // pushing image to data object
};
Galleria.run('.galleria', {
// Div with "galleria" class <-- we'll load images here
dataSource: data,
responsive:true,
height: 0.65,
thumbnails: 'lazy', // lazy load thumbnails, in chunkcs
lightbox: true, // use lightbox for images on mouseclick
lightboxTransitionSpeed: 50,
lightboxFadeSpeed: 50,
preload: 4
});
Galleria.ready(function() {
// keyboard navigation
this.attachKeyboard({
right: this.next,
left: this.prev,
});
// lazy loading thumbnails, in chunks, for performance
this.lazyLoadChunks( 10 )
});That’s all. The result can be seen here.
