Photo slideshow

Presentation

Management of a photo and video slideshow with a keyboard control coverage.
Source code of demo functions (myFuncX) is available in demo.js file.

For the photos and the videos:

• The start (↖) key to return at the first photo or video
• The left (←) key to go to the previous photo or video
• The right (→) key to go to the next photo or video
• The End key to go to the last photo or video
• The F11 key to switch in full screen
• The Escape key to quit

For the videos:

• The bottom (↓) or top (↑) keys to forward or backward the video
• The + or - keys to increase or decrease the volume
• The M key to mute
• The P key to play or pause the video

It is possible to start the slideshow by using links ids, for example:
- with scroll: this-page.php#slideshow.2.2
- without scroll: this-page.php#slideshow-2-2

HTML code

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>

Additional information

The name parameter of the photo and video dialogs can take the following values:
- false to not display the file name,
- auto to display the original file name,
- or every other string to display a personalized file name.

The date parameter of the photo and video dialogs can take the following values:
- false to not display the file date,
- or every other character string to display the file date.

For the icon parameter the following CSS classes:
- can be used: notransition lock
- can not be used: 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);
});