Diaporama en javascript simple popup
Script proposé par robloche pour "Tout Javascript.com"
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.
Voir un exemple :
Voir le diaporama popup
Réglages possibles :
- Vous pouvez sélectionner l'ordre de défilement (normal ou aléatoire)
- Choisir si le slideshow doit se répéter indéfiniment (si aléatoire est sélectionné, un nouveau mélange est effectué à chaque répétition)
- 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 Stopper (ou directement sur une photo, c'est moins logique, mais c'est plus pratique) arrête le slideshow.
Évidemment, on peut modifier certains paramètres 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 tabImgSave grâce à du PHP de façon à parcourir toutes les images d'un répertoire.
Pour mélanger les images, on utilise la fonction shuffleArray(), celle-ci utilisant buildSigma() et fctSsExc().
Vous pouvez bien sûr réutiliser ces fonctions dans un autre script pour mélanger n'importe quel type de tableau.
Il vous faut une feuille de style pour formater les balises et le texte :
<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-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>
|
Et le javascript qui va mettre en oeuvre le diaporama, calculer la taille des popup et y insérer les images au centre de la page :
<BODY onLoad="focusOnLaunch()">
<SCRIPT LANGUAGE="JavaScript">
var rep = "";
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] = 'basse.gif';
tabImgSave[1] = 'danse.gif';
tabImgSave[2] = 'danseuse.gif';
tabImgSave[3] = 'danseurs.gif';
tabImgSave[4] = 'drummer6.gif';
tabImgSave[5] = 'fleurs.gif';
tabImgSave[6] = 'saxo.gif';
tabImgSave[7] = 'violon.gif';
tabImgSave[8] = 'pianiste.gif';
var nb_img = tabImgSave.length;
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--;
}
if(!Array.prototype.splice) {
// Non, alors on utilise la version "maison"
Array.prototype.splice = mySplice;
}
function fctSsExc() {
var fct = new Array;
for(var i=0; i<nb_img; i++) {
fct[i] = Math.floor( Math.random()*(nb_img-i) );
}
return fct;
}
function 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;
}
function shuffleArray(myArray) {
var sigma = buildSigma();
var newArray = new Array;
for(var i=0; i<nb_img; i++) {
newArray[i] = myArray[sigma[i]];
}
return newArray;
}
function focusOnLaunch() {
window.document.forms.settings.bLaunch.focus();
}
function focusOnStop() {
window.document.forms.settings.bStop.focus();
}
function next() {
if(next_img.complete) {
myCounter = setTimeout("launch()",
1000*window.document.settings.tempo.value);
}
else {
myCounter = setTimeout("next()", 250);
}
}
function launchFirst() {
if(window.document.settings.tempo.value == "") {
alert("Précisez une temporisation entre 0 et 60 secondes...");
return false;
}
if(window.document.settings.order[1].checked) {
tabImg = shuffleArray(tabImgSave);
}
else {
tabImg = tabImgSave;
}
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();
}
function launch() {
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');
}
wPopup.document.clear();
wPopup.document.write("<HTML><HEAD><TITLE>Slideshow :
"+(num+1)+"/"+nb_img+"</TITLE></HEAD>");
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++;
if(num == nb_img) num = 0;
if(num == 0 && !window.document.settings.repeat.checked) {
setTimeout("stop()", 1000*window.document.settings.tempo.value);
return false;
}
if(num == 0 && window.document.settings.order[1].checked) {
tabImg = shuffleArray(tabImgSave);
}
next();
}
function stop() {
clearTimeout(myCounter);
wPopup.close();
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;
}
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>
|
 Citez cet article
1. Loan payday
Ecrit par Hezekiah  , le 11-06-2009 20:35
Hi guys. If you would thoroughly know anything, teach it to others.
I am from San and now study English, tell me right I wrote the following sentence: "And hundreds of other videos about film, trailer, movie trailers, movies."
Thank  Hezekiah. |
|
- Les messages comportant des attaques verbales contre les personnes seront supprimés.
- Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
- Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved |
Commentaires (1)
