/* ----- ----- ----- 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 ----- ----- ----- */ function nodePurify(item) { item.style.margin=0; item.style.padding=0; item.style.border=0; item.style.cssFloat='none'; item.style.display='inline-block'; } /* ----- ----- diapoInit ----- ----- Initialise le diaporama (à mettre dans avec les paramètres suivants : img : conteneur (div, a ou autre) mini : liste des identifiant de liens vers les images ['id1','id2'...] delay : temps entre chaque changement de diapo (ms) width : largeur height: hauteur color : couleur de fond attribut: pour miniatures avec fade Over1 : couleur pour miniature over Out1 : couleur pour miniature out Over2 : couleur pour miniature over si affiché Out2 : couleur pour miniature out si affiché */ function diapoInit(id,mini,delay,width,height,color,attribut,over1,out1,over2,out2){ var item=document.getElementById(id); item.diapoNb=mini.length; if(item.diapoNb==0) return; item.diapoOpacityDelay=25; item.diapoOpacityStep=0.1; item.diapoOpacityValue=0; item.diapoTimer=null; item.diapoNum=0; item.diapoMini=mini; item.diapoDelay=delay; item.diapoSetDelay=3*delay; item.Ok=true; item.colorOver1=over1; item.colorOut1=out1; item.colorOver2=over2; item.colorOut2=out2; item.innerHTML=''; /* ----- Gestion du fondu via une div ----- */ var devant_node=document.createElement('div'); nodePurify(devant_node); devant_node.style.width=width+'px'; devant_node.style.height=height+'px'; devant_node.style.background='url('+document.getElementById(item.diapoMini[item.diapoNum]).href+') no-repeat center center #'+color; /* ----- Gestion du fondu via image de fond d'une div ----- */ var derriere_node=document.createElement('div'); nodePurify(derriere_node); derriere_node.style.width=width+'px'; derriere_node.style.height=height+'px'; derriere_node.style.background='url() no-repeat center center #'+color; derriere_node.appendChild(devant_node); item.appendChild(derriere_node); item.diapoDevant=devant_node; item.diapoDiv=derriere_node; /* ----- Initialisation des classes des miniatures ----- */ for(var i=item.diapoNb;i--;) { if(i) { fade_init(item.diapoMini[i],attribut,item.colorOut1,item.colorOut1); } else { fade_init(item.diapoMini[i],attribut,item.colorOut2,item.colorOut2); } document.getElementById(item.diapoMini[i]).over=0; document.getElementById(item.diapoMini[i]).diapoNum=i; eventAddBefore(document.getElementById(item.diapoMini[i]),'onclick','diapoSet("'+id+'",'+i+'); return false'); eventAddAfter(document.getElementById(item.diapoMini[i]),'onmouseout','diapoOut("'+id+'",'+i+')'); eventAddAfter(document.getElementById(item.diapoMini[i]),'onmouseover','diapoOver("'+id+'",'+i+')'); /* ----- Préchargement ---- */ var img = document.createElement('img'); img.src=document.getElementById(item.diapoMini[i]).href; img.style.display='none'; document.getElementsByTagName('body')[0].appendChild(img); } } /* ----- ----- diapoDebutIf ----- ----- temps : temps avant le prochain changement de diapo (ms) */ function diapoDebutIf(id,temps) { var item=document.getElementById(id); if(item.Ok) diapoDebut(id,temps); } /* ----- ----- diapoFinIf ----- ----- Termine le diaporama en assurant que diapoDebutIf n'aura pas d'effet */ function diapoFinIf(id) { var item=document.getElementById(id); item.Ok=false; diapoFin(id); } /* ----- ----- diapoDebut ----- ----- temps : temps avant le prochain changement de diapo (ms) */ function diapoDebut(id,temps) { var item=document.getElementById(id); if(item.diapoTimer) clearTimeout(item.diapoTimer); if(item.diapoNb==0) return; item.diapoTimer=setTimeout('diapoSuiv("'+id+'")',temps); } /* ----- ----- diapoFin ----- ----- */ function diapoFin(id) { var item=document.getElementById(id); if(item.diapoTimer) clearTimeout(item.diapoTimer); item.diapoOpacityValue=0; item.diapoDevant.style.opacity=1; item.diapoDevant.style.filter='alpha(opacity=100)'; } /* ----- ----- diapoOpacity ----- ----- temps : temps pour diapoChange */ function diapoOpacity(id,temps) { var item=document.getElementById(id); if(item.diapoTimer) clearTimeout(item.diapoTimer); if(item.diapoOpacityValue+item.diapoOpacityStep<1) { item.diapoOpacityValue+=item.diapoOpacityStep; item.diapoDevant.style.opacity=item.diapoOpacityValue; item.diapoDevant.style.filter='alpha(opacity='+(100*item.diapoOpacityValue)+')'; item.diapoTimer=setTimeout('diapoOpacity("'+id+'",'+temps+')',item.diapoOpacityDelay); } else { item.diapoOpacityValue=0; item.diapoDevant.style.opacity=1; item.diapoDevant.style.filter='alpha(opacity=100)'; item.diapoTimer=setTimeout('diapoSuiv("'+id+'")',temps); } } /* ----- ----- diapoChange ----- ----- Changement de diapositive n : numéro de la prochaine diapo à afficher temps : temps avant de passer à la suivante */ function diapoChange(id,n,temps) { var item=document.getElementById(id); if(item.diapoTimer) clearTimeout(item.diapoTimer); item.diapoDiv.style.backgroundImage='url('+document.getElementById(item.diapoMini[item.diapoNum]).href+')'; item.diapoOpacityValue=0; item.diapoDevant.style.opacity=item.diapoOpacityValue; item.diapoDevant.style.filter='alpha(opacity='+(100*item.diapoOpacityValue)+')'; if(document.getElementById(item.diapoMini[item.diapoNum]).over) { fade_color(item.diapoMini[item.diapoNum],item.colorOver1); } else { fade_color(item.diapoMini[item.diapoNum],item.colorOut1); } item.diapoNum=n; item.diapoDevant.style.backgroundImage='url('+document.getElementById(item.diapoMini[item.diapoNum]).href+')'; if(document.getElementById(item.diapoMini[item.diapoNum]).over) { fade_color(item.diapoMini[item.diapoNum],item.colorOver2); } else { fade_color(item.diapoMini[item.diapoNum],item.colorOut2); } item.diapoTimer=setTimeout('diapoOpacity("'+id+'",'+temps+')',item.diapoOpacityDelay); } /* ----- ----- diapoSuiv ----- ----- passe à la diapo suivante */ function diapoSuiv(id){ var item=document.getElementById(id); diapoChange(id,(item.diapoNum+1)%item.diapoNb,item.diapoDelay); } /* ----- ----- diapoSet ----- ----- Fixe le numéro de la diapo affichée : n : numéro de diapo à afficher (de 0 à nb de diapos -1) */ function diapoSet(id,n){ var item=document.getElementById(id); diapoChange(id,n,3*item.diapoDelay); } /* ----- ----- diapoOver ----- ----- Evénement onmouseover sur miniatures */ function diapoOver(id,n){ var item=document.getElementById(id); document.getElementById(item.diapoMini[n]).over=1; if(item.diapoNum==n) { fade_set(item.diapoMini[n],item.colorOver2); } else { fade_set(item.diapoMini[n],item.colorOver1); } } /* ----- ----- diapoOut ----- ----- Evénement onmouseout sur miniatures */ function diapoOut(id,n){ var item=document.getElementById(id); document.getElementById(item.diapoMini[n]).over=0; if(item.diapoNum==n) { fade_color(item.diapoMini[n],item.colorOut2); } else { fade_color(item.diapoMini[n],item.colorOut1); } }