jQuery(function($){ 
 
 // Définit mes paramètres
	var settings = { 
		thumbListId: "vignettes", 
		imgViewerId: "visio", 
		activeClass: "active", 
		activeTitle: "Photo en cours de visualisation", 
		loaderTitle: "Chargement en cours", 
		loaderImage: "loader.gif" 
	}; 
 
 // On liste les vignettes dans une variable
	var thumbLinks = $("#"+settings.thumbListId).find("a"), 
		
		firstThumbLink = thumbLinks.eq(0), //On détermine la première vignette
		firstThumbLinkAlt = $("#"+settings.thumbListId).find("img").eq(0), // On détermine la première description
    	
		// On crée une fonction pour gérer la class
		highlight = function(elt){ 
			thumbLinks.removeClass(settings.activeClass); // On enlève la classe de tous les éléments et j'enlève .removeAttr("title") du script original
			elt.addClass(settings.activeClass); // On ajoute la classe active à l'élement passé en fonction et j'enlève  .attr("title",settings.activeTitle)
    	}, 
    	
		// Création d'une fonction loader
		loader = $(document.createElement("img")).attr({ 
      		alt: settings.loaderTitle, 
      		title: settings.loaderTitle, 
      		src: settings.loaderImage 
    	}); 
 
 
 // A la lecture on met en avant la première vignette
	highlight(firstThumbLink); 
 
 
 // On crée une boîte pour afficher la photo en grand
	$("#"+settings.thumbListId).before( 
		$(document.createElement("p")) 
		.attr("id",settings.imgViewerId) 
		.append( 
			$(document.createElement("img")).attr({  // à l'intérieur une image
				alt: "", 
				src: firstThumbLink.attr("href") 
			})
			
		)
		.append($(document.createElement("em")).append(firstThumbLinkAlt.attr('title'))) // une balise em pour contenir la description
		.append($(document.createElement("a")) // Un lien vers la photo zoom
			.attr("href",firstThumbLink.attr('title'))
			.addClass("zoom")
			.append("zoom")
		)
	); 

	var imgViewer = $("#"+settings.imgViewerId), 
		bigPic = imgViewer.children("img"),
		zoomPic = imgViewer.children("a"),
		descPic = imgViewer.children("em")

 
	thumbLinks.click(function(e){ 
		e.preventDefault(); 
		
		
		
		var $this = $(this), 
		targetzoom = $this.attr("title"); //Get Zoom Image URL
		
		var $this = $(this), 
		targetdesc = $this.children("img").attr("title"); //Get Desc 
		
		var $this = $(this), 
		target = $this.attr("href"); //Get Main Image URL
		
		if (bigPic.attr("src") == target) return;
		highlight($this); 
		
		zoomPic
			.attr("href", targetzoom)
		imgViewer.children("em").remove();
		imgViewer.append("<em>"+targetdesc+"</em>");
		
		//imgViewer.html(loader); 
      
	  	bigPic//.load(function(){ 
        //  imgViewer.html($(this).fadeIn(250)); 
        //}) 
        
		.attr("src",target);
		
    }); 
	
	/* This is basic - uses default settings */
	
	$("#visio a").fancybox();
		
 });