|
JavaScript - Can't Add More Than 5 Photos
Hello
I Don't have any experience with JavaScript, I found this on internet for photo slideshow. My problem can't add more than 5 photo, I appreciate if someone can help me. here Javascript and HTML code Code: 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=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=1;
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()};
<!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 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>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" width="149" height="100" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" width="149" height="100" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" width="149" height="100" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" width="149" height="100" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" width="149" height="100" alt="" /></li>
<li value="5"><img src="thumbs/6.jpg" width="149" height="100" alt="" /></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="slide.js"></script>
</body>
</html>
Similar TutorialsI would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this: Photo / Text about Photo and have both switch after a little while, to the next photo and text. Hope this makes sense. Thanks in advance! Hi All! I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page: http://www.constantcontact.com/index.jsp If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality: 1) Have the ability to hover over each number to change the main photo 2) Have the script advance the main photo on its own 3) Be able to click the main photo when it is selected Any questions, let me know! Thanks, Eric All, I'm trying to have a user upload a photo and then crop the image if they so desire. I want them to be able to select the selected area and then basically use PHP to create the new image. I found a script like this: http://www.dhtmlgoodies.com/index.ht...ipt=image-crop I was just wondering if anyone has any other recommendations or a better way to go about doing this? Thanks in advance for any help. I'm using the classic theme for galleria to create a basic image gallery. http://galleria.io/themes/classic/ The gallery is for a photo retoucher who has some before/after photos that I want to switch in and out with a mouseover. Basically when the user hovers over the main image an unedited version of the image will show, when they mouse out the image will revert back to the original. I'm not sure how to achieve this with galleria. I thought I could target the img tags but that doesn't seem to be working. I'm relevantly inexperienced with javascript so I'm not sure how to target the imgs through galleria or if this can be accomplished in an effective way. (maybe changing the src?) I'm not sure if there is anyone familiar enough with galleria to help me out, but i figured asking can't hurt. Any sort assistance would be greatly appreciated. Hello everyone, I was wanting to know how you add links to Adobe Lightroom gallery photos? Here is the xml gallery code I am trying to add links to: <?xml version="1.0" encoding="UTF-8"?> <simpleviewerGallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="1" stagePadding="40" thumbnailColumns="2" thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="images/" thumbPath="thumb/"> <image> <filename>1.jpg</filename> <caption></caption> </image> <image> <filename>2.jpg</filename> <caption></caption> </image> <image> <filename>3.jpg</filename> <caption></caption> </image> <image> <filename>4.jpg</filename> <caption></caption> </image> <image> <filename>5.jpg</filename> <caption></caption> </image> <image> <filename>6.jpg</filename> <caption></caption> </image> <image> <filename>7.jpg</filename> <caption></caption> </image> <image> <filename>8.jpg</filename> <caption></caption> </image> <image> <filename>9.jpg</filename> <caption></caption> </image> </simpleviewerGallery> I have Adobe Lightroom 3. So far browsing through various tutorials and help notes I have not found a way to do this. However, I am hoping there is in fact a way to do this. Here is the actual flash simpleviewer gallery uploaded I have uploaded for a visual example. http://www.iandmyself.me I would simply like to add links to the photos once they are clicked. |
|||||||