jqFancyTransitions – Plugin jQuery – Belles transitions

Me revoilà avec une découverte jQuery, un autre plugin lié à la manipulation d’images. Cette fois, un slide show avec des transitions d’images originales, j’ai beaucoup apprécié les effets.

transition-jquery

Vous allez pouvoir avoir sur votre site une galerie d’images avec diverses transitions.

L’utilisation s’effectue ainsi :

On va chercher nos librairies jquery + jqFancyTransitions

[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22js%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2FjqFancyTransitions.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

On crée notre bloc, qui contiendra notre galerie d’images

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22slideshowHolder%22%3E%3Cimg%20src%3D%22img1.jpg%22%20alt%3D%22img1%22%20%2F%3E%0A%3Cimg%20src%3D%22img2.jpg%22%20alt%3D%22img2%22%20%2F%3E%0A%3Cimg%20src%3D%22img3.jpg%22%20alt%3D%22img3%22%20%2F%3E%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Entre les balises head, on insère le javascript qui réalisera le slideshow avec nos éléments

[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(‘%23slideshowHolder’).jqFancyTransitions(%7B%20width%3A%20400%2C%20height%3A%20300%20%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Et le tour est joué !

A savoir qu’il y a plusieurs options disponibles :

[pastacode lang= »javascript » manual= »effect%3A%20 »%2C%20%2F%2F%20wave%2C%20zipper%2C%20curtain%0Awidth%3A%20500%2C%20%2F%2F%20width%20of%20panel%0Aheight%3A%20332%2C%20%2F%2F%20height%20of%20panel%0Astrips%3A%2020%2C%20%2F%2F%20number%20of%20strips%0Adelay%3A%205000%2C%20%2F%2F%20delay%20between%20images%20in%20ms%0AstripDelay%3A%2050%2C%20%2F%2F%20delay%20beetwen%20strips%20in%20ms%0AtitleOpacity%3A%200.7%2C%20%2F%2F%20opacity%20of%20title%0AtitleSpeed%3A%201000%2C%20%2F%2F%20speed%20of%20title%20appereance%20in%20ms%0Aposition%3A%20’alternate’%2C%20%2F%2F%20top%2C%20bottom%2C%20alternate%2C%20curtain%0Adirection%3A%20’fountainAlternate’%2C%20%2F%2F%20left%2C%20right%2C%20alternate%2C%20random%2C%20fountain%2C%20fountainAlternate%0Anavigation%3A%20false%20%2F%2F%20prev%20and%20next%20navigation%20buttons%0Alinks%3A%20false%20%2F%2F%20show%20images%20as%20links » message= » » highlight= » » provider= »manual »/]

Et depuis la version 1.7, vous pouvez ajouter des urls aux images :

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22slideshowHolder%22%3E%0A%0A%3Cimg%20src%3D%22img1.jpg%22%20alt%3D%22img1%22%20%2F%3E%0A%0A%3Cimg%20src%3D%22img2.jpg%22%20alt%3D%22img2%22%20%2F%3E%0A%0A%3Cimg%20src%3D%22img3.jpg%22%20alt%3D%22img3%22%20%2F%3E%0A%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

 

Pour plus d’informations et pour une démo : le site du plugin jqFancyTransitions

Bon code 🙂

Author: Franck Pertegas

Share This Post On

12 Comments

  1. Bonjour,

    Mince, celui-ci m’interesse bien, j’ai suivis tout le codage ici, mais je reste avec mes trois photos les unes a coté des autres. Comprends pas !!
    dsl

    Post a Reply
  2. Oui, j’ai tout vérifier, les appels au librairies Jquery, au script jqFancyTransitions, j’ai resaisis tout les codes et rien, je vois mes images les unes à coté des autres. Dommage, car les effets sont très bien.

    Post a Reply
  3. bon ben moi ca ne fonctionne pas

    meme type de pb que fantoche

    je suis à la recherche de mon erreur … si qq’un trouve je prends !

    merci par avance

    sebastien

    Post a Reply
  4. Salut, ça ne fonctionne pas non plus chez moi !!! je ne comprend pas tout est bien insérer la bibliothèque jquery v1.7 le code les options la bibliothèque jqFancyTransitions…..
    🙁 🙁

    Post a Reply
  5. Sur le site du plugin, ils utilisent une version 1.4.2 de jQuery, certainement que le soucis vient de là. A l’occasion, je tâcherai de regarder ça de plus près…

    Post a Reply
  6. Bonjour, en fait j’ai trouver le problème, il manque juste le $(document).ready au début comme ceci:

    $(document).ready(function(){
    $(‘#slideshowHolder’).jqFancyTransitions({ width: 400, height: 300 });
    });

    Post a Reply
  7. oui, en effet merci wajih, j’ai bien entendu copié bêtement le code proposé par le site, parce que pour moi ça coule de source, mais bien évidemment, c’est comme tout plugin jQuery, l’idéal est d’y insérer dans le $(document).ready 😉

    Encore merci pour ton retour 😉

    Post a Reply
  8. bonjour G.,
    Par contre, moi, je veux bien être sympa et donner un coup de main, mais un petit bonjour, merci, au revoir, serait bienvenu.

    Dans un premier temps, il faudrait charger correctement jQuery. le fichier est incorrect sur ton site.

    / *! jQuery v@1.8.0 jquery.com | jquery.org / licence * /

    modifier par :
    /*! jQuery v@1.8.0 jquery.com | jquery.org / licence */

    Ensuite mettre les balises dans le c'est mieux.

    ou télécharger la version de jQuery correctement.

    Post a Reply
  9. Oui, je bookmark ton site. Je laisse mon premier commentaire sur ce site

    Post a Reply

Trackbacks/Pingbacks

  1. Tweets that mention jqFancyTransitions – Plugin jQuery – Belles transitions | LudiBlog -- Topsy.com - [...] This post was mentioned on Twitter by Planete jQuery FR, Ludik Te@m. Ludik Te@m said: jqFancyTransitions – Plugin jQuery…
  2. YoxView – Plugin jQuery – Une lightbox améliorée | LudiBlog - [...] jqFancyTransitions – Plugin jQuery – Belles transitions [...]
  3. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Je vous en parle ici Un slide show avec des transitions d’images originales. Le [...]
  4. 35 plugins jQuery rien que pour vos sites web ! | LudiBlog - [...] Je vous en parle ici Un slide show avec des transitions d’images originales. Le [...]
  5. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Un slide show avec des transitions d’images originales. Le [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *