Diaporama photo

Présentation

Gestion d'un diaporama photo et vidéo avec prise en charge du contrôle au clavier.
Le code source des fonctions de démo (myFuncX) est disponible dans le fichier demo.js.

Pour les photos et vidéos :

• Touche début (↖) pour retourner à la première photo ou vidéo
• Touche gauche (←) pour passer à la photo ou vidéo précédente
• Touche droite (→) pour passer à la photo ou vidéo suivante
• Touche Fin pour passer à la dernière photo ou vidéo
• Touche F11 pour passer en plein écran
• Touche Échap pour quitter

Pour les vidéos :

• Touches bas (↓) ou haut (↑) pour faire avancer ou reculer la vidéo
• Touches plus (+) ou moins (-) pour augmenter ou baisser le volume
• Touche M pour couper le son
• Touche P pour lire ou mettre en pause la vidéo

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

Code HTML

autumn
borland
bw
colorful
default
emacs
friendly
fruity
github
manni
monokai
murphy
native
pastie
perldoc
tango
trac
vim
vs
zenburn
html<!-- input value = src;srcset|name|date|legend / src|name|date|legend -->
<div class="gallery [hoverload] [icon]" id="slideshow.0">
	<a href=".../image/azerty.jpg" type="image/jpeg" onclick="return false" id="slideshow.0.99999">
		<img src=".../thumb200/azerty.jpg" srcset=".../thumb400/azerty.jpg 2x" 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=".../prev63/azerty.jpg" srcset=".../prev126/azerty.jpg 2x" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb200/azerty.jpg;.../thumb400/azerty.jpg 2x|name|date|legend" />
	</a>
	<a href=".../image/qsdfgh.jpg" type="image/jpeg" onclick="return false" id="slideshow.0.1">
		<img src=".../prev63/qsdfgh.jpg" srcset=".../prev126/qsdfgh.jpg 2x" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb200/qsdfgh.jpg;.../thumb400/qsdfgh.jpg 2x|name|date|legend" />
	</a>
	<a href=".../video/wxcvbn.m3u8" type="video/x-mpegurl" onclick="return false" id="slideshow.0.2">
		<img src=".../prev63/wxcvbn.jpg" srcset=".../prev126/wxcvbn.jpg 2x" width="63" height="47" alt="legend" />
		<input type="hidden" value=".../thumb200/wxcvbn.jpg;.../thumb400/wxcvbn.jpg 2x|name|date|legend" />
	</a>
</div>
<!-- input value = name|date|legend -->
<div class="album [icon]" id="slideshow.0">
	<a href=".../image/azerty.jpg" type="image/jpeg" onclick="return false" id="slideshow.0.0">
		<img src=".../thumb200/azerty.jpg" srcset=".../thumb400/azerty.jpg 2x" 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.0.1">
		<img src=".../thumb200/qsdfgh.jpg" srcset=".../thumb400/qsdfgh.jpg 2x" width="200" height="150" alt="legend" />
		<input type="hidden" value="name|date|legend" />
	</a>
	<a href=".../video/wxcvbn.m3u8" type="video/x-mpegurl" onclick="return false" id="slideshow.0.2">
		<img src=".../thumb200/wxcvbn.jpg" srcset=".../thumb400/wxcvbn.jpg 2x" width="200" height="150" alt="legend" />
		<input type="hidden" value="name|date|legend" />
	</a>
</div>

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 : notransition lock
- ne peuvent pas être utilisées : information confirmation options upload progress waiting photo video iframe ajax start ready end reduce mobile tiny fullscreen slideshow loading download print error warning

API

autumn
borland
bw
colorful
default
emacs
friendly
fruity
github
manni
monokai
murphy
native
pastie
perldoc
tango
trac
vim
vs
zenburn
jsapijs.i18n.translate("word");              // return string
apijs.i18n.translateNode("word");          // return domelement
apijs.i18n.changeLang("fr");               // return boolean

apijs.dialog.dialogInformation(...);       // return boolean
apijs.dialog.dialogConfirmation(...);      // return boolean
apijs.dialog.dialogFormOptions(...);       // return boolean
apijs.dialog.dialogFormUpload(...);        // return boolean
apijs.dialog.dialogProgress(...);          // return boolean
apijs.dialog.dialogWaiting(...);           // return boolean
apijs.dialog.dialogPhoto(...);             // return boolean
apijs.dialog.dialogVideo(...);             // return boolean
apijs.dialog.dialogIframe(...);            // return boolean
apijs.dialog.dialogAjax(...);              // return boolean
apijs.dialog.actionClose();                // return void
apijs.dialog.add("string1", "string2");    // return dialog object
apijs.dialog.remove("string1", "string2"); // return dialog object
apijs.dialog.toggle("string1", "string2"); // return dialog object
apijs.dialog.has("string1", "string2");    // return boolean (true if one found)

apijs.upload.sendFile(...);                // return boolean
apijs.upload.sendFiles(...);               // return boolean

apijs.slideshow.show("slideshow.2.1");     // return boolean
apijs.slideshow.actionFirst();             // return boolean
apijs.slideshow.actionPrev();              // return boolean
apijs.slideshow.actionNext();              // return boolean
apijs.slideshow.actionLast();              // return boolean

// default config //////////////////////////////////////////
apijs.config.lang = "auto";
apijs.config.debug = false;

apijs.config.dialog.closeOnClick = false;
apijs.config.dialog.restrictNavigation = true;
apijs.config.dialog.player = true; // true|false|userFunction(videoTag, url)

apijs.config.slideshow.ids = "slideshow";
apijs.config.slideshow.anchor = true;

apijs.config.upload.tokenName = "X-CSRF-Token";
apijs.config.upload.tokenValue = null;

// events //////////////////////////////////////////////////
self.addEventListener("apijsbeforeload", function () {

	apijs.dialog.htmlContentOrig = apijs.dialog.htmlContent;
	apijs.dialog.htmlContent = function (title, text) {
		alert(title);
		this.htmlContentOrig(title, text);
	};

	if (!apijs.i18n.data.hasOwnProperty("xy")) apijs.i18n.data.xy = {};
	apijs.i18n.data.xy["xyz"] = "Test";

	apijs.config.debug = true;
});

self.addEventListener("apijsload", function () {
	console.log("ready");
});

self.addEventListener("apijsajaxresponse", function (ev) {
	console.log(ev.detail);
});