Diaporama photo (TheSlideshow)

Sommaire

  1. Présentation
    1. Contrôle clavier
    2. Chargement automatique
    3. Mode présentation
    4. Mode standard
  2. Structure HTML
  3. Informations complémentaires
  4. Méthodes publiques

Modifier les options

apijs.config
apijs.config.dialog
apijs.config.slideshow

Présentation

Gestion d'un diaporama photo et vidéo avec prise en charge du contrôle au clavier.

Contrôle clavier

Pour les photos et vidéos :

Pour les vidéos :

Chargement automatique

Il est possible de lancer le diaporama en utilisant les ids des liens, par exemple :
- avec défilement : cette-page.php#slideshow.2.2
- sans défilement : cette-page.php#slideshow-2-2

Mode présentation

Mode standard

Ancienne usine
Ancienne usine
Chemin le long de la montagne
Chemin le long de la montagne
Champ de blé
Champ de blé
Ruisseau
Ruisseau
Panorama
Panorama
Fleurs
Fleurs

Structure HTML

<!-- mode présentation -->
<div class="gallery [hoverload]" id="slideshow.0">
	<a href=".../image/azerty.jpg" type="image/jpeg" onclick="return false;" id="slideshow.0.999">
		<img src=".../thumb/azerty.jpg" width="200" height="150" alt="legend" />
	</a>
	<a href=".../image/azerty.jpg" type="image/jpeg" onclick="return false;" class="current" id="slideshow.0.0">
		<img src=".../preview/azerty.jpg" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb/azerty.jpg|name|date|legend" />
	</a>
	<a href=".../image/qsdfgh.jpg" type="image/jpeg" onclick="return false;" id="slideshow.0.1">
		<img src=".../preview/qsdfgh.jpg" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb/qsdfgh.jpg|name|date|legend" />
	</a>
	<a href=".../video/wxcvbn.webm" type="video/webm" onclick="return false;" id="slideshow.0.2">
		<img src=".../preview/wxcvbn.jpg" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb/wxcvbn.jpg|name|date|legend" />
	</a>
</div>
<!-- mode standard -->
<div class="album" id="slideshow.1">
	<a href=".../image/azerty.jpg" type="image/jpeg" onclick="return false;" id="slideshow.1.0">
		<img src=".../thumb/azerty.jpg" width="200" height="150" alt="legend" />
		<input type="hidden" value="name|date|legend" />
	</a>
	<a href=".../image/qsdfgh.jpg" type="image/jpeg" onclick="return false;" id="slideshow.1.1">
		<img src=".../thumb/qsdfgh.jpg" width="200" height="150" alt="legend" />
		<input type="hidden" value="name|date|legend" />
	</a>
	<a href=".../video/wxcvbn.webm" type="video/webm" onclick="return false;" id="slideshow.1.2">
		<img src=".../thumb/wxcvbn.jpg" width="200" height="150" alt="legend" />
		<input type="hidden" value="name|date|legend" />
	</a>
</div>

Veuillez ne pas ajouter d'attribut class supplémentaire sur les éléments ci-dessus. Vous pouvez cependant ajouter des classes CSS dans l'attribut class existant (ces classes seront utilisées dans le paramètre icon des dialogues photo et vidéo).

Informations complémentaires

Le paramètre name des dialogues photo et vidéo peut prendre les valeurs suivantes :
- false pour ne pas afficher le nom du fichier,
- auto pour afficher le nom du fichier original,
- ou toute autre chaîne de caractère pour afficher un nom de fichier personnalisé.

Le paramètre date des dialogues photo et vidéo peut prendre les valeurs suivantes :
- false pour ne pas afficher la date du fichier,
- ou toute autre chaîne de caractère pour afficher la date du fichier.

Pour le paramètre icon, les classes CSS suivantes :
- peuvent être utilisées ou modifiées : debug print error warning
- ne peuvent pas être utilisées ou modifiées : start ready end slideshow loading
- ne peuvent pas être modifiées mais peuvent être utilisées : notransition lock
- ne peuvent pas être utilisées mais peuvent être modifiées : information confirmation options upload download progress waiting photo video

En fonction de la taille de la fenêtre, le design des boîtes de dialogue s'adapte automatiquement (media queries). En fonction des modifications que vous pourriez être amené à faire, le code CSS suivant pourra vous être utile :

@media screen and (max-width:30rem),(max-device-width:30rem) { ... }
// 30rem = #apijsBox.width [26rem] + 4

Méthodes publiques

apijs.i18n.translate("word");
apijs.i18n.nodeTranslate("word");
apijs.i18n.changeLang("fr");

apijs.slideshow.showMedia("slideshow.2.1");
apijs.slideshow.actionFirst();
apijs.slideshow.actionPrev();
apijs.slideshow.actionNext();
apijs.slideshow.actionLast();

apijs.dialog.dialogInformation(...);
apijs.dialog.dialogConfirmation(...);
apijs.dialog.dialogFormOptions(...);
apijs.dialog.dialogFormUpload(...);
apijs.dialog.dialogProgress(...);
apijs.dialog.dialogWaiting(...);
apijs.dialog.dialogPhoto(...);
apijs.dialog.dialogVideo(...);
apijs.dialog.actionClose();
apijs.dialog.styles.remove("string");