Continuous marquee code

Hi,
I'm having a problem with my "slides". I'd like the floating to be continuous, but after the last picture there's an empty part. Would it be possible to make it continuous? 

Code:

<td width="390px" height="140" align="center">
    <marquee behavior="scroll" direction="down" width="390px" height="140" onmouseover="this.stop()" onmouseout="this.start()">
<a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png" scrollamount="5"></a>
<img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png" scrollamount="5">
<a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png" scrollamount="5"></a>
<a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png" scrollamount="5"></a>
  <a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png" scrollamount="5"></a>
<a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png" scrollamount="5"></a>
<a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png" scrollamount="5"></a>
</marquee>
         </td>

Thank you! 

Spoiler:

Hi @Diana,

The only thing I can think of doing would be to switch over to a JS marquee, because the HTML marquee's default behavior is to repeat ONCE the last element has left its view point. It'll still work the same without any problems, of course.

Try replacing your marquee code with this :

Code:

<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<script type="text/javascript">$(window).load(function(){$('.slider').marquee()});</script>

<div style="width:390px;height:140px;overflow:hidden;text-align:center;" class="slider" data-duplicated="true" data-direction="down" data-duration="5000" data-pauseonhover="true">
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png"/></a>
  <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png"/>
  <a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png"/></a>
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png"/></a>
  <a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png"/></a>
  <a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png"/></a>
  <a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png"/></a>
</div>

You can change the speed by editing data-duration ( 5000 = 5 seconds ), and the direction by editing data-direction. There's more information on the options in the repository : https://github.com/aamirafridi/jQuery.Marquee#options

Oh yeah, the data-duplicated attribute is what gets rid of that unsightly gap.

Oo, thank you! I didn't know this code had advanced versions. 
Thanks for the explanation too! One little thing, the "Murd3r" image is too close to the previous "Ruezy" image and then the "Murd3r" image is a bit far too from the "50 credit" image. Any chance to make the space equal there too?

I'm overly satisfied already, because it looks almost perfect and that huge empty gap is gone, so it's fine even if things stay the way they are now.
Thank you!

No problem. I thought it would be possible to remove the gap on the regular <marquee>, but I could find no such method.

You want a space between each image, right ? If so, adding two breaks ( <br/><br/> ) after each image ( except the last ) should work. You don't need one after the last, because the JS marquee automatically adds a 20px gap.

Here it is with the added breaks :

Code:

<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<script type="text/javascript">$(window).load(function(){$('.slider').marquee()});</script>

<div style="width:390px;height:140px;overflow:hidden;text-align:center;" class="slider" data-duplicated="true" data-direction="down" data-duration="5000" data-pauseonhover="true" gap="0">
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png"/></a>
  <br/><br/>
  <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png"/>
  <br/><br/>
  <a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png"/></a>
  <br/><br/>
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png"/></a>
  <br/><br/>
  <a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png"/></a>
  <br/><br/>
  <a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png"/></a>
  <br/><br/>
  <a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png"/></a>
</div>

Oo, it's great now! 
 

You're welcome ^^

Topic archived

Have a great day.