Galleria How-to | Instant Galleria How-to

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

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.

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.

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.

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.

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.

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 */
});

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Instant Galleria How-to

By : Nathan Van Gheem

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book

Using the API (Medium)

Getting ready

How to do it...

There's more...

Complete API reference

Another way to bind events

Instant Galleria How-to

By : Nathan Van Gheem

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book

Using the API (Medium)

Getting ready

How to do it...

There's more...

Complete API reference

Another way to bind events

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access