Book Image

Instant Galleria How-to

By : Nathan Van Gheem
Book Image

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book

Providing beautiful and usable galleries is an important aspect of the Web today. A gallery solution needs to integrate into your web application easily and seamlessly. Users expect mobile sites that function on par with their desktop counterparts‚Äîespecially for image galleries. In order to accomplish these tasks, you need to use a JavaScript (not Flash) that is extensible and scales to mobile devices. "Instant Galleria How-to" will teach you how to use Galleria in advanced scenarios to become an expert and integrate Galleria into your next project using themes and plugins to accomplish any task. This book teaches you how to use and create themes and plugins,  using the Galleria API through a series of recipes that include a plethora of code examples. You'll be taken through detailed instructions on the usage of JavaScript to customize Galleria. You will create your own theme (mobile friendly), plugin, and learn all the configuration options of Galleria. You'll learn how to customize Galleria by using its extensive API, optimize Galleria, integrate with Google Analytics, create tests for your customization, and integrate into your web application. You'll become an expert user of the Galleria framework, which will enable you to deploy beautiful, mobile friendly galleries for your next web project.
Table of Contents (7 chapters)

Adding images dynamically (Medium)


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.

Getting ready

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.

How to do it...

The following process of dynamically loading more images in a gallery is simple:

  1. First, create a JavaScript method that will retrieve the additional images.

  2. 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.

  3. 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.

How it works...

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.

Following up with server-side techniques

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.