Bonjour à tous,
Je souhaite afficher plusieurs galeries dans mon site.
Je suis tombée sur les astuces de Julien Royer :
Comment lancer plusieurs fonctions au chargement d'une page ?
et
JavaScript : organiser son code en modules
J'ai opté pour la première solution de "Comment lancer plusieurs fonctions au chargement d'une page ?" et ça marche à 90%...En plus, le gros inconvénient est que je dois dupliquer mon fichier et comme j'ai pas mal de galeries ça va faire beaucoup de fichiers.
Du coup je cherche une solution plus efficace.
J'ai bien regardé l'astuce : "JavaScript : organiser son code en modules" et là je suis perdue.
Mon fichier (avec lequel ma galerie donne bien ce que je souhaite) correspond à un mélange des 2 solutions proposées dans l'astuce...
Le problème et que si je les utilise plusieurs fois, une seule galerie fonctionne... Que faire ?
//Le code Js :
// Le code HTML
Merci d'avance.
<edit>Problème de syntaxe dans les balises [ code ]
Modifié par Julien Royer (05 May 2010 - 16:43)
Je souhaite afficher plusieurs galeries dans mon site.
Je suis tombée sur les astuces de Julien Royer :
Comment lancer plusieurs fonctions au chargement d'une page ?
et
JavaScript : organiser son code en modules
J'ai opté pour la première solution de "Comment lancer plusieurs fonctions au chargement d'une page ?" et ça marche à 90%...En plus, le gros inconvénient est que je dois dupliquer mon fichier et comme j'ai pas mal de galeries ça va faire beaucoup de fichiers.
Du coup je cherche une solution plus efficace.
J'ai bien regardé l'astuce : "JavaScript : organiser son code en modules" et là je suis perdue.
Mon fichier (avec lequel ma galerie donne bien ce que je souhaite) correspond à un mélange des 2 solutions proposées dans l'astuce...
Le problème et que si je les utilise plusieurs fois, une seule galerie fonctionne... Que faire ?
//Le code Js :
var slideShow=function(){
var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl,txt,s;
ta=document.getElementById(thumbid);ia=document.getElementById(imgid);
t=ta.getElementsByTagName('li'); ie=document.all?true:false;
st=3; ss=3; ft=10; fs=5; xp,yp=0;
return{
init:function(){
document.onmousemove=this.pos; window.onresize=function(){slideShow.lim()}
ys=this.toppos(ta); ye=ys+ta.offsetHeight;
len=t.length;tar=[];
for(i=0;i<len;i++)
{
var id=t[ i].value; tar[ i]=id;
t[ i].onclick=new Function("slideShow.getimg('"+id+"')");
if(i==0){this.getimg(id)};
}
tarl=tar.length;
},
scrl:function(d){
clearInterval(ta.timer);
var l=(d==-1)?0 [decu]t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth))
ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
},
mv:function(d,l){
var left=ta.style.left.replace('px','');
if(d==1){
if(l-Math.abs(left)<=ss)
{this.cncl(ta.id); ta.style.left='-'+l+'px';}
else
{ta.style.left=left-ss+'px'}
}
else{
if(Math.abs(left)-l<=ss)
{this.cncl(ta.id); ta.style.left=l+'px';}
else
{ta.style.left=parseInt(left)+ss+'px'}
}
},
cncl:function(){clearTimeout(ta.timer)},
getimg:function(id){
if(auto){clearTimeout(ia.timer)}
if(ci!=null){
var ts,tsl,x;
ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
for(x;x<tsl;x++){
if(ci.id!=id){
var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
}
}
if(!document.getElementById(id))
{
var i=document.createElement('img');
ia.appendChild(i);
i.id=id; i.av=0; i.style.opacity=0;
i.style.filter='alpha(opacity=0)';
i.src=imgdir+'/'+id+imgext;
}
else
{
i=document.getElementById(id); clearInterval(i.timer);
}
i.timer=setInterval(function(){slideShow.fdin(i)},fs);
},
nav:function(d){
var c=0;
for(key in tar){
if(tar[key]==ci.id)
{c=key}
}
if(tar[parseInt(c)+d])
{
this.getimg(tar[parseInt(c)+d]);
}
else
{
if(d==1){
this.getimg(tar[0]);
}
else{
this.getimg(tar[tarl-1])}
}
},
auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
fdin:function(i){
if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
},
fdout:function(i){
i.av=i.av-fs; i.style.opacity=i.av/100;
i.style.filter='alpha(opacity='+i.av+')';
if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
},
lim:function(){
var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;
bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
},
pos:function(e){
xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
slideShow.scrl(-1);
}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
slideShow.scrl(1);
}else{slideShow.cncl()}
},
leftpos:function(t){
var l=0;
if(t.offsetParent){
while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.x){l+=t.x}
return l;
},
toppos:function(t){
var p=0;
if(t.offsetParent){
while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.y){p+=t.y}
return p;
}
};
}();
window.onload=function(){slideShow.init(); slideShow.lim()};// Le code HTML
<div class="gauche">
<div class="galerie">
<div id="image">
<a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
<a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div> <!-- fin image -->
</div> <!-- fin galerie-->
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"> <img id="imageThumbs" src="thumbs/1.jpg" alt="" /> </li> <!--title="LA PERGOLA <br/> 97 m2 | Capacité : 120 personnes pour un repas <br/>
Lorem ipsum dictas feugait nusquam est eu, at dicam suscipit quaestio pri. No sententiae adipiscing ius, his unum appellantur no."-->
<li value="2"><img src="thumbs/2.jpg" alt="" /></li> <!--title="l"-->
<li value="3"><img src="thumbs/3.jpg" alt="" /></li> <!--title="la Pergola "-->
<li value="4"><img src="thumbs/4.jpg" alt="" /></li> <!--title="la Pergola <br/> 97 m2 | "-->
<li value="5"><img src="thumbs/5.jpg" alt="" /></li> <!--title="la Pergola <br/> 97 m2 | Capacité "-->
<li value="6"><img src="thumbs/6.jpg" alt="" /></li> <!--title="120 personnes "-->
<li value="7"><img src="thumbs/7.jpg" alt="" /></li> <!--title="pour un repas "-->
<li value="8"><img src="thumbs/8.jpg" alt="" /></li> <!--title=" his unum appellantur no."-->
</ul>
</div> <!--fin thumbsarea-->
</div> <!--fin thumbswrapper-->
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 10;
</script>
<script type="text/javascript" src="js/slide.js"></script>
</div> <!--fin gauche-->Merci d'avance.
<edit>Problème de syntaxe dans les balises [ code ]
Modifié par Julien Royer (05 May 2010 - 16:43)
