Galerie d'imag simple avec Jquery - amélioration possible?

Bonjour,

j'ai utilisé votre tutoriel "Une galerie d'images simple avec Jquery", et cela fonctionne fort bien, merci pour m'avoir guidée à travers les méandres du Javascript à la syntaxe si sibylline...!

Je voudrais ajouter une fonction :
j'aimerais que lorsque l'on clique sur l'image "viewer" (la grande) que l'on est en train de visionner, cela fasse afficher l'image suivante (une fonction "next image")

Pouvez vous m'indiquer quels sont les changements à apporter à mon "galery.js", et/ou à mon code sur ma page html?

D'avance merci


Modifié par lisalisa (15 Jul 2009 - 18:16)

Bonjour Lisa,

Ce comportement n'est pas anodin à rajouter au script. Si j'ai un peu de temps toutefois, je t'apporterai une piste.

Voilà, ça devrait plus ou moins faire ce que tu voulais:

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "images/loader.gif",
    bigImageAlt: "Voir l'image suivante"
  };

  var thumbLinks = $("#"+settings.thumbListId).find("a"),
      thumbLinksSize = thumbLinks.size(),
      firstThumbLink = thumbLinks.eq(0),
      lastThumbLink = thumbLinks.eq(thumbLinksSize-1),
      loader = $(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      }),
      highlight = function(elt){
        thumbLinks.removeClass(settings.activeClass).removeAttr("title");
        elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
      };

  highlight(firstThumbLink);

  $("#"+settings.thumbListId).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("a"))
          .attr("href","#")
          .append(
            $(document.createElement("img")).attr({
              alt: settings.bigImageAlt,
              src: firstThumbLink.attr("href")
            })
          )
      )
  );

  var imgViewerLink = $("#"+settings.imgViewerId).children(),
      bigPic = imgViewerLink.children(),
      showLoader = function(){
        imgViewerLink.html(loader);
      },
      loadNewImg = function(){
        imgViewerLink.html($(this).fadeIn(250));
      },
      selectActiveThumb = function(){
        return thumbLinks.filter("." + settings.activeClass);
      };

  thumbLinks.click(function(e){
    e.preventDefault();
    var $this = $(this),
        target = $this.attr("href");
    if (bigPic.attr("src") == target) return;
    highlight($this);
    showLoader();
    bigPic
      .load(loadNewImg)
      .attr("src",target);
  });

  imgViewerLink.click(function(e){
    e.preventDefault();
    if (thumbLinksSize < 2) return;
    if (bigPic.attr("src") == lastThumbLink.attr("href")) var isLast = true;
    highlight(
      (isLast)
        ? firstThumbLink
        : selectActiveThumb().parent().next().children()
    );
    showLoader();
    bigPic
      .load(loadNewImg)
      .attr(
        "src",
        (isLast)
          ? firstThumbLink.attr("href")
          : selectActiveThumb().attr("href")
      );
  });

});

Tu peux voir le résultat en ligne sur cette page de test.
Modifié par Benjamin D.C. (22 Jul 2009 - 09:33)

Bonjour,

Tout d'abord merci pour votre travail mis en ligne.

Je travaille sur votre tutoriel "Une galerie d'images simple avec Jquery", et l'amélioration que vous avez ajouté.
J'essaye de me servir de ces deux tutoriaux pour créer une fonction qui, lorsqu'on clique sur la grande image nous dirige vers une page web .
Ces liens hypertextes seraient renseignés dans les balises <li> et différents pour chaque image.

Mes tentatives sont pour le moment infructueuses et si vous avez le temps, pourriez vous m'indiquer des pistes ou les changements a effectuer ?

Merci d'avance,

Bien cordialement,

Julie

Bonjour et merci pour l'ensemble du travail fourni par alsacreation.
Je travaille sur le tuto gallery.js et je souhaite mettre une légende sous l'image viewer.
Ma connaissance du javascript étant très limitée je n'arrive pas à modifier le code pour obtenir ce résultat.
Vous serait-il possible de me mettre sur la piste ?
Bien cordialement,

Hélène

Bonsoir,

helene06 a écrit :
Vous serait-il possible de me mettre sur la piste ?

Sans problème. La piste est là:

helene06 a écrit :
Ma connaissance du javascript étant très limitée je n'arrive pas à modifier le code pour obtenir ce résultat.

Tu as donc l'explication. La solution: apprendre JavaScript, jQuery.

Un peu de lecture: Quelques notes sur le tutoriel «Une galerie d’images simple avec jQuery».

Bonne continuation.
Modifié par Florent V. (05 Nov 2009 - 23:49)