Craftyslide, un slideshow jQuery simple et léger

24 juillet 2011
18 177 vues

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

  • Christelle

    Bonjour,
    Je viens d’intégrer ce diaporama, il marche très bien !
    Vu que je suis pas très dév, pour ceux qui rencontraient les mêmes difficultés, petite précision :
    La partie est un inclure dans le header, la liste des images le : $(« #slideshow »).craftyslide({… est dans la balise body.
    Évidemment ) télécharger sur le serveur : http://plugins.jquery.com/node/21310/release?api_version%5B%5D=4693.
    Et là effectivement on peut se dire : « Rien de bien compliqué, non ? »

    ça c’est les solutions qui m’ont permise avec vos conseils, d’intégrer ce diaporama.

    Il subsiste un problème avec IE où l’affichage de la légende ne se fait pas. Pour être précise, je crois que j’ai un conflit de hauteur : l’image du diaporama me parait plus haute et donc, la légende s’affiche en dessous : au delà de la zone définit : elle s’affiche très partiellement.

    Je n’ai pas ce problème sur Firefox, ni sur Safari (comme d’habitude IE se distingue par sa capacité à ne pas comprendre le langage « standard »).

    Si vous avez rencontré ces difficultés ou que la solution à mon problème vous paraît simple !
    Je suis preneuse !

    Merci en tout cas pour la découverte de ce diaporama !

    Christelle

    • Alexandre Aubert

      Bonjour,
      Je souhaiterai savoir comment insérer un slider jquery sur le CMS wmaker.
      Merci d’avance, une calvitie commence à apparaître !!!
      Alexandre

  • Cok

    Bonjour,

    J’ai normalement fait tout ce qui était indiqué, mais le slideshow ne marche pas ..

    J’ai bien mis le lien dans head de ma page html, en respectant le bon chemin de mes dossiers, et j’ai fait pareil pour :

    que j’ai mis dans body de mon html (toujours en suivant le bon chemin).

    ensuite j’ai mis tout ça dans mon body :

    Et pour finir j’ai mis
    $(« #slideshow »).craftyslide();

    dans ma partie body.

    Lorsque j’ouvre ma page html sur internet, il n’apparait qu’ un rectangle blanc avec les bords en dégradés.

    Si quelqu’un pourrait m’aider ?

    Merci

    • http://www.megaptery.com/ Pierrinho

      Envoie le lien de ta page !

      • Cok

        Je n’ai pas encore de site internet, mais je peux t’envoyer le fichier par mail nn ?

        • http://www.megaptery.com/ Pierrinho

          Oui, sur megaptery[at]gmail.com

  • Alexandre Aubert

    Bonjour,
    Je souhaiterai savoir comment insérer un slider jquery sur le CMS wmaker.
    Merci d’avance, une calvitie commence à apparaître !!!
    Alexandre

  • Fabrizio Saccu

    Bonjour
    J’ai testé ce slider, cela fonctionne super.
    Par contre j’aurais une petite question, j’aimerais mettre plusieurs slider comme celui ci sur la même page, j’ai donc fait un avec à la fin un $(« #slideshow2″).craftyslide2(); Résultat les slideshow s’affichent et fonctionnent mais le deuxième s’arrête à la dernière image et ne fait pas de boucle.

    Quelqu’un aurait-il une solution ?

    Merci d’avance

    • Fabrizio Saccu

      En fait c’est bon il faut penser à changer le nom de sa div dans le auto

      function auto() {
      setInterval(function () {
      $slides.filter(« :first-child »).fadeOut(options.fadetime).next(« li »).fadeIn(options.fadetime).end().appendTo(« #slideshow2 ul »);