Personnalisation de la gallerie d'images suivant le tuto

Bonjour,

J'ai découvert avec grand interet le tutoriel suivant : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Ne répondant pas tout à fait mes besoins, je me suis mis en tête de modifier la partie qui m'interresse. En effet, le tutoriel propose l'affiche d'image mais pas de redirection si on clique sur l'image. J'ai donc modifier un peu le script. J'arrive à avoir une image cliquable mais il me renvoie toujours sur le premier lien que j'ai spécifié.

Je vous donne ici les codes des fichiers :

Fichier HTML :

<div id="folio">
	<ul id="thumbs"> 
	  <li> 
		<a href="big1.jpg" id="www.lol.com"> 
		  <img alt="Vive Alsa" 
			src="small2.jpg"> Vive Alsa
		</a> 
	  </li> 
	  <li> 
		<a href="big.jpg" id="test.fr/test/big.jpg"> 
		  <img alt="toto" 
			src="small.jpg"> Test
		</a> 
	  </li> 
....

Et le javascript :

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "images/loader.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({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      });

  highlight(firstThumbLink);

  $("#"+settings.thumbListId).after(
    $(document.createElement("a"))
      .attr("id",settings.imgViewerId)
	  //.attr("href","http://"+firstThumbLink.attr("id"))
	  .attr("target","_blank")
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
      )
	  //alert(settings.imgViewerId);
  );

  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);
		
		
    });

});

D'avance merci pour vos explications

MonkeyDLuffy

Edit : En parcourant le forum, j'ai trouvé ceci http://forum.alsacreations.com/topic-23-44107-1-Jquery-gallerie-photo-et-image-cliquable-vers-d-autres-pages-du-site.html. Pourriez vous mettre mon post à la suite de ce sujet et supprimer ce topic. Merci
Modifié par MonkeyDLuffy (15 Sep 2009 - 16:10)

Une réponse dans ce fil?

Merci pour cette réponse si rapide. J'ai un peu de mal avec le code. Je suis néofite en javascript et je pense qu'il va falloir me trouver un livre ou un bon gros tutoriel pour tout comprendre.

Encore merci, je go bosser le code fourni (bien que ce ne soit pas tout à fait ce que je souhaite )