Slideshow jQuery -

{ Slideshow jquery }

Introduction

Slideshow jQuery

Le slideshow est une animation qui est fréquemment utilisée, et pour cause c'est un excellent moyen d'afficher beaucoup d'informations dans une même balise, d'avoir un effet dynamique sur ses pages ainsi qu'une mise en avant assurée des éléments placés dans le slideshow.

Les avantages à proprement dit sont :

Gain de place

Effets visuels agréables

Dynamise du site augmenté

Permet d'afficher des éléments HTML (pas seulement des images)

Pour vous convaincre des avantages du Slideshow, je vous suggère de découvrir une démonstration en cliquant sur le lien ci-dessous.

Téléchargement -->

Placement des fichiers

Décompressez l'archive à la racine du site et placez-y les dossiers tels qu'il sont dans l'archive. Si vous avez déjà des dossiers se nommant comme ceux de l'archive, rajoutez simplement les fichiers qui s'y trouvent dans votre arborescence existante.

La partie html

Chaque balise de slide est composée d'une première balise de classe slide contenant un lien qui lui-même contient l'image du slideshow (bien entendu vous n'êtes pas obligé de mettre de lien sur votre slideshow (bien que cela soit déconseillé car il y a fort à parié que vos visiteurs essaieront de cliquer dessus. ;-)

<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
	
      <div class="slide">
        <a href="http://www.galloway-folk.ch" target="_blank" title="Galloway-Folk">
<img src="images/galloway.jpg" alt="Galloway-Folk" width="600" height="430" title="Galloway-Folk"  />
</a> 
</div>

        <div class="slide">
        <a href="http://www.sirius-lab.ch//cv/" target="_blank" title="CV Interactif">
<img src="images/cv.jpg" alt="CV Interactif" width="600" height="430" title="CV Interactif"/>
</a>
   </div>

        <div class="slide">
        <a href="http://www.secretdefemmes.ch" target="_blank" title="Secret de femmes.ch">
<img src="images/secretdefemmes.png" alt="Secret de femmes.ch" width="600" height="430" title="Secret de femmes.ch"/>
</a>
   </div>

        <div class="slide">
        <a href="http://www.fribourg-attitude.ch" target="_blank" title="Fribourg-attitude">
<img src="images/fribourg-attitude.png" alt="Fribourg-attitude" width="600" height="430" title="Fribourg-attitude"/>
</a>
  </div>

    </div>
  </div>
  <!-- Slideshow HTML -->

Le css

Les styles pour mettre en forme notre slideshow

@charset &amp;quot;utf-8&amp;quot;;
/* CSS Document */

#slideshow		{
width:697px;
height:450px;
position:relative;
margin:20px auto;
border: 1px solid #BDBDBD;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 25px 0;
}

#slideshow #slidesContainer	{
width:640px;
height:450px;
overflow:auto;
position:relative;
margin:0 50px;
}

#slideshow #slidesContainer .slide		{
width:910px;height:450px;margin-left:auto;margin-right:auto;
}

.control		{
display:block;width:39px;height:450px;text-indent:-10000px;position:absolute;cursor:pointer;
}

#navDiapo	{
display:block;width:32px;height:32px;position:absolute;right:325px;bottom: 0px;cursor:pointer;
}

#leftControl	{
top:15px;left:0;background:transparent url('../images/control_left.png') no-repeat center center;
}

#rightControl	{
top:15px;right:0;background:transparent url('../images/control_right.png') no-repeat center center;
}

img, a	{
border: none;
}

Appels des fichiers javascript

Copiez-collez le code ci-dessous entres les balises <head> et </head> de votre page

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

	$(document).ready(function(){
		//Configuration
		var retour = true;
		var tempsTransition = 1000;
		var affichePlayPause = false;
		var lectureAutomatique = true;
		var tempsAttente = 4500;

		var icones = new Array();
		icones['play'] = 'images/play_slider.png';
		icones['pause'] = 'images/pause_slider.png'; 

		var currentPosition = 0;
		var slideWidth = 640;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		var interval;
		var lectureEnCours = false;
		
		// Supprime la scrollbar en JS
		$('#slidesContainer').css('overflow', 'hidden');

		// Attribue  #slideInner  à toutes les div .slide
		slides.wrapAll('<div id="slideInner"></div>')

		// Float left to display horizontally, readjust .slides width
		.css({
			'float' : 'left',
			'width' : slideWidth
		});
		
		// Longueur de #slideInner égale au total de la longueur de tous les slides
		$('#slideInner').css('width', slideWidth * numberOfSlides);
		// Insert controls in the DOM
		$('#slideshow').prepend('<span class="control" id="leftControl">Précédent</span>').append('<span class="control" id="rightControl">Suivant</span>');

		// Hide left arrow control on first load
		manageControls(currentPosition); //Crée un écouteur d'évènement de type clic sur les classes .control
		$('.control').bind('click', function(){

			// Determine la nouvelle position
			currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

			if(currentPosition == numberOfSlides && retour == false ){
				currentPosition--;
				pause();
			}

			// Cache ou montre les controles
			manageControls(currentPosition);

			// Fais bouger le slide
			$('#slideInner').animate({
			'marginLeft' : slideWidth*(-currentPosition)
			},tempsTransition);
		}); 

		// manageControls: Cache ou montre les flêches de controle en fonction de la position courante
		function manageControls(position){

			// Cache la fleche "précédent" si on est sur le premier slide
			if(position==0){ 
				$('#leftControl').hide() 
			} else{ 
				$('#leftControl').show() 
			}

			// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
			if(position==numberOfSlides-1 && retour == false){
				$('#rightControl').hide();
			} else {
				$('#rightControl').show();
			}
			
			if(position == numberOfSlides && retour == true){
				currentPosition = 0;
				$('#leftControl').hide();
			}
		}
		
		function suivant(){
			$('#rightControl').click();
		}
			
		function start() {
			lectureEnCours = true;
			interval = setInterval(suivant, tempsAttente );
		}
			
		function pause() {
			lectureEnCours = false;
			clearInterval(interval);
		}

		//Si le diapo est activé 
		if(lectureAutomatique == true){
			start();
		}
		
		if(affichePlayPause == true){
			$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
			if(lectureAutomatique == true){
				$('#navDiapo').attr('src',icones['pause']);
			}else{
				$('#navDiapo').attr('src',icones['play']); 
			}
			$('#navDiapo').bind('click', function(){
				if(lectureEnCours == true){
					$(this).attr('src',icones['play']);
					pause();
				} else{
					$(this).attr('src',icones['pause']);
					start();
				}
			});
		} 
	});
</script>

Changer le contenu des slides

Voilà votre slideshow est installé, mais il vous reste encore à insérer le contenu que vous souhaitez voir défiler dans le slideshow, pour cela, rien de bien compliqué, on va juste modifier ce qui se trouve à l'intérieur de la balise div comportant la classe slide. Je vous ai rappeler le bout de code HTML qui nous intéresse au cas vous ne cerniez pas de quelle partie il s'agit.

<div class="slide">Ajouter votre contenu ici</div>

Configuration du slideshow

Vous aurez peut-être remarqué qu'au début du script cité à l'étape 5 se trouve plusieurs variables que vous pouvez modifier pour configurer les paramètres de votre slideshow. Ci-dessous quelques explications concernant ces variables.

var retour = true;					// si true le slideshow tourne en boucle si false il s'arrêtera au dernier slide
var tempsTransition = 1000;			//indique le temps de transition entre les slides (en ms)
var affichePlayPause = false;		//afficher ou non le bouton play/pause sur le slideshow
var lectureAutomatique = true;		//lecture automatique ou non
var tempsAttente = 4500;			//durée pendant laquelle chaque slide va rester affiché
var icones = new Array();
icones['play'] = 'images/play_slider.png';
icones['pause'] = 'images/pause_slider.png';
var currentPosition = 0;			//position initiale du slideshow (par exemple : 2 pour le slide No 2)
var slideWidth = 640;				//largeur en px du slideshow

Voilà votre slideshow est installé, configuré est prêt à l'emploi ! Profitez en c'est un excellent outil pour mettre en avant des éléments de votre site.