Une galerie d'images simple avec jQuery

Bonjour,

J'ai trouvé ce tutoriel très intéressant et je m'en suis servi pour un de mes projets.
Cela fonctionne très bien mais pour des raisons esthétiques, je voudrai y ajouter quelques améliorations, et là j'ai besoin de votre aide.

Ce que j'ai changé :

$("#thumbs").[b]before[/b]( 
    $(document.createElement("[b]div[/b]")) 
      .attr("id","viewer") 
  );

J'ai préféré insérer la visualisation dans une div et au-dessus des miniatures.

Les images que je visualise ont toutes la même largeur mais pas la même hauteur, donc j'ai supprimé "height" pour le "#viewer".

Que faudrait-il que j'ajoute au js pour pouvoir animer la transition de taille (hauteur) de ma div "viewer" à chaque changement d'image et affichage du loader ?

Code js actuel :

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "/img/loading_viewer.gif"
  };

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

  highlight(firstThumbLink);

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

  var imgViewer = $("#"+settings.imgViewerId),
      bigPic = imgViewer.children("img");

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
          target = $this.attr("href");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
        })
        .attr("src",target);
    });

});

Merci d'avance de vos réponses !!

Salut,

La partie de code à modifier est la suivante :

function(){ 
    imgViewer.html($(this).fadeIn(250)); 
}

Actuellement, cette fonction se contente d'ajouter l'image au sein du conteneur "imgViewer" en la faisant apparaître progressivement, le this représentant l'image. Aussi, il te faut :

- récupérer la hauteur de l'image à insérer à l'aide de la méthode css(),

- agrandir ou rétrécir le conteneur "imgViewer" en fonction de la hauteur déterminée à l'aide de la méthode animate(),

- à la fin de l'animation, c'est à dire en tant que fonction de retour lors de l'événément "complete" de la méthode animate(), insérer l'image dans le conteneur "imgViewer" via la méthode html() en la faisant apparaître progressivement à l'aide de la méthode fadeIn()

Bonsoir,

Merci pour ta réponse, ça m'aiguille bien!
Je vais tester tout ça ce week-end. Quand j'aurai fait un truc qui marche je reviendrai poster la solution.

Bonjour,

J'ai un souci un peu différent. En fait, également pour des soucis esthétiques, je cherche à inclure la galerie dans un tableau. J'ai un td avec id left dans lequel j'aimerais mettre les miniatures, et un td right où je voudrais voir apparaître les photos grand format.
Etant nul en programmation, je ne vois pas trop par où commencer ... Je suppose que je dois placer le imgViewer dans mon right, mais je ne vois vraiment pas comment m'y prendre ...

Bonjour,
Merci pour ce script. Cependant 2 question/problème :
- j'ai placé le viewer sur la gauche des vignettes, or étant en position absolute comment fixer cette position quelque soit la résolution écran ?
- je voudrais ajouter sous le viewer généré par le dom un "caption" récupérant le nom de l'image... que faut-il ajouter au script js dans ce cas ?
Merci de vos réponses éventuelles, voire même juste de pistes, surtout pour la 2ème question.
Cordialement