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.

Related Content you might be interested in

Current Title:

Small book image
Instant Galleria How-to
Nathan Van Gheem
Feb, 2013 | 70 pages
No titles found
Table of Contents (7 chapters)
Instant Galleria How-to
Instant Galleria How-to
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Galleria How-to
Galleria How-to
Setting up the development environment (Simple)
Your first gallery (Simple)
Configuring Galleria (Simple)
Installing themes (Simple)
Creating your own theme (Medium)
Creating mobile friendly themes (Simple)
Installing plugins (Simple)
Using the Flickr plugin (Medium)
Creating a plugin (Advanced)
Using the API (Medium)
Alternative image data structures (Simple)
Optimizing Galleria (Simple)
Adding images dynamically (Medium)
Triggering Galleria (Advanced)
Recording image views with Google Analytics (Medium)
Handling errors gracefully (Medium)
Creating tests for customizations (Advanced)
Web application integration (Advanced)

Using the API (Medium)

Learn how to use the Galleria API to hook into events and use different API calls by creating a customized gallery that utilizes them.

Getting ready

For this exercise, we'll be going through an example that utilizes an event listener and API calls. To start us off, create an api-example.html file in the development folder.

How to do it...

  1. To keep our HTML as small as possible, we'll use the flickr plugin. That way we don't have to reference any local images 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 src="../plugins/flickr/galleria.flickr.min.js">
 </script>
 <script type="text/javascript">
   $(document).ready(function(){
     Galleria.loadTheme(
       '../themes/classic/galleria.classic.min.js');
     Galleria.run('#galleria', { flickr: 'search:beach' });
   });
 </script>
</head>
<body>
 <div id="galleria" style="height: 500px;">
 </div>
</body>
</html>

    This is not any different from previous examples we worked on. Still, make sure to test out the gallery first before you proceed.

  2. Next, we'll hook into Galleria's event system to temporarily show and hide the info box on the classic theme when an image is displayed. To do this we'll add the following code just below the Galleria.run call:

    Galleria.ready(function(options) {
    /* show the info box when an image is displayed */
    var galleria = this;
    /* bind event when each image is displayed */
    galleria.bind('loadfinish', function(e) {
        var info = $('.galleria-info-text');
        var link = $('.galleria-info-link');
        var close = $('.galleria-info-close');
        info.fadeIn('fast');
        link.hide();
        close.show();
        setTimeout(function(){
            /* in 2 seconds, hide again */
            info.fadeOut('fast', function(){
                /* when the info box is completely hidden,
                   we can then toggle the link and close 
                   buttons. */
                link.show();
                close.hide();
            });
        }, 2000);
    });
});

    The Galleria.ready function runs the code provided in the anonymous function after the gallery is set up. Then, the bind method is used on the galleria instance to bind events just as in jQuery. Here, the loadfinish event is triggered every time after an image is loaded into the gallery. The anonymous function provided as the final parameter takes only one parameter, an event object. That one event object provides information on the particular event and the state of the gallery. Then, inside the event handler, we're simply retrieving the info element, fading it in so it can be seen, and then setting a timer to fade out.

  3. Next, we're going to provide a pause/play button for the gallery. This won't require any event handlers, just adding elements to the DOM and utilizing Galleria's API. We'll add the following code below the previous event handler code:

    Galleria.ready(function(options) {
    var galleria = this;
    /* Add pause/play button to DOM */
    var pauseplay = $('<div class="pauseplay" />').
                      insertAfter('.galleria-counter');
    /* Check if auto play specified. If it is, we know
       the gallery is playing already */
    if(galleria._options.autoplay){
        pauseplay.addClass('playing').html('pause');
    }else{
        pauseplay.html('play');
    }
    /* Handle click events on the button to start/stop playing
       the gallery and to change the text for the button */
    pauseplay.click(function(){
        if(pauseplay.hasClass('playing')){
            galleria.pause();
            pauseplay.html('play').removeClass('playing');
        ''}else{
            galleria.play();
            pauseplay.addClass('playing').html('pause');
        }
    });
});

    Here, we are first looking to see if autoplay is enabled so we know if the gallery is already playing. To do this, we look at the provided options for Galleria: galleria._options.autoplay. Then, Galleria provides simple pause and play methods as part of its API.

  4. To style the pause/play button, place the following code below the script tag we're working in:

    <style>
    .pauseplay{
        position: absolute;
        bottom: 10px;
        left: 45px;
        background-color: #EBEBEB;
        font: normal 11px/1 arial,sans-serif;
        color: black;
        z-index: 1;
        cursor: pointer;
        padding: 2px;
    }
</style>

    Here, we're just placing the button to the right of the counter and styling it so it's somewhat noticeable.

  5. Lastly, let's go through opening a lightbox of the gallery using the following code:

    Galleria.ready(function(options) {
    var galleria = this;
    var button = $('<div class="lightbox-btn">Light Box</div>').
        insertAfter('.galleria-counter');
    button.click(function(){
        galleria.openLightbox();
    });
});

    All we're doing here is adding a lightbox button and using the galleria.openLightbox method to open the Galleria lightbox when the button is clicked.

  6. To style the lightbox use the following code:

    <style>
    .lightbox-btn{
        position: absolute;
        bottom: 10px;
        right: 30px;
        background-color: #EBEBEB;
        font: normal 11px/1 arial,sans-serif;
        color: black;
        z-index: 1;
        cursor: pointer;
        padding: 2px;   
    }
</style>

There's more...

The following list provides a quick reference to useful Galleria events:

  • thumbnail: This event triggers when a thumbnail is displayed.

  • loadstart: This event triggers when an image has begun loading in the gallery.

  • loadfinish: This event triggers when an image has finished loading in the gallery.

  • image: This event triggers when an image is displayed and finished its transition.

  • play: This event triggers when a gallery starts playing.

  • pause: This event triggers when a gallery is paused.

  • idle_enter: This event triggers when a gallery is placed into idle mode. Idle mode is when the user does not interact with the gallery for the configured set of milliseconds.

  • idle_exit: This event triggers when a gallery leaves idle mode.

  • rescale: This event triggers when a gallery is rescaled.

The following list provides a quick reference for useful Galleria API methods:

  • play: This method is used to start playing the gallery

  • pause: This method is used to pause the gallery

  • next: This method is used to go to the next image in the gallery

  • prev: This method is used to go to the previous image in the gallery

  • show(index): This method shows the image of the specified index

  • openLightbox: This method opens the lightbox for the current image

  • load: This method loads new image data

  • push: This method adds additional image data to the gallery

  • setOptions: This method sets gallery options

  • getActiveImage: This method gets the image that is currently displayed

Complete API reference

A complete reference to all API methods is available at http://galleria.io/docs/api/methods/ and for a complete list of all events visit http://galleria.io/docs/api/events/.

Another way to bind events

Instead of placing the event binding inside a Galleria.ready call, we can use the Galleria.on function if you prefer the following syntactical style:

Galleria.on('mygalleriaevent', function(e){
  /* event code */
});
Previous Section
End of Section 11
Next Section