Benoît Guillaume

J'ai fait un slider personnalisé avec jQuery, voici le code :

html :

   <div id='sliderBook'></div>  

css :

   	#sliderBook > a {
		float:right;
		margin-left:10px;
	}
	
	.bigCouv {
		position:fixed;
		top:0;
		right:0;
		display:none;
		z-index:100;
		max-width:100%;
		max-height:100%;
	}
	a:hover > .bigCouv {
		display:inline;	
	}
	
	#sliderBook .bigCouv {
		top:115px;
	}

javascript :

	//timer 
	var timerRandomBook=$.timer(10000, callRandomBook);   
	   
	//appel du json
	function callRandomBook(timer){
		if(jeton) return;//un seul appel a la fois
		jeton = true;
		$.getJSON("/Books/Ajax/RandomBook.xhtml",resultRandomBook);
	}   
	 
	var maxSlide = 100;// nombre maximum d'élément
	var maxIteration = 50;// boucle maximum
	var lastHeight = 0;// largeur de l'élément fixe
	var jeton = false;// jeton
	
	//résultat du json
	function resultRandomBook(data){
		
		if(lastHeight == 0){//si première appel
			lastHeight = $('#BannierTitle').height();
		}
		
		//construction de l'élément
		content = "<a title='"+data.titre+"' href='"+data.link+"'>";
		content += "	<img alt='"+data.EAN+"' title='"+data.titre+"' src='"+data.Miniature+"'/>";
		content += "	<img class='bigCouv' alt='"+data.EAN+"' title='"+data.titre+"' src='"+data.Couverture+"'/>";
		content += "</a>";
		
		try
		{
			//ajout de l'élément
			$('#sliderBook').append(content);
		}
		catch(err)
		{
			//si erreur on recomence
			jeton = false;
			callRandomBook(0);
			return ;
		}
		
		if($('#BannierTitle').height() > lastHeight){//si déformation
		
			var i = 0;//nombre d'itération
			while($('#BannierTitle').height() > lastHeight && maxSlide > 0 && i < maxIteration){
				++i;
				$('#sliderBook > a:last-child').remove();//on enleve le premier jusqu'a obtenire la hauteur correcte
				maxSlide = $('#sliderBook > a').size();
			}
			$('#sliderBook > a:last-child').remove();//on en enleve un supplémentaire
			maxSlide = $('#sliderBook > a').size();
			
			if(maxSlide < 0) maxSlide = 0; 
			
			size = maxSlide;//reréglage du nombre maximum d'élément
			
		}else{
			size = $('#sliderBook > a').size();//nombre d'élément actuel
			
			$('#sliderBook > a:last-child').hide();//caché le dernier élément
			
			$('#sliderBook > a:last-child').fadeIn('slow');//afficher le dernier élément avec un effet
		}
		
		if(size == maxSlide){//ok
			jeton = false;
			
		}else if(size > maxSlide){//trop long, on enleve le 1er
			removeFirst();
			
		}else if(size < maxSlide){//trop court, on recommence
			jeton = false;
			callRandomBook(0);
		}
		
	}
	function removeFirst(){//on cache le 1eravec un effet
		$('#sliderBook > a:first-child').animate({width:'0'},"slow",afterRemove);
	}
	function afterRemove(){
		$('#sliderBook > a:first-child').remove();//on enleve le 1er
		if($('#sliderBook > a').size() > maxSlide){//si toujours trop long on recommence
			removeFirst();
		}else{//ok
			jeton = false;
		}
	}
	$(window).resize(function(eventObject) {
		maxSlide = 100;//au redimentionnement on reinitialise le nombre maximum d'élément
		callRandomBook(0);//et on fait un appel pour ajout ou enlever des éléments
	});
	$(document).ready(function() {
		callRandomBook(0);//appel au chargement
	});

json utilisé : http://benoit-guillaume.fr/Books/Ajax/RandomBook.xhtml