$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumbgauche li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '2px', 
			marginLeft: '2px', 
			top: '-10%', 
			left: '-10%', 
			width: '50px', 
			height: '50px',
			padding: '20px' 
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '78px', 
			height: '78px', 
			padding: '1px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumbgauche li a").click(function() { // tu n'es pas obligé d'utiliser le "a" mais le div et tu change le cursueur dans la CSS (un curseur css peut etre remplacé par une image que tu as créé...)
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		
			
		var maintexte = $(this).attr("maxime"); //Attribut la varaible MAIN TEXTE qui as comme valeur "maxime"
			 $("#texte1").html(maintexte); // variable de bertrand qui recupere la balise MAXIME et le colle dans le div ... chaques balises Maxime a le texte de chaque images chargées...
			 
			 
		return false;		
	});

	
	// lien d'image  web//
	

	
	
	//Swap Image on Click
	$("ul.thumbgauche li a").click(function() { // tu n'es pas obligé d'utiliser le "a" mais le div et tu change le cursueur dans la CSS (un curseur css peut etre remplacé par une image que tu as créé...)
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		
			
		var maintexte = $(this).attr("titre"); //Attribut la varaible MAIN TEXTE qui as comme valeur "maxime"
			 $("#title").html(maintexte); // variable de bertrand qui recupere la balise MAXIME et le colle dans le div ... chaques balises Maxime a le texte de chaque images chargées...
			 
			 
		return false;		
	});

	
	$("ul.thumbdroite li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-70px', 
			marginLeft: '-70px', 
			top: '50%', 
			left: '50%', 
			width: '104px', 
			height: '104px',
			padding: '20px' 
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '78px', 
			height: '78px', 
			padding: '1px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumbdroite li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		
		var maintexte = $(this).attr("maxime"); //Find Image Name
			 $("#texte1").html(maintexte);
		return false;		
	});
	
	
		$("ul.thumbdroite li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		
		var maintexte = $(this).attr("titre"); //Find Image Name
			 $("#title").html(maintexte);
		return false;		
	});
});