jQuery: image album

Creating an image album with jQuery is easy if you have the right plugin. In this post I'm going to show you how to create an image album using the Booklet plugin. As you will see, the most difficult part of this is only the setup.

Installation

Follow the instructions found here to install and configure all the Booklet files and dependencies.

The markup

Our markup is very simple:

<div id="album">

 <div class="b-load">
 
  <!--images here-->

    </div>

</div>

The element with class b-load is required by our plugin.

The jQuery code

The jQuery code is even simpler than our markup:

$(function() {

  $('#album').booklet({
    cursor: 'move',
    closed: true,
    width: 1000
  });

});

We configure our plugin with some basic options. For a complete list of all available plugin options, visit the plugin's documentation page. You can see the demo below.

Demo

Live demo