Slide show

3 mars 2009

Une petite galerie vous permettant de mettre en valeur vos photos, vos images ...

Compatible EI/FF

Script à mettre entre les balises <head> et </head>:

* {margin:0; padding:0} body {font:12px Verdana, Arial, Helvetica, sans-serif; background:#666 url(https://storage.canalblog.com/72/75/415861/36395312.gif)} #gallery {position:relative; width:686px; margin:40px auto; padding:10px; border:6px solid #fff; background:#AAA} #images {border:2px solid #9ac1c9; height:225px; background:#eef5f6; margin-bottom:20px} #image {position:relative; width:672px; height:375px; padding:5px; border:2px solid #666; background:#FFF url(https://storage.canalblog.com/00/60/415861/36395404.gif) center center no-repeat} #image img {position:absolute; top:5px; left:5px} #thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; border:2px solid #666; background:#FFF} #thumbarea {position:relative; overflow:hidden; height:100px; width:682px; } #thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF} #thumbs li {float:left; margin-right:5px; cursor:pointer} .imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer} #previmg {left:0; background:url(https://storage.canalblog.com/54/08/415861/36395352.gif) left center no-repeat; border-left:5px solid #FFF} #previmg:hover {opacity:1; filter:alpha(opacity=100)} #nextimg {right:0; background:url(https://storage.canalblog.com/77/85/415861/36395382.gif) right center no-repeat; border-right:5px solid #FFF} #nextimg:hover {opacity:1; filter:alpha(opacity=100)}

Script à mettre entre les balises <body> et </body>:

// entrez les images qui composent le slide, changez les couleurs et police  <div id="gallery"> <div id="imagearea"> <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> </div> //images petit format 179 px X 100 px <div id="thumbwrapper"> <div id="thumbarea"> <ul id="thumbs"> <li value="1"><img src="adresse de votre image.jpg" width="179" height="100" alt="" /></li> <li value="2"><img src="adresse de votre image.jpg" width="179" height="100" alt="" /></li> <li value="3"><img src="adresse de votre image.jpg" width="179" height="100" alt="" /></li> <li value="4"><img src="adresse de votre image.jpg" width="179" height="100" alt="" /></li> <li value="5"><img src="adresse de votre image.jpg" width="179" height="100" alt="" /></li> </ul> </div> </div> </div> // images grand format 675px X 372 px <script type="text/javascript"> var imgid = 'image'; var imgdir = 'fullsize'; var fullsizetab = new Array(); fullsizetab[1] = "adresse de votre image.jpg"; fullsizetab[2] = "adresse de votre image.jpg"; fullsizetab[3] = "adresse de votre image.jpg"; fullsizetab[4] = "adresse de votre image.jpg"; fullsizetab[5] = "adresse de votre image.jpg"; var imgext = '.jpg'; var thumbid = 'thumbs'; var auto = true; var autodelay = 5; //vitesse de défilement </script> // à partir d'ici ne touchez rien <script type="text/javascript"> var slideShow=function(){var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;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(){setTimeout("slideShow.lim()",500)};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:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10) ta.timer=setInterval(function(){slideShow.mv(d,l)},st);},mv:function(d,l){ta.style.left=ta.style.left||'0px';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=fullsizetab[id]}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()}; </script>

Les images du Slide à copier et à intégrer dans le script:

bg

loading

left

right