Create a Flipping Awesome 3D Gallery with jQuery Flipping Gallery

Today, I would like to show you another jQuery plugin of mine called Flipping Gallery that will let you add a simple but beautiful 3D flip gallery right on your website with a simple markup and one simple function call.

Flipping Gallery, like all of my plugins, is focused on ease of use and experimentation so you will be able to customize my plugin to your liking. Now let’s talk about what problems I faced while developing this plugin and how you can use it to spice up your website.

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

Create a Flipping Awesome 3D Gallery with jQuery Flipping Gallery


Using the Flipping Gallery Plugin

How does this work?

What I wanted this plugin to do is to simply take all the <img> tags in a container and the plugin should stack them up, create dimension and let the users interact right away without adding any more markup. I succeeded in creating that ideal plugin but it wasn’t a smooth ride.

First problem I encountered was that I needed a way to add a dimension to the gallery while stacking them up in the correct order. What I had to do was to loop through all the photos, determine which one was at the top, and then calculate the correct z-index, opacity and apply them on each individual photo. I then scaled them with CSS3 transform so that it created a dimension of photos stacking further and further into the website.

The second and last problem was the CSS3 transform I used will bubble up if the user triggers the transform simultaneously causing the animation to flash and flicker. It took me ages to come up with a switch that will create a timeout between each trigger so that the first animation should finish before the next begins. I overcome this by simply adding a condition to check for an “animating” class in the parent object when the user triggers the flip. If it doesn’t exist, then add that class signaling that the gallery is animating and prevent another trigger to bubble up. Once all the CSS transformation is done, I removed the “animating” class and allowed the users to continue interacting with the gallery.

For the scroll, I simply bound a flip function to the mouse scroll event and detected which direction the user is scrolling. If the user scrolls down then flip forward, if scrolling up then flip backward.

Now, the gallery should react to users’ interaction smoothly.

How-Tos

Since this is a jQuery plugin, please include the latest jQuery library available here, jQuery.flipping_gallery.js and flipping_gallery.css which can be found here, in to your document’s <head>.

Once that is done, follow the HTML markup shown below:

HTML:

<body>
  ..
  <div class="gallery">
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    ...
  </ul>
  ..
</body>

You can add as many image tags as you like. The plugin will let you choose how many to show without causing overflow issues.

JS:

$(".gallery").flipping_gallery({
    direction: "forward",
    selector: "> a",
    spacing: 10,
    showMaximum: 15,
    enableScroll: true
  });

The script will detect all the images, stack them up and apply the dimension effect accordingly. Now, let’s explore all the possibilities with this plugin:

  • direction: You can determine the default behavior when the user clicks the gallery here. You can either make the gallery move “forward” or “backward” on click. The default value is “forward”.
  • selector: In case you do not want to wrap your images with a link tag, you can define your custom selector here. This option takes the normal CSS selector. The default value is “> a”.
  • spacing: This option will let you define the spacing between each photo while stacking in pixels (without the unit). The default value is “10”.
  • showMaximum: As mentioned previously, you can set the number of pictures to show in the view port at a time. This is perfect when you have hundreds of photos and you don’t want them all to show at once. The default value is “15”.
  • enableScroll: You can toggle the ability to scroll through the gallery here. The default value is “true”.
  • flipDirection: You can define which direction the card should flip. Acceptable options are “left”, “right”, “top” or “bottom”. The default option is “bottom”.
  • autoplay: You can choose whether you want your gallery to flip or not by simply assigning an interval here. For example, set this option to 500 to have your gallery flip forward on every 500 milliseconds, or set this to 0 or false to disable autoplay. The default value is “false”.

Adding Captions to Your Pictures

With Flipping Gallery, you can add captions to your image by simply adding a data-caption attribute on the elements you defined in your selector as shown below:

HTML:

<body>
  ..
  <div class="gallery">
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    ...
  </ul>
  ..
</body>

Once that is done, simply call the same function mentioned earlier and the caption should now show under each picture.

Public Methods

There may be times when you want to have navigation buttons so that the user can interact with them manually. I have added 2 public methods that will let you control the gallery like you own it.

$.fn.flipForward()
You can manually trigger the gallery to flip forward to the next photo by calling the method like this:

JS

$(".gallery").flipForward();

$.fn.flipBackward()

You can manually trigger the gallery to flip backward to the next photo by calling the method like this:

JS

$(".gallery").flipBackward();

Conclusion

Now you will have a flipping awesome gallery that is both simple and fun to use. I hope you enjoy this little fun plugin I created, and once again, if you have something to show, questions, or suggestions, you can let me know in the comments section below. Thank you for reading this, and stay tuned for more tutorials in the future.