Glisse – Plugin jQuery – Faites défiler vos images

Posted By Franck Pertegas on 15 Avr 2012 in Articles, CSS, Framework, Javascript, Programmation | 0 comments

Comme promis, un nouvel article dans le blog pour officialiser leurs retours !

Aujourd’hui, on va parler de Glisse.js, un plugin jQuery qui va vous permettre d’ajouter une lightbox à vos sites web. Ce plugin utilise beaucoup de nouveautés CSS3, ce qui fait que ce n’est pas réellement supporté sur tous les navigateurs. mais ce plugin est un bon travail et le rendu est plutôt agréable, découvrez-le, ne serait-ce que pour voir les transitions proposées.

Comment utiliser ce plugin jQuery pour un usage simple et classique :

Insertion de la librairie :

[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22glisse.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Intégration de la feuille de style de base :

[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22stylesheet%22%20href%3D%22glisse.css%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

Ajouter un groupe d’image (relié par l’attribut « rel ») :

[pastacode lang= »markup » manual= »%3Cimg%20class%3D%22pics%22%20src%3D%22thumb-1.jpg%22%20data-glisse-big%3D%22big-1.jpg%22%20%2F%3E%0A%3Cimg%20class%3D%22pics%22%20src%3D%22thumb-2.jpg%22%20data-glisse-big%3D%22big-2.jpg%22%20%2F%3E%0A%3Cimg%20class%3D%22pics%22%20src%3D%22thumb-3.jpg%22%20data-glisse-big%3D%22big-3.jpg%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]
Vous noterez que l’image de grande taille est annoncée via l’attribut « data-glisse-big ».
Si vous souhaitez un titre avec l’affichage de l’image en grand, il faut ajouter un attribut « title », comme ceci :

[pastacode lang= »markup » manual= »%3Cimg%20class%3D%22pics%22%20title%3D%22my%20awesome%20picture%22%20src%3D%22thumb-1.jpg%22%20data-glisse-big%3D%22big-1.jpg%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

Puis l’appel du plugin en javascript :

[pastacode lang= »javascript » manual= »%3Cscript%3E%0A%24(function%20()%20%7B%0A%20%20%20%20%24(‘.pics’).glisse(%7B%0A%20%20%20%20%20%20%20%20changeSpeed%3A%20550%2C%20%0A%20%20%20%20%20%20%20%20speed%3A%20500%2C%0A%20%20%20%20%20%20%20%20effect%3A’bounce’%2C%0A%20%20%20%20%20%20%20%20fullscreen%3A%20true%0A%20%20%20%20%7D)%3B%20%0A%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Et là, vous obtenez votre rendu.

Il existe quelques options et variantes que vous pouvez découvrir sur le site du plugin jQuery Glisse.js

Et pour télécharger le plugin : https://github.com/Victa/glisse.js/zipball/master

Bon code à tous 😉

Articles qui peuvent vous intéresser :

• Retour progressif des articles sur LudiBlog
• Chocolat – plugin jQuery – La visionneuse d’image pratique
• Chocolat – plugin jQuery – La visionneuse d’image pratique
• s3Slider – Plugin jQuery – Un slider simple pour vos sites web
• jCoverflip – Plugin jQuery – Le Coverflow simple et efficace