Slideshow foto plus

**manu1087** · 26-02-2011, 18:09

Ciao ho trovato un programma per creare Slideshow chiamato Slideshow foto plus nel documento style.css c'è questo:

(Funziona benissimo, ma vorrei le thumbs a sinistra e non sotto l'immagine come sono qui)
Ho provato a fare qualche modifica a questo documento, ma l'unica cosa che non sono riuscito a modificare sono le thumbs
Mi sapete indicare cosa devo modificare nel documento o se devo modificare altri documenti che erano allegati e non questo?

* {margin:0; padding:0}
body {font:12px Verdana, Arial, Helvetica, sans-serif; background:lightblue;}
#gallery {position:relative; width:95%; height: 600; margin:15px ; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:0px solid #9ac1c9; height:#eef5f6px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:50%; height:375px; padding:5px; border:0px solid #666; background:#AAA url(images/loading.gif) center center no-repeat}
#image img {position:absolute; width:100%; height:130%; top:5px; left:0px}
#thumbwrapper {margin-top:130px; padding:5px 0; width:100%; height:500; border:0px solid #666; background:blue}
#thumbarea {position:relative; overflow:hidden; height:100px; width:100%; }
#thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid green}
#thumbs li {float:left; margin-right:5px; cursor

ointer}
.imgnav {position:absolute; height:375px; width:900px; z-index:100; height:375px; width:900px; z-index:100; outline:none; cursor

ointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:0px solid white}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:0px solid red}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

**manu1087** · 26-02-2011, 18:22

con questo programma sono riuscito a far scorrere le thumbs (immagini cliccabili in miniatura) verso destra e sono sotto l'immagine grande.
Vorrei spostarle a sinistra dell'immagine grande e che scorrano verso il basso e non verso destra (in fila ma verticalmente, ora le piccole immagini sono poste orizzontalmente e scorrono verso destra).
Ritengo che quello che si deve modificare sia nelle righe che ho postato, se vi servono anche gli altri documenti che erano allegati ve li posso postare.
Ciao e Grazie

**manu1087** · 26-02-2011, 18:28

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<div id="gallery">
<div id="imagearea">
<div id="image">

</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1">[img]thumbs/1.jpg[/img]
<li value="2">[img]thumbs/2.jpg[/img]
<li value="3">[img]thumbs/3.jpg[/img]
<li value="4">[img]thumbs/4.jpg[/img]
<li value="5">[img]thumbs/5.jpg[/img]
<li value="6">[img]thumbs/6.jpg[/img]
<li value="7">[img]thumbs/7.jpg[/img]
<li value="8">[img]thumbs/8.jpg[/img][/list]
</div>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 4;
</script>
<script type="text/javascript" src="slide.js"></script>
</body>
</html>

**manu1087** · 26-02-2011, 18:31

packed.js

var slideShow=function(){var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,c i,t,tar,tarl;ta=document.getElementById(thumbid);i a=document.getElementById(imgid);t=ta.getElementsB yTagName('li');ie=document.all?true:false;st=3;ss= 3;ft=10;fs=5;xp,yp=0;return{init:function(){docume nt.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){th is.getimg(id)}}
tarl=tar.length;},scrl:function(d){clearInterval(t a.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.lef t||'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:func tion(){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(functi on(){slideShow.fdout(o)},fs)}}}if(!document.getEle mentById(id)){var i=document.createElement('img');ia.appendChild(i); i.id=id;i.av=0;i.style.opacity=0;i.style.filter='a lpha(opacity=0)';i.src=imgdir+'/'+id+imgext;}else{i=document.getElementById(id);cl earInterval(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:functio n(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.tim er);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.p arentNode.removeChild(i)}}},lim:function(){var taw,taa,len;taw=ta.parentNode.offsetWidth;taa=taw/4;bxs=slideShow.leftpos(ta);bxe=bxs+taa;fxe=bxs+ta w;fxs=fxe-taa;},pos:function(e){xp=ie?event.clientX+document .documentElement.scrollLeft:e.pageX;yp=ie?event.cl ientY+document.documentElement.scrollTop:e.pageY;i f(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()};

**manu1087** · 26-02-2011, 18:33

questo è l'ultimo documento

slide.js

var slideShow=function(){
var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,c i,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.l im()",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=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(){sl ideShow.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.scrol lLeft:e.pageX;
yp=ie?event.clientY+document.documentElement.scrol lTop: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()};

**Mich_** · 28-02-2011, 09:46

Se prima di postare avessi letto il regolamento, avresti anche capito come inserire il codice.
Questo post e` illeggibile: preferisco chiuderlo e invitarti a postare in modo umano.

Tieni anche presente che hai postato molto codice JS (che non e` competenza di questo forum). E comunque hai postato codice offuscato: se vuoi aiuto, ti conviene postare codice in chiaro, altrimenti e` difficile che qualcuno si prenda la briga di trasformare il tuo codice per metterci mano.

Discussione: Slideshow foto plus

Strumenti discussione

Ricerca discussione

Visualizza

Slideshow foto plus

Permessi di invio