Continuously scrolling horizontal ticker containing images in jQuery?

Question

I would like to do something like this: http://javascript.about.com/library/blcmarquee1.htm

The script I referenced however seems to be a bit laggy (outdated?), so I was wondering if anyone knew of a better solution. (jQuery solutions welcome.)

Answer 1

Just found this — jQuery-driven, and has images. I’m intending to use it for a current project.

http://logicbox.net/jquery/simplyscroll/

UPDATE: I have now used this in production code. The plugin is capable of looping 70+ 150×65px images pretty smoothly - which a number of another plugin I tried similar to this were failing on.

NOTE it reeked havoc with z-index issues in IE 6 / 7 and was not showing up etc. - But this might also have been partly due to my CSS. To anyone having trouble with it not showing up at all in IE check out the standard IE z-index fixes: http://www.google.com/search?q=ie+z+index+issues

LATEST UPDATE: Addition things to consider when implementing plug-ins like these:

• The number of items and type of content to scroll. I found a number that would start to glitch as soon as you had more than say 15 images to scroll.
• I found a number of these plugins that were tied to old versions of jquery
• If scrolling images ARE THEY ALL THE SAME SIZE again a number of the plug-ins I experimented with only worked if all the images were the same size but did not make this clear in the tutorials. I believe then the plugins run then set a string of li tags that are all x wide then calculate the total distance of them all chained together to manage the scrolling.
• Effects - some would continuously scroll others would move one image pause for a second then move another image

I have now also found these two scroller plugins to be very good as well.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

The Silky-Smooth jQuery Marquee and Giva Labs' Marquee

Answer 3

Just a thought. Could you do something like this.

<style type="text/css">

.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}

.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}

.inline-image{
display:inline-block;
}

</style>

<script type="text/javascript">

var img;

function imgScroll(){
 img = $(".inline-image").first();
 img.animate({width:0},2500,'linear',function(){
   img.remove();
   $(".imgholder").append(img);
   imgScroll();
 });

}

$(document).ready(function(){

imgScroll();  

});

</script>

and the html

<div class="imgwindow">
  <div class="imgholder">
   <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
  </div>
</div>