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/ja...mage-scroller/

thank you very much

**vwphillips** · 12-29-2010, 01:03 PM

similar

Code:

<!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

WOW, excellent work phil. You are genius

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/s...ad.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

Code:

<!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

**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/Zo...mSlideShow.htm amazing, you make all of that stuff, cool..

Thread: jQuery Image Scroller

Thread Tools

Search Thread

jQuery Image Scroller

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions