PDA

View Full Version : jQuery Image Scroller



davelf
12-29-2010, 08:08 AM
Hi, i have problem editing this script. I find a lot of question about the same problem too, but i can't find the way to solve this.

My Problem:
How do i make it so that the images continously scroll so that there isnt a big gap between the start and the end,

I find this : http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/


thank you very much:)

vwphillips
12-29-2010, 01:03 PM
similar


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:relative;left:300px;top:20px;width:600px;height:180px;background-Color:black;border:solid red 1px;
}

.slider {
position:absolute;left:0px;top:0px;width:870px;height:170px;border:solid red 0px;
}

#panel {
position:absolute;z-Index:2;left:0px;top:0px;width:100%;height:30px;border-Bottom:solid #3399CC 1px;text-Align:center;
}

#panel DIV{
z-Index:2;left:0px;top:0px;width:100px;height:30px;text-Align:center;
}

#panel UL{
position:absolute;left:100px;top:10px;color:white;margin-Top:0px;list-Style:none;
}

#panel UL LI{
text-Align:center;
float:left;
width:100px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
<div class="slider" >
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/apple.jpg" alt="img" title="Image 1"/>
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/firefox.jpg" alt="img" title="Image 1" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/jquery.jpg" alt="img" title="Image 2" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/twitter.jpg" alt="img" title="Image 3" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/jqueryui.jpg" alt="img" title="Image 4" />
</div>
<div id="panel" >
<ul>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="img" /></li>
<li><div></div></li>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="img" /></li>
</ul>

</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function Carousel(o){
var obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],ssz=slide.offsetWidth,imgs;
obj.style.overflow='hidden';
this.slides=[[slide]];
this.max=obj.offsetWidth;
this.nu=Math.max(Math.ceil(this.max/ssz),3);
for (var z0=0;z0<this.nu;z0++){
this.slides[z0]=this.slides[z0]||[];
this.slides[z0][0]=z0>0?slide.cloneNode(true):this.slides[z0][0];
this.slides[z0][1]=(ssz*z0)-ssz;
this.slides[z0][0].style.left=(ssz*z0)-ssz+'px';
obj.appendChild(this.slides[z0][0]);
imgs=this.slides[z0][0].getElementsByTagName('IMG');
for (var z0a=0;z0a<imgs.length;z0a++){
this.addevt(imgs[z0a],'mouseover','title',imgs[z0a]);
}
}
this.ssz=ssz;
this.to=null;
this.ud=o.Direction||-2;
this.addevt(obj,'mouseover','auto',false);
this.addevt(obj,'mouseout','auto',true);
this.panel=document.getElementById(o.PanelID);
this.panel.style.visibility='hidden';
imgs=this.panel.getElementsByTagName('IMG');
this.addevt(imgs[0],'mouseup','direction',-1);
this.addevt(imgs[1],'mouseup','direction',1);
this.text=this.panel.getElementsByTagName('DIV')[0];
this.rotate();
}

Carousel.prototype={

rotate:function(){
for (var oop=this,z0=0;z0<this.nu;z0++){
this.slides[z0][0].style.left=(this.slides[z0][1]+=this.ud)+'px';
if ((this.ud<0&&this.slides[z0][1]<-this.ssz)||(this.ud>0&&this.slides[z0][1]>this.max)){
this.slides[z0][1]+=this.ssz*this.nu*(this.ud<0?1:-1);
}
}
this.to=setTimeout(function(){ oop.rotate(); },50);
},

auto:function(p){
clearTimeout(this.to);
this.panel.style.visibility=p?'hidden':'visible';
if (p){
var oop=this;
this.to=setTimeout(function(){ oop.text.innerHTML=''; oop.rotate(); },150);
}
},

direction:function(p){
this.ud=Math.abs(this.ud)*p;
},

title:function(img){
this.text.innerHTML=img.title||'';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}


}



new Carousel({
ID:'tst',
Direction:-3,
PanelID:'panel'
});

/*]]>*/
</script>
</body>

</html>

davelf
12-29-2010, 01:15 PM
:eek:WOW, excellent work phil. You are genius:D

I try to find the right script a whole day.

Thank you so much.



and by the way i have this other problem, in my other thread (http://www.dynamicdrive.com/forums/showthread.php?t=59709)

if you have a free time to look at that problem, and have any advices about that please don't hesitate to tell me, Thanks man.

vwphillips
12-29-2010, 02:52 PM
similar


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:relative;left:300px;top:20px;width:600px;height:180px;background-Color:black;border:solid red 1px;
}

.slider {
position:absolute;left:0px;top:0px;width:870px;height:170px;border:solid red 0px;
}

#panel {
position:absolute;z-Index:2;left:0px;top:0px;width:100%;height:30px;border-Bottom:solid #3399CC 1px;text-Align:center;
}

#panel DIV{
z-Index:2;left:0px;top:0px;width:100px;height:30px;text-Align:center;
}

#panel UL{
position:absolute;left:100px;top:10px;color:white;margin-Top:0px;list-Style:none;
}

#panel UL LI{
text-Align:center;
float:left;
width:100px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
<div class="slider" >
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/apple.jpg" alt="img" title="Image 1"/>
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/firefox.jpg" alt="img" title="Image 1" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/jquery.jpg" alt="img" title="Image 2" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/twitter.jpg" alt="img" title="Image 3" />
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/logos/jqueryui.jpg" alt="img" title="Image 4" />
</div>
<div id="panel" >
<ul>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="img" /></li>
<li><div></div></li>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="img" /></li>
</ul>

</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function Carousel(o){
var obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],ssz=slide.offsetWidth,imgs;
obj.style.overflow='hidden';
this.slides=[[slide]];
this.max=obj.offsetWidth;
this.nu=Math.max(Math.ceil(this.max/ssz),3);
for (var z0=0;z0<this.nu;z0++){
this.slides[z0]=this.slides[z0]||[];
this.slides[z0][0]=z0>0?slide.cloneNode(true):this.slides[z0][0];
this.slides[z0][1]=(ssz*z0)-ssz;
this.slides[z0][0].style.left=(ssz*z0)-ssz+'px';
obj.appendChild(this.slides[z0][0]);
imgs=this.slides[z0][0].getElementsByTagName('IMG');
for (var z0a=0;z0a<imgs.length;z0a++){
this.addevt(imgs[z0a],'mouseover','title',imgs[z0a]);
}
}
this.ssz=ssz;
this.to=null;
this.ud=o.Direction||-2;
this.addevt(obj,'mouseover','auto',false);
this.addevt(obj,'mouseout','auto',true);
this.panel=document.getElementById(o.PanelID);
this.panel.style.visibility='hidden';
imgs=this.panel.getElementsByTagName('IMG');
this.addevt(imgs[0],'mouseup','direction',-1);
this.addevt(imgs[1],'mouseup','direction',1);
this.text=this.panel.getElementsByTagName('DIV')[0];
this.rotate();
}

Carousel.prototype={

rotate:function(){
for (var oop=this,z0=0;z0<this.nu;z0++){
this.slides[z0][0].style.left=(this.slides[z0][1]+=this.ud)+'px';
if ((this.ud<0&&this.slides[z0][1]<-this.ssz)||(this.ud>0&&this.slides[z0][1]>this.max)){
this.slides[z0][1]+=this.ssz*this.nu*(this.ud<0?1:-1);
}
}
this.to=setTimeout(function(){ oop.rotate(); },50);
},

auto:function(p){
clearTimeout(this.to);
this.panel.style.visibility=p?'hidden':'visible';
if (p){
var oop=this;
this.to=setTimeout(function(){ oop.text.innerHTML=''; oop.rotate(); },150);
}
},

direction:function(p){
this.ud=Math.abs(this.ud)*p;
},

title:function(img){
this.text.innerHTML=img.title||'';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}


}



new Carousel({
ID:'tst',
Direction:-3,
PanelID:'panel'
});

/*]]>*/
</script>
</body>

</html>

vwphillips
12-29-2010, 02:53 PM
or

http://www.vicsjavascripts.org.uk/Carousel/Carousel.htm

vwphillips
12-29-2010, 04:22 PM
cant help with http://www.dynamicdrive.com/forums/s...ad.php?t=59709

but see post #5 of this thread

davelf
12-30-2010, 02:47 AM
the that you gave, not work:D

vwphillips
12-30-2010, 09:38 AM
I have retested the coce of post #5 with IE, Firefox, Chrome and Safari

and it works for me

it needs the external script

<script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script>


featured on

http://www.vicsjavascripts.org.uk/Animate/Animate.htm

davelf
01-03-2011, 03:05 AM
ooo, ya my mistakes, sorry i click the wrong link, i click this one http://www.dynamicdrive.com/forums/s...ad.php?t=59709 instead of posting #5, hehe.

Wow this is http://www.vicsjavascripts.org.uk/ZoomSlideShow/ZoomSlideShow.htm amazing, you make all of that stuff, cool..