jQuery plugin desoSlide

desoSlide est maintenant sur http://sylouuu.github.io/desoslide

Présentation

Ce plugin permet d’afficher rapidement un slider d’images (diaporama) en spécifiant :

  • L’URL de l’image
  • L’URL de la miniature
  • Le texte de description

Installation

Inclure jQuery, le plugin et son CSS dans votre page HTML :

<link rel="stylesheet" type="text/css" href="css/jquery.desoslide.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/desoSlide.js"></script>

Ajouter le squelette du plugin, en conservant bien son arborescence.

<div id="desoSlide">
	<div id="desoSlide_mainImageInfo">
		<div id="desoSlide_mainImage"></div>
		<div id="desoSlide_caption"></div>
	</div>
	<div id="desoSlide_control"></div>

	<div id="desoSlide_thumbs">
		<ul>
			<li>
				<a href="images/salt.png">
					<img src="images/salt_thumb.png" alt="Salt" data-info="Realised by Phillip Noyce"/>
				</a>
			</li>
			<li>
				<a href="images/batman.png">
					<img src="images/batman_thumb.png" alt="Batman" data-info="Realised by Christopher Nolan"/>
				</a>
			</li>
			<li>
				<a href="images/frozen.png">
					<img src="images/frozen_thumb.png" alt="Frozen" data-info="Realised by Adam Green"/>
				</a>
			</li>
		</ul>
	</div>
</div>

Les lignes en surbrillance sont celles que vous devez personnaliser (et idem pour le reste de la liste).
Les noms que vous donnez aux images et aux miniatures sont totalement libres.

Appel du plugin

Utiliser le plugin en tant que méthode de la div principale.

$(document).ready(function() {
    $('#desoSlide').desoSlide();
});

Vous pouvez personnaliser desoSlide() en y ajoutant certains paramètres, par exemple :

$(document).ready(function() {
	$('#desoSlide').desoSlide({
		'autoStart': true,				// lancer automatiquement le diaporama
		'imgFirst': 0,					// index de l image à afficher par défaut (0 = première image)
		'interval': 2500,				// temps en millisecondes entre chaque image
		'hideControl': false,			// cacher le contrôle du diaporama
		'playBtnLabel': 'Lecture',		// label du bouton de lecture
		'stopBtnLabel': 'Pause',		// label du bouton de pause
		'imgClicked': function(alt) {	// callback du clic sur l image en cours d affichage
			alert(alt);
		}
	});
});

Rendu

Voir la démonstration

Télécharger

jQuery
jquery.desoslide.min.js (2.8 KB) jquery.desoslide.js (5.8 KB)
CSS
jquery.desoslide.min.css (885 B) jquery.desoslide.css (1.2 KB)