Glisse – Plugin jQuery – Faites défiler vos images

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.

glisse-js-plugin-jquery-images

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

Insertion de la librairie :

<script src="glisse.js"></script>

Intégration de la feuille de style de base :

<link rel="stylesheet" href="glisse.css" />

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

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1"/>
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1"/>
<img class="pics" src="thumb-3.jpg" data-glisse-big="big-3.jpg" rel="group1"/>

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 :

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1" title="my awesome picture"/>

Puis l’appel du plugin en javascript :

<script>
$(function () {
    $('.pics').glisse({
        changeSpeed: 550,
        speed: 500,
        effect:'bounce',
        fullscreen: true
    });
});
</script>

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 :

No Responses

Leave a Reply

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


*