Une galerie d'images simple avec jQuery - Add

Bonjour,

peut-être cela existe déjà. mais j'ai rajouté la possibilité de mettre plusieurs galeries dans une seule page ! d'après le post : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

pour cela il vous suffit de remplacer :

<ul id="thumbs"> 

par :

 <ul class="galthumbs">

et modifier le .js avec :

jQuery(function($){ 
  
	var uls = document.getElementsByTagName('ul');
    var thumbsul = 0; 
	 
     for(var i=0; i<uls.length; i++)
	 {
          if(uls[i].className == "galthumbs")
		  {								
				thumbsul = thumbsul + 1 ;
               uls[i].id="thumbs"+thumbsul;
		  }
	 }
    
	 for(var i=0; i<thumbsul; i++)
	 { 
	 
  var settings = { 
    thumbListId: "thumbs"+(i+1), 
    imgViewerId: "viewer"+(i+1), 
    activeClass: "active", 
    activeTitle: "Photo en cours de visualisation", 
    loaderTitle: "Chargement en cours", 
    loaderImage: "http://www.sandeedesign.fr/wp-content/themes/Creation%20Theme/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("p")) 
      .attr("id",settings.imgViewerId) 
      .append( 
        $(document.createElement("img")).attr({ 
          alt: "", 
          src: firstThumbLink.attr("href") 
        }) 
      ) 
  );  
 
  thumbLinks.click(function(e){ 
      e.preventDefault(); 
	  var parentid = this.parentNode.parentNode.id;
	  parentid = parentid.replace('thumbs', 'viewer');
	  var imgViewer = $("#"+parentid), bigPic = imgViewer.children("img");
      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); 
    }); 
 }
});

le code pourrai être plus clean mais je sais pas si ça éxiste déjà donc voilà...

++ all
synock[/i][/i]
Modifié par synock13 (28 Sep 2009 - 17:30)