Ce script est déclaré obsolète. Il n'est conservé que pour information.
Un diaporama entièrement paramétrable (durée d'affichage, rotation aléatoire)
présentant habilement une collection de photos dans un popup centré et ajusté.
<HTML><HEAD><TITLE>Slideshow démo</TITLE><!-- (c) robloche@fr.st, 2003 --><!-- --><!-- Ce script a été testé dans les configurations suivantes : --><!-- . Windows XP Pro & Home + Internet Explorer 6 --><!-- . Windows 2000 + Internet Explorer 5.5 --><!-- . Windows 98 + Internet Explorer 6 --><!-- . Windows Me + Internet Explorer 6 --><!-- . Windows Me + Mozilla --><!-- . Linux Debian + Opera --><!-- . Linux Mandrake + Galeon --><!-- . Linux Mandrake + Mozilla --><style type="text/css">body { background: #FFFFF5; }p { font: normal normal normal 12pt/16pt "Times New Roman", Times, serif; color: black; text-decoration: none; text-align: justify; text-indent: 0em; }.title { font-size: 24px; text-align: center; font-weight: bold; border: solid #0000BB 0px; border-width: 1px 0px 1px 0px; padding: 5px; background: #BFDDFF; text-indent: 0em; }.section { font-size: 18px; font-weight: bold; border: solid #0000BB 0px; border-width: 1px 0px 1px 0px; padding: 5px; background: #BFDDFF; text-indent: 0em; }.button { font-weight: bold; color: blue; }.code { font-family: courier new, fixedsys; color: green; }</style></HEAD><BODY onLoad="focusOnLaunch()"><SCRIPT LANGUAGE="JavaScript">var rep = ""; // Répertoire des images du diaporama (vide si meme repertoire que le fichier html)var num = 0;var myCounter;var next_img = new Image;next_img.src = rep+"pixel_transparent.gif"; var wPopup;var tabImg;var tabImgSave = new Array;tabImgSave[0] = 'forme_01.gif';tabImgSave[1] = 'forme_02.gif';tabImgSave[2] = 'forme_03.gif';tabImgSave[3] = 'forme_04.gif';tabImgSave[4] = 'forme_05.gif';tabImgSave[5] = 'forme_06.gif';tabImgSave[6] = 'forme_07.gif';tabImgSave[7] = 'forme_08.gif';var nb_img = tabImgSave.length; //// Les trois fonctions suivantes (+ éventuellement, "mySplice")// servent à mélanger un tableau quelconque à partir d'une// permutation tirée aléatoirement//// Méthode "splice" si elle n'existe pas// tab : tableau// s : début de la suppression// l : nombre d'éléments à supprimerfunction mySplice(s, l) { if(s+l > this.length) l = this.length-s; for(var i=s; i<this.length; ++i) this[i] = this[i+1]; delete this[this.length-1]; this.length--;}// Est-ce que la méthode "splice" est disponible ?if(!Array.prototype.splice) { // Non, alors on utilise la version "maison" Array.prototype.splice = mySplice;}// Génère une fonctione sous-excédentefunction fctSsExc() { var fct = new Array; for(var i=0; i<nb_img; i++) { fct[i] = Math.floor( Math.random()*(nb_img-i) ); } return fct;}// Construit une permutation à partir d'une fonction sous-excédentefunction buildSigma() { var fct_ss_exc = fctSsExc(); var set_N = new Array; for(var i=0; i<nb_img; i++) { set_N[i] = i; } var sigma = new Array; for(var i=0; i<nb_img; i++) { sigma[i] = set_N[fct_ss_exc[i]]; set_N.splice(fct_ss_exc[i],1); } return sigma;}// Retourne une version mélangée du tableau passé en paramètrefunction shuffleArray(myArray) { var sigma = buildSigma(); var newArray = new Array; for(var i=0; i<nb_img; i++) { newArray[i] = myArray[sigma[i]]; } return newArray;}//// Fin des fonctions de mélange//// Donne le focus au bouton "Lancer"function focusOnLaunch() { window.document.forms.settings.bLaunch.focus();}// Donne le focus au bouton "Stopper"function focusOnStop() { window.document.forms.settings.bStop.focus();}function next() { // Est-ce que l'image suivante est oréchargée ? if(next_img.complete) { // Oui, alors après le temps de pause choisi par l'utilisateur, cette image remplacera l'actuelle myCounter = setTimeout("launch()", 1000*window.document.settings.tempo.value); } else { // Non, alors on continue d'attendre qu'elle le soit myCounter = setTimeout("next()", 250); }}// Lance le slideshowfunction launchFirst() { // Petite vérification de la temporisation choisie if(window.document.settings.tempo.value == "") { alert("Précisez une temporisation entre 0 et 60 secondes..."); return false; } // Ordre normal ou aléatoire if(window.document.settings.order[1].checked) { tabImg = shuffleArray(tabImgSave); } else { tabImg = tabImgSave; } // Avant de lancer le slideshow, on désactive tous les éléments du formulaire // et on active le bouton "Stopper" next_img.src = rep+tabImg[0]; window.document.forms.settings.bStop.disabled = false; focusOnStop(); window.document.forms.settings.bLaunch.disabled = true; window.document.forms.settings.repeat.disabled = true; window.document.forms.settings.order[0].disabled = true; window.document.forms.settings.order[1].disabled = true; window.document.forms.settings.tempo.disabled = true; launch();}// Poursuit le slideshowfunction launch() { // Si la fenêtre n'existe pas ou est fermée, on la réouvre if(!wPopup || wPopup.closed) { wPopup = window.open('', 'img_popup', 'width=50, height=50, top='+(screen.height-50)/2+', left='+(screen.width-50)/2+', status=no, directories=no, toolbar=no, location=no, menubar=no, scrollbars=no, resizable=yes'); } // On écrit le contenu de la fenêtre popup wPopup.document.clear(); wPopup.document.write("<HTML><HEAD><TITLE>Slideshow : "+(num+1)+"/"+nb_img+"</TITLE></HEAD>"); // La fonction qui attend que l'image soit chargée et affichée pour redimensionner la fenêtre à la bonne taille wPopup.document.write('<SCRIPT language="JavaScript">nfunction checkSize() { if(document.images && document.images[0].complete) { w = document.images[0].width+50; h = document.images[0].height+100; window.resizeTo(w, h); window.moveTo((screen.width-w)/2, (screen.height-h)/2); document.images[0].style.visibility = "visible"; window.focus(); if(opener.next_img.src != opener.rep+opener.tabImg[opener.num]) { opener.next_img.src = opener.rep+opener.tabImg[opener.num]; } } else { setTimeout("checkSize()", 250); } }n</'+'SCRIPT>'); wPopup.document.write('<BODY bgcolor="#FFFFFF" leftMargin="0" topMargin="0" marginWidth="0" marginHeight="0">'); wPopup.document.write('<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"><tr valign="middle"><td align="center"><img src="'+next_img.src+'" border="0" onLoad="checkSize()" onClick="window.opener.stop()" style="visibility:hidden"></td></tr></table>'); wPopup.document.write('</BODY></HTML>'); wPopup.document.close(); num++; // On a passé toutes les images, on repart du début if(num == nb_img) num = 0; // Si "Répéter" n'est pas cochée, on stoppe le slideshow if(num == 0 && !window.document.settings.repeat.checked) { setTimeout("stop()", 1000*window.document.settings.tempo.value); return false; } // En cas de répétition en mode aléatoire, on remélange les images if(num == 0 && window.document.settings.order[1].checked) { tabImg = shuffleArray(tabImgSave); } next();}// Stoppe le slideshowfunction stop() { clearTimeout(myCounter); wPopup.close(); // On réactive tous les éléments du formulaire // et on désactive le bouton "Stopper" window.document.forms.settings.bLaunch.disabled = false; focusOnLaunch(); window.document.forms.settings.bStop.disabled = true; window.document.forms.settings.repeat.disabled = false; window.document.forms.settings.order[0].disabled = false; window.document.forms.settings.order[1].disabled = false; window.document.forms.settings.tempo.disabled = false; num = 0;}// Vérification de la temporisation à chaque modification de celle-cifunction checkTempo() { var t = window.document.settings.tempo.value; if(isNaN(t) || t<0 || t>60) { window.document.settings.tempo.value = 3; alert("Mauvaise temporisation...nEntrez un temps compris entre 0 et 60 secondes."); return false; }}</script><p class="title">Slideshow</p><p>Ce script vous permet de faire défiler des images de manière automatique dans une fenêtre popup, la taille de celle-ci s'adaptant à chaque image. Vous pouvez sélectionner l'ordre de défilement (<font class="button">normal</font> ou <font class="button">aléatoire</font>), choisir si le slideshow doit se répéter indéfiniment (si <font class="button">aléatoire</font> est sélectionné, un nouveau mélange est effectué à chaque répétition), et enfin, préciser le temps pendant lequel chaque image restera à l'écran (hors temps de chargement de l'image). Fort logiquement, à tout moment, un clic sur <font class="button">Stopper</font> (ou directement sur une photo, c'est moins logique, mais c'est plus pratique) arrête le slideshow.</p><p>Évidemment, on peut modifier plein de choses ici. On peut par exemple ajouter le nom de l'image dans le popup, ou d'autres renseignements. On peut aussi, pour rendre le script plus dynamique, remplir le tableau des images <font class="code">tabImgSave</font> grâce à du PHP de façon à parcourir toutes les images d'un répertoire.</p><p><strong><u>Note</u> :</strong> Pour mélanger les images, on utilise la fonction <font class="code">shuffleArray()</font>, celle-ci utilisant <font class="code">buildSigma()</font> et <font class="code">fctSsExc()</font>. Vous pouvez bien sûr réutiliser ces fonctions dans un autre script pour mélanger n'importe quel type de tableau.</p><br>Script proposé par robloche pour <A href="http://www.toutjavascript.com">Tout Javascript.com</A><form name="settings"> <table align="center" cellpadding="2" cellspacing="0" border="0"> <tr> <td><p class="left"> <input type="radio" name="order" value="normal" checked> ordre normal <input type="radio" name="order" value="aléatoire"> ordre aléatoire</p> </td> </tr> <tr> <td> <p class="left"> <input type="checkbox" name="repeat"> répétition</p> </td> </tr> <tr> <td> <p class="left">Temporisation : <input type="text" name="tempo" value="3" size="4" maxlength="2" style="background:#FFFFFF;color:#000033;font-size:14;font-family:Courier,monospace;text-align:center;" onKeyUp="checkTempo()" onChange="checkTempo()"> seconde(s)</p> </td> </tr></table><br><table align="center" cellpadding="2" cellspacing="0" border="0"> <tr> <td align="center"> <input type="button" onClick="launchFirst()" name="bLaunch" value="Lancer" style="width: 150px"> <input type="button" onClick="stop()" name="bStop" value="Stopper" style="width: 150px" disabled> </td> </tr></table></form></BODY></HTML>
En savoir plus
