A flipping page gallery
This plugin builds an image gallery made as a book.
You can flip the book pages to view the next or previous image clicking or dragging the animated corners shown when hovering on the gallery area.
By the way, no flash needed!
Author: Renato Formato.
Documentation
The plugin needs jquery 1.2.3. Tested with all jquery compatible browsers.
IE needs a modified version of excanvas I wrote that supports patterns (with a special feature to scale patterns) and rotated linear gradient.
You need to add the following line to the head:
<!--[if IE]><script type="text/javascript" src="excanvasX.js"></script><![endif]-->How to use the plugin
The plugin finds all the images inside the provided selector and build the flipping book gallery.
$(selector).jFlip(width,height,options)Arguments
- width (number - default 300) : width of the canvas in px
- height (number - default 300) : height of the canvas in px
- options (hash) :
- background (string - default "green") : background color when images are smaller than canvas ("red","#FFF","rgba(255,255,255)")
- cornersTop (boolean - default true) : true for top corners, false for bottom ones
- scale (string - default "noresize") :
- "noresize" images are not resized
- "fit" big images are resized to be completely visible
- "fill" all images are resized keeping aspect ratio to fill the canvas
- gradientColors (array of strings - default [’#4F2727’,’#FF8F8F’,’#F00’]) : the colors the corners (dark color, light color, plain color) since version 0.4
- curlSize (number - default 0.1) : the size of the corner as a fraction of height/width (ex: 0.1 sets corner width = jflip width*0.1 and corner height = jflip height*0.1) since version 0.4
Events - since version 0.4
The elements on which jFlip is applied can bind the flip.jflip event, triggered on page flip
The event handler has the following signature:
function(event,current_page,total_pages)Download
Update v0.4 (28/2/2009): New options to change the corners color and size. New event flip.jflip triggered on page flip
jFlip v0.4 (14 kB - great to debug or to read the code)
jFlip v0.4 minified (6kB - for production use)
excanvasX updated with latest additions and bug fixes from google
Update v0.3 (15/6/2008): Fixed a bug with IE and mouse move management.
jFlip v0.3 (13 kB - great to debug or to read the code)
jFlip v0.3 minified (7kB - for production use)
RSS 2.0
Site Map
Private area