qkDiapo

Présentation
Téléchargement
Intégration
Activation
Configuration
Exemples
eng

Présentation

Petit plug-in jQuery de diaporamas (slideshow), avec plusieurs options d'affichage et de navigation.

Diapo1

Diapo2

Diapo3

Diapo4

Diapo5

Diapo6

Caractéristiques

Très léger, simple à utiliser et rapide à installer ;
Multiples diaporamas possibles dans la même page ;
Support des diapos aux contenus Html formatés ;
Personnalisation de l'aspect graphique avec les styles Css ;
Trois modes d'animation disponibles, dont :
- Mode 'f' (fade) ou apparition par effet de transparence,
- Mode 'h' (horizontal) ou apparition par translation horizontale de droite à gauche,
- Mode 'v' (vertical) ou apparition par translation verticale de bas en haut.
Configuration des durées d'affichage et de transition ;
Ajout ponctuel d'une durée d'affichage additionnelle ;
Affichage par ordre aléatoire des diapos ;
Plusieurs moyens de navigation disponibles, dont :
- Automatique par animation séquentielle (avec pause au survol de la diapo),
- Manuel au clavier par touches flêchées (uniquement le premier diaporama),
- Manuel à la souris par curseur interne,
- Manuel à la souris par boutons externes (avec compteur de défilement).

Téléchargement

Téléchargez qkDiapo

Projet : qkDiapo ;
Version : 0404 (09-2013) ;
Auteur : FredoMkb © 2013 ;
Licence : Projet libre et open-source ;
Fichier : qkDiapo_0404.zip (340 Ko, avec cette documentation).

On commence donc par placer le dossier du plugin à la racine de votre site (ou à l'emplacement de votre choix suivant la structure de votre site). Une fois le répertoire du plug-in installé, deux étapes sont nécessaires pour intégrer qkDiapo (les chemins d'accès sont à adapter suivant votre installation) :

1. Styles Css

Il faut commencer par importer les styles Css du plug-in dans la partier 'head' du code Html de votre page, avec le code suivant :

<link rel="stylesheet" href="qkdiapo/qkdiapo.css" type="text/css" media="all" />

Ou la version minimisée :

<link rel="stylesheet" href="qkdiapo/qkdiapo.min.css" type="text/css" media="all" />

2. Librairies JavaScript

Il faut ensuite intégrer les librairies JavaScript, toujours dans la partie 'head' de votre page, en commençant toujours par jQuery (la dernière version en date) puis après le plug-in qkDiapo :

<script src="http://code.jquery.com/jquery-latest.js" charset="UTF-8"></script>
<script type="text/javascript" src="qkdiapo/qkdiapo.js" charset="UTF-8"></script>

Ou les versions minimisées :

<script src="http://code.jquery.com/jquery-latest.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="qkdiapo/qkdiapo.min.js" charset="UTF-8"></script>

Activation

Deux étapes pour activer et utiliser correctement le plug-in qkDiapo :

1. Code Html

Pour utiliser le plug-in qkDiapo, il faut pouvoir cibler de manière précise la balise Html contenant les diapos à afficher. Prennons le code Html suivant :

<div>
	<p>Diapo 1</p>
	<p>Diapo 2</p>
	<p>Diapo 3</p>
</div>

Pour pouvoir cibler ce bloc 'div', il faut lui ajouter un attribut 'id', avec par exemple l'identifiant 'diapos' :

<div id="diapos">
	<p>Diapo 1</p>
	<p>Diapo 2</p>
	<p>Diapo 3</p>
</div>

2. Code JavaScript

Il faut ensuite activer le plug-in, sur l'identifiant correspondant, en insérant le code JavaScript suivant (après l'intégration des librairies JavaScript) :

<script type='text/javascript' charset="UTF-8">
$(document).ready(function() {		
	$('#diapos').qkdiapo();
});
</script>

Configuration

Il est possible de configurer certaines options du plug-in qkDiapo, en utilisant la syntaxe suivante dans le code d'activation JavaScript :

<script type='text/javascript' charset="UTF-8">
	$(document).ready(function() {		
		$('#diapos').qkdiapo({
			option1: valeur1, 
			option2: valeur2, 
			optionN: valeurN
		});
	});
</script>

Plusieurs options sont donc disponibles pour configurer le plug-in qkDiapo, regroupées en deux catégores :

1. Affichage

Option	Type	Défaut	Description
slide_tag	texte	'> *'	Sélecteur Css pour cibler les objets Html à utiliser comme diapos
anim_mode	texte	'f'	Mode d'animation parmi les trois options suivantes : 'f' = effet transparence ; 'h' = translation horizontale ; 'v' = translation verticale
anim_time	entier	600	Durée de l'effet de transition entre diapos
show_time	entier	4000	Durée d'affichage de chaque diapo
add_time	entier	6000	Durée d'affichage additionnel pour les diapos disposant d'une classe 'add' (voir l'option 'add_class' ci-après pour personnaliser cette classe)
add_class	texte	'add'	Classe à utiliser sur les diapos nécessitant d'une durée d'affichage additionnelle (voir option 'add_time' ci-dessus pour personnaliser cette durée)
sort_random	booléen	true	Faut-il trier les diapos dans un ordre aléatoire ?

2. Navigation

Option	Type	Défaut	Description
nav_auto	booléen	true	Faut-il activer la navigation automatiquement du diaporama ?
nav_keys	booléen	true	Faut-il activer la navigation avec les touches flêchées du clavier ? Uniquement valable pour le premier diaporama lorsqu'il y en a plusieurs
nav_inner	booléen	true	Faut-il activer la navigation manuelle à l'intérieur du diaporama ?
nav_outer	booléen	true	Faut-il afficher le bloc de navigation extérieur au diaporama ?

Notes

Les options de durées sont exprimées en milli-secondes : 1000 = 1 seconde.
Les options de type booléen prennent l'une des deux valeurs suivantes : true = oui, false = non.

Exemples

Voici quelques exemples d'intégation avec les codes sources correspondants :

1. Basique

Intégration basique, sur du contenu Html, avec la configuration par défaut, mode d'animation par translation verticale (anim_mode = 'v') et ajout d'une durée additionnelle sur la dernière diapo (class 'add').

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

4 Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>qkDiapo - Basique</title>
		<link rel="stylesheet" href="qkdiapo.min.css" type="text/css" media="all" />
		<script src="http://code.jquery.com/jquery-latest.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="qkdiapo.min.js" charset="UTF-8"></script>
		<script type='text/javascript' charset="UTF-8">
			$(document).ready(function() {
				$('#diapos1').qkdiapo({anim_mode: 'v'});
			});
		</script>
	</head>
	<body>
		<div id="diapos1">
			<p><strong>1</strong> Lorem ipsum ...</p>
			<p><strong>2</strong> Lorem ipsum ...</p>
			<p><strong>3</strong> Lorem ipsum ...</p>
			<p class="add"><strong>4</strong> Lorem ipsum ...</p>
		</div><!--#diapos1-->
	</body>
</html>

2. Affichage

Intégration avec configuration et personnalisation des durées d'affichage et de transition.

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>qkDiapo - Affichage</title>
		<link rel="stylesheet" href="qkdiapo.min.css" type="text/css" media="all" />
		<script src="http://code.jquery.com/jquery-latest.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="qkdiapo.min.js" charset="UTF-8"></script>
		<script type='text/javascript' charset="UTF-8">
			$(document).ready(function() {
				$('#diapos2').qkdiapo({
					anim_mode: 'h', 
					anim_time: 2000, 
					show_time: 8000, 
					add_time: 4000
				});
			});
		</script>
	</head>
	<body>
		<div id="diapos2">
			<p><strong>1</strong> Lorem ipsum ...</p>
			<p><strong>2</strong> Lorem ipsum ...</p>
			<p><strong>3</strong> Lorem ipsum ...</p>
			<p class="add"><strong>4</strong> Lorem ipsum ...</p>
		</div><!--#diapos2-->
	</body>
</html>

3. Navigation

Désactivation de toutes les navigations hormis l'animation automatique, sans tri aléatoire des diapos et avec ciblage des éléments d'une liste.

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
4 Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>qkDiapo - Navigation</title>
		<link rel="stylesheet" href="qkdiapo.min.css" type="text/css" media="all" />
		<script src="http://code.jquery.com/jquery-latest.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="qkdiapo.min.js" charset="UTF-8"></script>
		<script type='text/javascript' charset="UTF-8">
			$(document).ready(function() {
				$('#diapos3').qkdiapo({
					slide_tag: 'ul > li', 
					nav_inner: false, 
					nav_outer: false, 
					nav_keys: false, 
					sort_random: false
				});
			});
		</script>
	</head>
	<body>
		<div id="diapos3">
			<ul>
				<li><p><strong>1</strong> Lorem ipsum dolor sit amet, ...</p></li>
				<li><p><strong>2</strong> Lorem ipsum dolor sit amet, ...</p></li>
				<li><p><strong>3</strong> Lorem ipsum dolor sit amet, ...</p></li>
				<li class="add"><p><strong>4</strong> Lorem ipsum dolor sit amet, ...</p></li>
			</ul>
		</div><!--#diapos3-->
	</body>
</html>