Labs jQuery – Créer un plugin de slideshow

Flattr this!

Comme promis, voilà le premier tuto de mon cahier d'exercices jQuery. On va voir ensemble comment faire un slideshow avec jQuery.

Ce tutoriel est disponible sur Developpez.com : ici.

Je vous propose de laisser ici un commentaire pour poser vos questions.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.foxmask.info foxmask

    Sympathique article !

    Des questions m’étaient venues mais j’ai (rerere)lu et c’est bon j’en n’ai plus 😉

    c’était notamment sur le bout de code $(‘#slideshow’).slideshow(data); et le fait de passer data, je pensais que du coup data écrasait aussi la paramètre « speed », mais comme data est un tableau nommé contenant « imgs », le doute s’est estompé. (évidement on en déduit que je ne suis pas familier de JSON:)

    Bonne continuation.

  • http://www.mathieurobin.com Mathieu

    Merci du compliment^^

    Ton commentaire m’a fait remarquer que j’avais fait une petite faute dans un de mes exemples, c’est corrigé.
    J’avais mis:
    $(‘#slideshow’).slideshow({speed: 100});
    Au lieu de
    $(‘#slideshow’).slideshow({‘speed’: 100});

    Si t’as des questions sur JSON n’hésite pas. Ceci dit, je pense consacrer de mon temps pour faire un tuto sur JSON.

  • http://www.olivierpons.fr/ Olivier Pons

    Bonjour,

    Petite idée de tutorial en jQuery qui manque cruellement : un arbre sur la gauche avec les dates, et quand on clique sur une date, il charge dynamiquement (merci JSON) des miniatures de photos qui saffichent sur la droite. Quand on clique sur une photo, un zoom.

    Bref ça serait un petit mélange de deux choses qui seraient du ExtJS simplifié, de que vous trouverez sur
    « dev point sencha point com » section « /deploy/dev/examples/view/chooser.html »
    « dev point sencha point com » section « /deploy/dev/examples/view/data-view.html »

    Cordialement,

    Olivier Pons

  • http://www.mathieurobin.com Mathieu

    Un album photo global mais sur lequel on peut aussi filtrer l’affichage par le biais des dates des prises de vue.
    Intéressant. Surtout que d’une, il y a effectivement le croisement de plusieurs techniques jQuery mais il y a aussi un intérêt d’un point de vue techno serveur. Pour rendre l’idée plus attrayante, je pense à un script PHP qui ira lire les tags des photos. Je n’y connais rien à l’heure actuelle, mais je pense que j’ai beaucoup à y gagner et de toute façon rien à y perdre.
    Je vais travailler sur cette idée. Merci beaucoup (encore une fois!)

  • gavri

    Bonjour math,
    Merci pour ton tuto, c’est jusque je l’ai repris plusieurs fois et la rien ne s’affiche.
    Au fait je suis débutant dans la programmation web. J’avais voulu afficher des images se trouvant sur mon poste, donc j’ai remplacé ce code ci:
    var data = {‘imgs’:[
    ‘http://farm1.static.flickr.com/79/244741330_3f6a68924f_z.jpg’,
    ‘http://farm1.static.flickr.com/177/426373909_15671ba709_z.jpg’,
    ‘http://farm5.static.flickr.com/4096/4909713714_736916b723_z.jpg’,
    ‘http://farm5.static.flickr.com/4115/4767003134_c75abfecb5_z.jpg’
    ]};

    Par celui la
    var data = {‘imgs’:[
    ‘images/gavri.png’,
    ‘images/1.JPG’,
    ‘images/2.JPG’,
    ‘images/3.JPG’
    ]};
    Merci pour l’aide.

  • http://www.mathieurobin.com Mathieu

    Salut,
    Tout d’abord, je te suggère d’aller vers la version mise à jour de ce tutoriel, corrigée et améliorée : http://mathieu-robin.developpez.com/tutoriels/javascript/creer-plugin-slideshow-pour-jquery/
    Ensuite, tout dépend d’où sont les images par rapport à ton fichier javascript. Selon ton code, tu dois avoirs cette arborescence là :

    – index.html
    – jquery.slideshow.js
    + images
    — gavri.png
    — 1.JPG
    — 2.JPG
    — 3.JPG

    Si tu as bien ça, vérifie que tu as correctement importé jQuery, en remplaçant ce code :
    $(document).ready(function(){
    $(‘#slideshow’).slideshow({‘speed’: 100});
    });
    par ça :
    $(document).ready(function(){
    alert(« jQuery est correctement installé »);
    });

  • gavri

    Salut,
    Merci pour la réponse, lorsque je remplace par ça:
    $(document).ready(function()
    {alert(« jQuery est correctement installé »);
    });
    Rien ne s’affiche. Juste savoir comment se faire l’importation de jQuery?

  • http://www.mathieurobin.com Mathieu

    Regarde mon premier bloc de code au début de l’article. Je l’ai légèrement mis à jour pour qu’il soit plus facilement utilisable et donc te montrer facilement au passage comment important jQuery.

  • gavri

    Merci bien je le test et je t’informe

Articles liés