3D Flipping Gallery with jQuery and CSS3 – tutorial and example

We’d like to present an interesting tutorial, about creating 3D Flipping Gallery with jQuery and CSS3.

Creating 3D Flipping Gallery

The tutorial shows how to create an easy and fancy jQuery plugin, which uses CSS3 transitions and transforms to create a 3D galley with awesome flipping animation.

Easy navigation through Previous / Next buttons, click or mouse scrolling.

3D Flipping Gallery example
3D Flipping Gallery example

Basic usage

Just include the latest jQuery library, as well jquery.flipping_gallery.js and flipping_gallery.css into the document, and prepare HTML structure as follows:

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

Make the JS call with adjusted params, for example:

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

Adding Caption is simple – just add data-caption attribute to link markup, for example

    ...
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    ...

With this, the caption will appear below the image as you scroll through the gallery.

Public Method

$.fn.flipForward() – trigger the gallery to flip forward to the next photo

$.fn.flipBackward() – trigger the gallery to flip backward to the previous photo

Demo:

http://www.thepetedesign.com/demos/flipping_gallery_demo.html

GitHub:

https://github.com/peachananr/flipping_gallery

Related tutorial:

“Create a Flipping Awesome 3D Gallery with jQuery Flipping Gallery”

You may also like:

Elegant jQuery slideshow with thumbnails bar – PhotoCradle

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2