code javascript a écrit :
<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 à supprimer
function mySplice(s, l) {
if(s+l > this.length) l = this.length-s;
for(var i=s; i<this.length; ++i)
this
= 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édente
function fctSsExc() {
var fct = new Array;
for(var i=0; i<nb_img; i++) {
fct = Math.floor( Math.random()*(nb_img-i) );
}
return fct;
}
// Construit une permutation à partir d'une fonction sous-excédente
function buildSigma() {
var fct_ss_exc = fctSsExc();
var set_N = new Array;
for(var i=0; i<nb_img; i++) {
set_N = i;
}
var sigma = new Array;
for(var i=0; i<nb_img; i++) {
sigma = set_N[fct_ss_exc];
set_N.splice(fct_ss_exc,1);
}
return sigma;
}
// Retourne une version mélangée du tableau passé en paramètre
function shuffleArray(myArray) {
var sigma = buildSigma();
var newArray = new Array;
for(var i=0; i<nb_img; i++) {
newArray = myArray[sigma];
}
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 slideshow
function 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 slideshow
function 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 slideshow
function 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-ci
function 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>
1
) il y a de fortes chances que tu ais besoin de modifier pas mal ton script ou même d'en trouver un second pour IE mais la je ne peux pas t'aider je ne connais pas le javascript, désolé.
![[:Ordinateur-Individuel:1]](/data/globaldata/usmilies/ordinateurindividuel-1.gif "[:Ordinateur-Individuel:1]")
![[:Ordinateur-Individuel:2]](/data/globaldata/usmilies/ordinateurindividuel-2.gif "[:Ordinateur-Individuel:2]")
![[:Ordinateur-Individuel:3]](/data/globaldata/usmilies/ordinateurindividuel-3.gif "[:Ordinateur-Individuel:3]")
![[: Ordinateur-Individuel:4]](/data/globaldata/usmilies/ordinateurindividuel-4.gif "[: Ordinateur-Individuel:4]")
mais merci quand même. amicalement
enfin, dès que je rattaque, je vous tiens au courant. amicalement
