jFlip Gallery Demo

A flipping page gallery

Author: Renato Formato.

Common HTML code for the examples

<ul id="g1">

  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201010/20101009/class.noobSlide/img1.jpg" />
  </li>
  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201010/20101009/class.noobSlide/img2.jpg" />
  </li>

  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100825/a.slideshow/docs/img/image_0.jpg" />
  </li>
  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100817/image_gallery/images/lotus.jpg" />
  </li>

  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100822/jReelGallery/images/thumbnap.jpg" />
  </li>
  <li>
    <img src="http://www.htmldrive.net/edit_media/2010/201010/20101009/class.noobSlide/img6.jpg" />
  </li>  

</ul>

jQuery code

Flip gallery with:

$("#g1").jFlip(300,300,{background:"green",cornersTop:false}).
bind("flip.jflip",function(event,index,total){
  $("#l1").html("Image "+(index+1)+" of "+total);
});
Image 1 of 6

jQuery code

Flip gallery with:


$("#g2").jFlip(300,300,{background:"green",cornersTop:true,scale:"fit"});

jQuery code

Flip gallery with:

$("#g3").jFlip(300,300,{background:"green",cornersTop:true,scale:"fill"});
More script and css style : www.htmldrive.net