JQuery Flipping Gallery, una galería muy atractiva que también utiliza scroll y pasa imágenes.



JQuery Flipping Gallery, una galería muy atractiva que también utiliza scroll y pasa imágenes, este plugin es sin duda uno de los más vistosos entre los plugins de galería, lo interesante de Flipping Gallery es que muestra varias imágenes con dar clic sobre la imagen actual y también lo hace mediante el scroll , de igual forma se puede controlar con los eventos generados mediante botones, por ejemplo: siguiente y atrás .

Demostración: http://www.thepetedesign.com/demos/flipping_gallery_demo.html

La implementación es sencilla, primero necesitamos la colección de imágenes que vamos a estar pasando.

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

Posteriormente, hacer referencia a la colección

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

Entre las opciones que nos podemos encontrar están:

   direction: "forward", // This is will set the flipping direction when the gallery is clicked. Options available are "forward", or "backward". The default value is forward.
    selector: "> a", // This will let you change the default selector which by default, will look for <a> tag and generate the gallery from it. This option accepts normal CSS selectors.
    spacing: 10, // You can set the spacing between each photo in the gallery here. The number represents the pixels between each photos. The default value is 10.
    showMaximum: 15, // This will let you limit the number of photos that will be in the viewport. In case you have a gazillion photos, this is perfect to hide all those photos and limit only a few in the viewport.
    enableScroll: true, // Set this to false if you don't want the plugin to override your scrolling behavior. The default value is true.
    flipDirection: "bottom", // You can now set which direction the picture will flip to. Available options are "left", "right", "top", and "bottom". The default value is bottom.
    autoplay: false // You can set the gallery to autoplay by defining the interval here. This option accepts value in milliseconds. The default value is false.

You may also like...