Learn how to dynamically add images to galleries via triggered web page events or while a user navigates through a gallery so that images are loaded lazily. Loading images lazily can improve the performance and usability of your gallery.
For this example, we're going to assume all our images are located in a single directory and follow specific naming conventions. This allows us to dynamically load more images according to those conventions.
To start out, we'll create a file in our development
directory named dynamic-images.html
with the contents as shown in the following code:
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery.min.js"> </script> <script src="../galleria-1.2.8.min.js"></script> <script type="text/javascript"> /* Galleria initialization code */ </script> </head> <body> <div id="galleria" style="height: 500px;"> </div> </body> </html>
This will just provide us with the basic structure before we start writing our JavaScript code.
The following process of dynamically loading more images in a gallery is simple:
First, create a JavaScript method that will retrieve the additional images.
Next, bind the
loadstart
Galleria event so that we can check every time a new image is loaded, if it's time to add more images to the gallery.Lastly, in the
loadstart
event handler, provide the correct logic to decide if more images can be loaded.
Here is a sample JavaScript snippet that will provide what was just discussed:
<script> /* function to get images with URLs generated from one number to another larger number */ var getImages = function(from, to){ var data = []; for(var i=from; i<=to; i++){ data.push({ image: 'images/image' + i + '-1600px.jpg', thumb: 'images/image' + i + '-200px.jpg', title: 'Image ' + i, description: 'Image ' + i + ' Description' }); } return data; } $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); /* Load with the first 2 images */ Galleria.run('#galleria', { dataSource: getImages(1, 2), }); Galleria.ready(function(options) { var galleria = this; galleria.bind('loadstart', function(e) { /* after an image starts load, check to see how close we are to loading more images */ var size = galleria.getDataLength(); if((e.index + 2) > size && size <= 10){ galleria.push( getImages(size + 1, Math.min(size + 2, 10))); } }) }); }); </script>
The getImages
method is designed to retrieve a section of the 10 available images on the filesystem. The dataSource
Galleria parameter is used to load the initial couple of images in Galleria. Finally, we bind the loadstart
event, and inside it we add more images to Galleria with the galleria.push
method if more images are available.
Since we know the naming convention of the images on the filesystem, we can dynamically construct the necessary image URLs for the gallery. In addition, Galleria provides the necessary events and API calls for us to be able to hook in and dynamically load images.
We can also combine this technique with an AJAX request to a web server that returns additional image data from server side code. The server could potentially have image data that knows about images for the gallery stored so that a specific naming convention wouldn't be required.