jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Home page > Plugins > The jFlip plugin

The jFlip plugin

Tuesday 27 May 2008, by Renato


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)

excanvasX

Demo

view the examples

Reply to this article

37 Forum messages

  • (logo)

    The jFlip plugin

    27 May 2008 16:10, by BS

    Ce nouveau plugin est très attirants.
    Je suis tenté de l’installer sur mon site de photos...
    sauf que la démo plante sur IE6... Aussi...
    Merci de votre aide.

    Reply to this message

    • (logo)
      The jFlip plugin 27 May 2008 18:01, by Renato

      Merci BS,
      c’etait un probleme avec l’initialization des images.

      Corrigé

      Reply to this message

      • (logo)
        The jFlip plugin 29 May 2008 16:19

        Bonjour, idem pour moi avec IE 6.0.2900.2180.xpsp_sp2 sur Windows XP,
        la démo plante quand on veut changer d’image.
        Marche très bien avec Firefox 3 RC1.
        Sous IE7 lorsque l’on pointe notre souris sur un coin, celui-ci disparait puis réapparait.

        Très bon plugin bravo, merci pour ton travail !

        Reply to this message

        • (logo)
          The jFlip plugin 1 June 2008 20:49, by Renato

          Avec IE6 ça marche, j’ai teste beaucoup de fois. Pour IE7 c’était un souci connu, corrige

          Reply to this message

          • (logo)
            The jFlip plugin 2 June 2008 08:57, by Babar

            Yep, IE7 marche bien maintenant, merci !
            J’ai toujours des problèmes pour IE6.
            La démo se lance bien mais au moment de tourner une image IE fait une erreur fatale et se ferme. Sur quel version de IE test tu ton plugin ?
            J’ai déjà eu des plantages de IE6 Windows XP alors que sous IE6 Windows 2000 ça ne plantait pas. Avec la bibliothèque "IE7" de dean edwards notamment (http://dean.edwards.name).
            De plus, si tu utilises multipleIEs la version d’IE6 n’est pas vraiment la même que la version par défaut d’IE6 sur Windows XP.

            Bon courage ... and be Rock n’Roll !

            Reply to this message

      • (logo)
        The jFlip plugin 12 July 2010 00:43

        Bonjour,ce plugin est très utile !
        Je voudrais savoir si on peut changer les images avec different texts (divs)
        ?
        Merci d’avance.

        Reply to this message

    • (logo)
      The jFlip plugin 2 June 2008 13:40

      Problèmes sousIE6 : bien fait !
      Désolé, ma boîte n’a pas encore fait le switch à un navigateur non-obsolète, je souffre donc quotidiennement des bugs IE6 (qu’on n’a plus sous IE7, jamais eu sous FF2+, Opera 9+...).
      Je milite donc fermement contre IE6, et contre tous les contournement usine à gaz qu’on doit faire pour ce soft obsolète

      Reply to this message

  • (logo)

    The jFlip plugin

    11 June 2008 15:05, by dibla

    Bonjour,

    C’est vrai que je trouve ce plugin nickel je l’ai d’ailleurs utlisiser pour ma gallerie mais voila toujours se probleme sur IE ou pourais je trouver le fichier excanvasX.js corriger

    Jai essaier de telecharger celui depuis download et celui de Documentaton cela ne fonctionne pas.

    Merci d’avance pour votre aide

    Reply to this message

    • (logo)
      The jFlip plugin 12 June 2008 10:39, by Renato

      Le fichier excanvasX tu ne peux pas le trouver, parce que c’est une version modifie par moi de excanvas.

      Peux tu donner plus d’informations sur ton erreur ?

      Reply to this message

      • (logo)
        The jFlip plugin 13 June 2008 12:39, by dibla

        Sur IE il y aucune photo qui s’affiche
        mais avec ff tous fonctinne tres bien

        site www.sweetmelody.ch

        Merci d’avance pour ton aide

        Reply to this message

        • (logo)
          The jFlip plugin 15 June 2008 12:15, by Renato

          Merci dibla,
          j’ai mise a jour jFlip avec la version 0.3 qui corrige l’erreur que tu as signale.

          Essaye avec la dernier version.

          Reply to this message

          • (logo)
            The jFlip plugin 15 June 2008 14:27

            Merci, pour les modifications

            Voila la première image apparait mais il y a encore un petit bug pour le changement des images.

            pour voir le resultat

            http://www.sweetmelody.ch/index.php...

            je te remercie encore pour le modification que tu as faite

            amicalement
            dibla

            Reply to this message

            • (logo)
              The jFlip plugin 16 June 2008 10:24

              Excuse moi,

              Le script fonctionne bien maintenant,
              mais quand je change change de pages en cliquant sur un nouveau lien et que je reviens sur le lien photo cela ne fonctionne plus.

              Est-ce que ce se problème peux venir a cause de la mise en cache.

              Merci

              Amicalement

              dibla

              Reply to this message

              • (logo)
                The jFlip plugin 16 June 2008 15:01

                Renato,

                Je voulais te dire un grand merci pour le travail de modification que tu as effectuer.

                En effet si le navigateur vas reprendre la pge dans le cache le script a quelque souci quand on veux cliquer pour changer de d’image ou meme des fois il n’affiche rien.

                Pour parer à ce probleme j’ai simplement rajouter une meta donnée en donnant un temps d’expiration = -1

                META HTTP-EQUIV="Expires" CONTENT="-1"

                Cela fonctionne bien.

                Mais je suis pas sur que ce soit la meilleur des solutions mais au moins cela fonctionne

                Encore merci Renato

                Amicalement

                Dibla

                Reply to this message

  • (logo)

    The jFlip plugin

    17 June 2008 01:17, by helen

    Is there any function call which can support displaying some meta data information besides the image for this jflip plug in?
    For example, I would like it to display the page number, and image download link.

    Thanks!

    Helen

    Reply to this message

    • (logo)
      The jFlip plugin 17 June 2008 22:33

      I agree, perhaps you could use the title element or expose a method for adding text of some sort?

      Great plugin!

      Reply to this message

      • (logo)
        The jFlip plugin 18 June 2008 11:02, by Renato

        There’s still no function to display title or page information.

        Expect an update in the near future that implements this sort of things.

        Reply to this message

  • (logo)

    The jFlip plugin

    19 August 2008 02:09, by gtraxx

    très joli et sympathique.
    Quand je dit a mes collègues qui cale sur scriptaculous que jquery sa rox il devrai me prendre plus au sérieux :p

    Reply to this message

  • (logo)

    The jFlip plugin

    25 February 2009 17:48, by PoongalOO

    Bonjour à tous,
    Hi,

    Juste un message pour signaler à Renato que j’ai adapté son travail en plugin SPIP2.
    Just a message to Renato, I adapted his work for SPIP2.

    J’ai encore du travail pour que ce soit nickel mais ça fonctionne.
    I have not finished yet but it works.

    J’ai écrit un article sur spip-contrib ici : http://www.spip-contrib.net/jFlipBook avec le lien pour le téléchargement.
    I wrote an article in spip-contrib here : http://www.spip-contrib.net/jFlipBook with a link for downloading.

    Merci pour ce beau travail,
    Thank you for this great job,

    See online : Plugin JflipBook pour SPIP2

    Reply to this message

  • (logo)

    The jFlip plugin

    5 March 2009 01:31, by KathyW

    Love the page flip. I would liked to be able to mix it with other transitions - fades, wipes etc, and to fire on page ready instead of mouse event. Is this possible please?

    Reply to this message

    • (logo)
      The jFlip plugin 6 March 2009 14:19, by Renato

      Sorry, but it’s not possible to mix transitions, neither to fire the flip by code.

      I think firing the flip by code is a nice feature . I’ll look into it as soon as possible.

      Thanks

      Reply to this message

  • (logo)

    format de sortie des images

    5 March 2009 09:09, by pi r

    Bonjour et merci pour ce bô livre.
    le format png n’est il pas très lourd,
    peut on sortir en jpg? merci

    Reply to this message

  • (logo)

    The jFlip plugin

    24 June 2009 10:08, by Heirem

    Bonjour,

    Cela fait une petite heure que je cherche un plugin permettant de feuilleter un contenu sans passer par du flash ! Bravo c’est vraiment très bien fait.

    Sur FF, Opera et Safari c’est du nickel. Cependant sur IE, toutes versions confondues les images apparaissent en liste dans leur format d’origine et une erreur ’G_vmlCanvasManager est indéfini’ est signalé.

    Ma question : est-il possible à ton avis d’envisager les mêmes fonctions mais pour un contenu autre que des images ? Feuilleter un calendrier js ou html par exemple ...

    Cordialement
    Heirem

    See online : ns pa

    Reply to this message

  • (logo)

    Triggering page flip with button/hyperlink

    10 September 2009 02:21, by Ash

    Is it possible to perform the page flip when a particular element (for example: a hyperlink or a button) is clicked?

    Can we trigger the page flip depending on whether or not a particular element is clicked?

    I hope I made it clear as to what it is that I need.

    Simply put, I want the page flip to be performed when the user clicks a button or a hyperlink and not the image itself.

    Please let me know your thoughts.

    Thanks.

    Reply to this message

  • (logo)

    The jFlip plugin

    4 January 2010 08:35, by meal

    Hi, thank you for this plugin.

    I was wondering if it is possible to use it at 100% browser width and height? If so, how would I go about doing this?

    .m

    Reply to this message

  • (logo)

    The jFlip plugin

    18 January 2010 11:36, by yvan

    Bonjour,

    Merci, c’est très sympa comme plugin.
    S’il y avait en plus le n° de la page, cela serait nickel (suggestion).
    Cordialement

    Y.Roussel

    Reply to this message

  • (logo)

    Problème IE6 et 8

    23 February 2010 16:59

    Merci pour ce super plugin.

    Je testait avec browser sandbox sr ie6, ie7 et ie8 et j’ai rencontré des problèmes sur IE6 et 8. Dans Ie 6 rien n’apparait pour les images et dans IE8 il y a un flick encombrant sur la partie replié du papier (section en overlay). Ce flick fait revenir au point de départ le replie de la page et encombre le déroulement normal du flip.

    Suis-je tout seul à avoir rencontré ce problème?

    ps: je sais que ie6 c’est de la merde mais il y en a encore qui l’utilise... ughhh.

    Reply to this message

    • (logo)
      Problème IE6 et 8 21 April 2010 23:53, by Dave Bates

      Thanks for your cool plugin, but it doesn’t work for me in ie6 either. No images are drawn. This is when viewing the gallery demo as well as in my own site.

      Reply to this message

      • (logo)
        Problème IE6 et 8 22 April 2010 00:01, by Dave Bates

        Actually after more testing it does on some computers and not on others. I am not sure how that can be, but yet it is the case.

        Reply to this message

  • (logo)

    Corner

    25 February 2010 11:04, by dan-

    Hi Renato,
    I’m an italian webprogrammer and when I see your script I’ve thought a new release.
    It’s possible to de-activate some corner?
    E.g: How can I do if I want only the right corner?

    This is useful if I want to make a jquery pageflip like the flash one (at pageflip.hu).
    Free book, flippable and jquery style!

    Thanks for reply,
    -dan- [daniele.barbaglia@gmail.com]

    Reply to this message

  • (logo)

    problème d’intégration dans un site

    23 April 2010 00:32, by IzaneFG

    Super Plugin. Je l’ai mi en ligne mais il ne fonctionne pas sous IE (toutes version sauf IE 9) on peu le voir ici -> http://www.veroniqueebolo.com/en/
    Lorsqu’on passe sur la page. Un message d’erreur s’affiche et là plus rien.
    http://www.veroniqueebolo.com/en/in...

    Là je suis coincé :(

    Merci pour le plugin

    See online : problème d’intégration dans un site

    Reply to this message

  • (logo)

    The jFlip plugin

    28 May 2010 11:20, by Karine

    Bonjour et bravo pour ce plugin très utile !
    Je voudrais savoir si l’on peut déclencher un effet sonore sur le "flip".
    Merci d’avance.

    Reply to this message

  • (logo)

    aspect ratio bug?

    20 October 2010 13:51

    Hello

    Thank you for your plugin, there is one serious issue tough. When i use images that are higher then its width. I get:

    uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.createPattern]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file://///Hvdh_storage/transport/Paul/zorg%20dm/jquery.jflip-0.4.js :: anonymous :: line 45" data: no]

    Your demo works because the images are more wide then its height.

    Could someone rectify this?

    Greetings

    Paul

    Reply to this message

  • (logo)

    The jFlip plugin

    31 December 2010 20:34

    IE is lagging backwards ... doesn’t support this. The workaround works though ...
    However even workaround doesn’t work in IE 9

    Reply to this message

  • (logo)

    The jFlip plugin

    6 February 2011 01:38, by Fidoboy

    It doesn’t work with IE8, there is any fix for this?

    Reply to this message


Latest comments