jFlip Gallery Demo

A flipping page gallery

Author: Renato Formato.

Common HTML code for the examples

<ul id="g1">
  <li>
    <img src="flower1.jpg" />
  </li>
  <li>
    <img src="flower2.jpg" />
  </li>
  <li>
    <img src="flower3.jpg" />
  </li>
  <li>
    <img src="flower4.jpg" />
  </li>
  <li>
    <img src="flower5.jpg" />
  </li>
  <li>
    <img src="flower6.jpg" />
  </li>  
</ul>

jQuery code

Flip gallery with:

• green background (for images smaller than canvas)
• flipping corners on the bottom
• no image resize
• flip.jflip event binded to show infos

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

jQuery code

Flip gallery with:

• green background (for images smaller than canvas)
• flipping corners on the top
• images bigger than canvas are resized to be completely visible

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

jQuery code

Flip gallery with:

• green background (for images smaller than canvas)
• flipping corners on the top
• all images are adjusted to fill the canvas while keeping aspect ratio

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