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.
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 🙂
19 avril 2010
http://application-net.fr/slideshow_jquery.html
Dans le même genre, un slideshow Jquery qui a des transitions avec effets de transparences. 🙂
http://application-net.fr/slideshow_jquery.html
3 mai 2010
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
6 mai 2010
Bonjour Fantoche,
As-tu bien téléchargé le framework jQuery ??
6 mai 2010
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.
24 février 2011
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
8 janvier 2012
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…..
🙁 🙁
19 janvier 2012
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…
19 janvier 2012
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 });
});
19 janvier 2012
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 😉
10 août 2012
Je veux bien croire que je ne suis pas très doué mais j’y arrive toujours pas pour le faire fonctionner ! Un peu d’aide ?
Ma page: http://chateau-vin-champagne.com/test/
10 août 2012
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 lec'est mieux.ou télécharger la version de jQuery correctement.
6 juin 2013
Oui, je bookmark ton site. Je laisse mon premier commentaire sur ce site