Gestion d'un diaporama photo et vidéo avec prise en charge du contrôle au clavier. L'affichage des vidéos est réalisé grâce à la balise vidéo du langage HTML 5.
Deux modes d'affichage sont disponibles : le mode présentation et le mode standard.
Dans tous les cas, le nombre de photo et vidéo est limité à 999.
Exemple concret d'utilisation sur luigifab.info/mediaoueb.
Il est possible de mettre à jour l'aperçu lors du survol des miniatures.
Toutefois, ce paramètre (slideshow.hoverload) n'est plus modifiable une fois la page chargée.
L'image actuellement affichée est toujours encadrée d'un cadre noir.
apijs.dialogue.actionClose(true) close the current dialogapijs.slideshow.actionFirst() display the first photo or videoapijs.slideshow.actionPrev() display the previous photo or videoapijs.slideshow.actionNext() display the next photo or videoapijs.slideshow.actionLast() display the last photo or videoNote that compressed versions of JavaScript files are available in zip folder.
// configuration var apijs = { i18n: null, dialogue: null, slideshow: null, upload: null, config: { lang: 'fr', debug: true, debugkey: false, navigator: true, transition: true, autolang: true, dialogue: { blocks: ['header', 'ariane', 'contenu', 'footer'], hiddenPage: false, savingDialog: false, savingTime: 700, emotes: true, showLoader: true, showFullsize: false, savePhoto: true, saveVideo: true, videoAutoplay: true, videoWidth: 640, videoHeight: 480, imagePrev: null, imageNext: null, imageClose: { src: './images/dialogue/close.png', width: 60, height: 22 }, imageUpload: null, filePhoto: './downloadfile.php', fileVideo: './downloadfile.php', fileUpload: null }, slideshow: { ids: 'diaporama', hiddenPage: false, hoverload: false } } }; // start-up if (navigator.userAgent.indexOf('MSIE 8') > -1) { apijs.config.navigator = false; apijs.config.transition = false; document.createElement('video'); window.innerWidth = document.documentElement.clientWidth; window.innerHeight = document.documentElement.clientHeight; window.attachEvent('onload', start); } else { window.addEventListener('load', start, false); } function start() { if ((typeof document.getElementsByTagName('body')[0].style.transitionDuration !== 'string') && (typeof document.getElementsByTagName('body')[0].style.MozTransitionDuration !== 'string') && (typeof document.getElementsByTagName('body')[0].style.webkitTransitionDuration !== 'string')) { apijs.config.transition = false; } if ((typeof Internationalization === 'function') && (typeof BBcode === 'function') && (typeof Dialogue === 'function') && (typeof Slideshow === 'function')) { apijs.i18n = new Internationalization(); apijs.i18n.init(); apijs.dialogue = new Dialogue(); apijs.slideshow = new Slideshow(); apijs.slideshow.init(); } };// presentation mode <div id="diaporama.0"> <a href="./web/azerty.jpg" type="image/jpeg" id="diaporama.0.999"> <img src="./thumb/azerty.jpg" width="200" height="150" alt="legend" /> <input type="hidden" value="width|height|name|date|legend" /> </a> <a href="./web/azerty.jpg" type="image/jpeg" id="diaporama.0.0"> <img src="./preview/azerty.jpg" width="63" height="47" alt="legend" class="actif" /> <input type="hidden" value="./thumb/azerty.jpg|width|height|name|date|legend" /> </a> <a href="./web/qsdfgh.jpg" type="image/jpeg" id="diaporama.0.1"> <img src="./preview/qsdfgh.jpg" width="63" height="47" alt="legend" /> <input type="hidden" value="./thumb/qsdfgh.jpg|width|height|name|date|legend" /> </a> <a href="./web/wxcvbn.ogv" type="video/ogg" id="diaporama.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>// standard mode <div id="diaporama.1"> <a href="./web/azerty.jpg" type="image/jpeg" id="diaporama.1.0"> <img src="./thumb/azerty.jpg" width="200" height="150" alt="legend" /> <input type="hidden" value="width|height|name|date|legend" /> </a> <a href="./web/qsdfgh.jpg" type="image/jpeg" id="diaporama.1.1"> <img src="./thumb/qsdfgh.jpg" width="200" height="150" alt="legend" /> <input type="hidden" value="width|height|name|date|legend" /> </a> <a href="./web/wxcvbn.ogv" type="video/ogg" id="diaporama.1.2"> <img src="./thumb/wxcvbn.jpg" width="200" height="150" alt="legend" /> <input type="hidden" value="name|date|legend" /> </a> </div>
Ce module (TheSlideshow) utilise les dialogues photo et vidéo de TheDialogue.
Photos shown above are under GPL 2.0 license and come from the kde-look.org website.
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 chaine 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 chaine de caractère pour afficher la date du fichier.
Les id suivants ne peuvent pas être utilisés car ils sont utilisés par le programme JavaScript : dialogue, box, iframeUpload, progressbar, topho, prev, next.
La capture des touches du clavier est réalisée via eventListener sur keydown.
Le pré-chargement de l'image du dialogue photo est réalisé via eventListener sur load.
Toutes les actions ou presque des boutons de dialogue sont déclenchées via onclick.
Seul la validation des dialogues composés d'un formulaire se fait via onsubmit.
TheSlideshow depends on TheDialogue and i18n.
TheDialogue also depends on bbcode.