Craftyslide, un slideshow jQuery simple et léger

24 juillet 2011

Les plugins jQuery qui génèrent un diaporama sont nombreux, mais ils sont souvent lourds à charger du fait des nombreuses options qui ne sont pas forcément utilisées. Avec Craftyslide, on va à l’essentiel : un slideshow simple, léger et efficace !

Pourquoi Craftyslide ?

Craftyslide est né d’une raison assez originale. En effet, l’auteur en avait marre de devoir utiliser des plugins trop lourds pour ses besoins : un code superflu et parfois non-sémantique, beaucoup d’options peu utilisées, des transitions de plus en plus complexes…


En s’inspirant du plugin jQuery Slides qui a été conçu avec le même objectif, Craftyslide permet de mettre en place un diaporama simple, avec seulement cinq options de base. L’effet de transition est unique (fade) et la lecture automatique s’active seulement si vous n’utilisez pas de pagination.

Utilisation de Craftyslide

Utiliser Craftyslide sur votre site est facile ! Comme pour n’importe quel slider jQuery, commencez par inclure le framework jQuery, le plugin Craftyslide et sa feuille de style.

<!-- CSS -->
<link rel="stylesheet" href="css/craftyslide.css" />

<!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>

Puis définissez la structure HTML du slideshow. Il suffit de créer une « div » qui contient une liste à puces, une liste d’images pour être plus précis. Donnez à vos images un titre via la balise « tilte » si vous voulez voir apparaitre des légendes.

<div id="slideshow">
  <ul>
    <li>
      <img src="image1.jpg" title="Lorem ipsum dolor sit amet" />
    </li>
    <li>
      <img src="image2.jpg" title="Lorem ipsum dolor sit amet" />
    </li>
    <li>           
      <img src="image3.jpg" title="Lorem ipsum dolor sit amet" />
    </li>	                         
  </ul>
</div>

Et pour une initialisation basique du plugin :

  $("#slideshow").craftyslide();

C’est fini. Votre diaporama est en place. Rien de bien compliqué, non ?

Quelques options

Vous avez à disposition cinq options de base pour personnaliser au mieux votre diaporama :

  • width : entier qui définit la largeur du diaporama (en pixel)
  • height : entier qui définit la hauteur du diaporama (en pixel)
  • pagination : booléen qui définit l’affichage de la pagination ou non (« true » ou « false »)
  • fadetime : entier qui définit la vitesse d’animation entre deux diapositives (en ms)
  • delay : entier qui définit la durée entre deux transitions (en ms)

Pour utiliser les options, on procède de la manière suivante :

$("#slideshow").craftyslide({
  'width': 640,
  'height': 400,
  'pagination': false,
  'fadetime': 500,
  'delay': 2500
});

Vous cherchez un plugin jQuery pour mettre en place un slideshow simple et léger sans vous embêter et qui réponde à vos besoins ? Craftyslide est fait pour vous !

Requis : jQuery
Démonstration : http://projects.craftedpixelz.co.uk/craftyslide/
Licence : MIT

Commentaires