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" />
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" />
<img class="pics" src="thumb-3.jpg" data-glisse-big="big-3.jpg" />

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" title="my awesome picture" src="thumb-1.jpg" data-glisse-big="big-1.jpg" />

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 :

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. Glisse – Plugin jQuery – Faites défiler vos images | LudiBlog | Développement Web et sites | Scoop.it - [...] blog.ludikreation.com - Today, 9:19 AM [...]
  2. DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace | LudiBlog - [...] Glisse – Plugin jQuery – Faites défiler vos images [...]
  3. pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique | LudiBlog - [...] Glisse – Plugin jQuery – Faites défiler vos images [...]
  4. 62 plugins jQuery sur LudiBlog pour 2014 ! | LudiBlog - […] Slider Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle…

Submit a Comment

Votre adresse e-mail ne sera pas publiée.