The jFlip plugin

admin — Fri, 30 Oct 2009 10:52:50 +0000

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.

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:

The plugin finds all the images inside the provided selector and build the flipping book gallery.

$(selector).jFlip(width,height,options)

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