Photo slideshow (TheSlideshow)


  1. Presentation
    1. Keyboard control
    2. Auto load
    3. Presentation mode
    4. Standard mode
  2. HTML structure
  3. Additional information

Edit options



Management of a photo and video slideshow with a keyboard control coverage.

Keyboard control

For the photos and the videos:

For the videos:

Auto load

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

Presentation mode

Standard mode

Old factory
Old factory
Way along the mountain
Way along the mountain

HTML structure

<!-- presentation mode -->
<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 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 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 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" />
<!-- standard mode -->
<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 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 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" />

Don't add an extra class attribute on the above elements. However, you can add CSS classes in the existent class attribute (these classes will be used in the icon parameter of photo and video dialogs).

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 or modified: debug print error warning
- can not be used or modified: start ready end slideshow loading
- can not be modified but can be used: notransition lock
- can not be used but can be modified: information confirmation options upload download progress waiting photo video

According to the window size, the design of the dialog boxes automatically adapts (media queries). According to the modifications that you can have to make, the following CSS code can be useful:

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