/* ----- ----- ----- Free software Foundation - Affero Licence ----- ----- ----- diapo.js - Slideshow with fading Copyright (C) 2008 Thibault Garcia (thibault.garcia@revaweb.com) This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . ----- ----- ----- Free software Foundation - Affero Licence ----- ----- ----- */ var diapoId; /* ----- ----- diapoInit ----- ----- Initialise le diaporama (à mettre dans avec les paramètres suivants : img : identifiant de l'image src : liste des chemins des images ['img1.jpg','img2.jpg'...] mini : liste des identifiant des miniatures ['id1','id2'...] delay : temps entre chaque changement de diapo (ms) on : class de la miniature lorsque l'image est visualisée 'on' on2 : idem en rollover 'on2' off : class de la miniature des autres images 'off' off2 : idem en rollover 'off2' alt : texte alternatif aux images du diaporama title : info bulle sur le diaporama */ function diapoInit(img,src,mini,delay,on,on2,off,off2,alt,title){ diapoId=document.createElement('img'); diapoId.diapoOpacityDelay=25; diapoId.diapoOpacityStep=0.1; diapoId.diapoOpacityValue=0; diapoId.diapoTimer=null; diapoId.diapoNum=0; diapoId.diapoSrc=src; diapoId.diapoMini=mini; diapoId.diapoDelay=delay; diapoId.diapoOn=on; diapoId.diapoOff=off; diapoId.diapoOn2=on2; diapoId.diapoOff2=off2; diapoId.diapoNb=Math.min(src.length,mini.length); diapoId.Ok=true; /* ----- mise en place des éléments de l'image affichée ----- */ document.getElementById(img).src=diapoId.diapoSrc[diapoId.diapoNum]; // document.getElementById(img).onclick=function() { diapoSuiv(); }; /* ----- Gestion du fondu via image de fond d'un span ----- */ var dep_node=document.getElementById(img); var div_node=document.createElement('div'); dep_node.innerHTML=''; diapoId.alt=alt; diapoId.title=title; diapoId.style.margin=0; diapoId.style.padding=0; diapoId.style.border=0; diapoId.style.cssFloat='none'; diapoId.style.display='inline'; div_node.style.background='url() no-repeat center center transparent'; div_node.appendChild(diapoId); dep_node.appendChild(div_node); /* ----- Initialisation des classes des miniatures ----- */ for(var i=diapoId.diapoNb;i--;) { document.getElementById(diapoId.diapoMini[i]).className=off; document.getElementById(diapoId.diapoMini[i]).diapoNum=i; document.getElementById(diapoId.diapoMini[i]).onclick=function() { diapoSet(this.diapoNum); }; document.getElementById(diapoId.diapoMini[i]).onmouseout=function() { diapoOut(this.diapoNum); }; document.getElementById(diapoId.diapoMini[i]).onmouseover=function() { diapoOver(this.diapoNum); }; /* ----- Préchargement ---- */ img = document.createElement('img'); var img_src = document.createAttribute('src'); img_src.nodeValue = diapoId.diapoSrc[i]; img.setAttributeNode(img_src); img.style.display='none'; document.getElementsByTagName('body')[0].appendChild(img); } if(diapoId.diapoNb>0) { diapoId.src = diapoId.diapoSrc[0]; } document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className=on; } /* ----- ----- diapoDebutIf ----- ----- temps : temps avant le prochain changement de diapo (ms) */ function diapoDebutIf(temps) { if(diapoId.Ok) diapoDebut(temps); } /* ----- ----- diapoFinIf ----- ----- Termine le diaporama en assurant que diapoDebutIf n'aura pas d'effet */ function diapoFinIf() { diapoId.Ok=false; diapoFin(); } /* ----- ----- diapoDebut ----- ----- temps : temps avant le prochain changement de diapo (ms) */ function diapoDebut(temps) { if(diapoId.diapoTimer) clearTimeout(diapoId.diapoTimer); diapoId.diapoTimer=setTimeout('diapoSuiv()',temps); } /* ----- ----- diapoFin ----- ----- */ function diapoFin() { if(diapoId.diapoTimer) clearTimeout(diapoId.diapoTimer); diapoId.diapoOpacityValue=0; diapoId.style.opacity=1; diapoId.style.filter='alpha(opacity=100)'; } /* ----- ----- diapoOpacity ----- ----- temps : temps pour diapoChange */ function diapoOpacity(temps) { if(diapoId.diapoTimer) clearTimeout(diapoId.diapoTimer); diapoId.src=diapoId.diapoSrc[diapoId.diapoNum]; if(diapoId.diapoOpacityValue+diapoId.diapoOpacityStep<1) { diapoId.diapoOpacityValue+=diapoId.diapoOpacityStep; diapoId.style.opacity=diapoId.diapoOpacityValue; diapoId.style.filter='alpha(opacity='+(100*diapoId.diapoOpacityValue)+')'; diapoId.diapoTimer=setTimeout('diapoOpacity('+temps+')',diapoId.diapoOpacityDelay); } else { diapoId.diapoOpacityValue=0; diapoId.style.opacity=1; diapoId.style.filter='alpha(opacity=100)'; diapoId.diapoTimer=setTimeout('diapoSuiv()',temps); } } /* ----- ----- diapoChange ----- ----- Changement de diapositive n : numéro de la prochaine diapo à afficher temps : temps avant de passer à la suivante */ function diapoChange(n,temps) { if(diapoId.diapoTimer) clearTimeout(diapoId.diapoTimer); diapoId.parentNode.style.backgroundImage='url('+diapoId.diapoSrc[diapoId.diapoNum]+')'; diapoId.diapoOpacityValue=0; diapoId.style.opacity=diapoId.diapoOpacityValue; if(document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className==diapoId.diapoOn2) { document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className=diapoId.diapoOff2; } else { document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className=diapoId.diapoOff; } diapoId.diapoNum=n; if(document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className==diapoId.diapoOff2) { document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className=diapoId.diapoOn2; } else { document.getElementById(diapoId.diapoMini[diapoId.diapoNum]).className=diapoId.diapoOn; } diapoId.diapoTimer=setTimeout('diapoOpacity('+temps+')',diapoId.diapoOpacityDelay); } /* ----- ----- diapoSuiv ----- ----- passe à la diapo suivante */ function diapoSuiv(){ diapoChange((diapoId.diapoNum+1)%diapoId.diapoNb,diapoId.diapoDelay); } /* ----- ----- diapoSet ----- ----- Fixe le numéro de la diapo affiché : n : numéro de diapo à afficher (de 0 à nb de diapos -1) */ function diapoSet(n){ diapoChange(n,3*diapoId.diapoDelay); } /* ----- ----- diapoOut ----- ----- Evénement onmouseout sur miniatures */ function diapoOut(n){ if(diapoId.diapoNum==n) { document.getElementById(diapoId.diapoMini[n]).className=diapoId.diapoOn; } else { document.getElementById(diapoId.diapoMini[n]).className=diapoId.diapoOff; } } /* ----- ----- diapoOver ----- ----- Evénement onmouseover sur miniatures */ function diapoOver(n){ if(diapoId.diapoNum==n) { document.getElementById(diapoId.diapoMini[n]).className=diapoId.diapoOn2; } else { document.getElementById(diapoId.diapoMini[n]).className=diapoId.diapoOff2; } }