19

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.)

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • If you are looking for a more detailed answer pls provide more a more specific question. Such as what content do you want to scroll / horizontal vs vertical, continuous loop vs user controled, how many items, if images how big are they? etc – megaSteve4 Feb 27 '12 at 19:56
  • @megaSteve4 What content shouldn’t matter, but in this case, it’s images. I would like them to scroll horizontally, as the title says (and as in the example I linked to). A continuous loop would do. It should work for content/images of any size. Your answer is the best so far! – Mathias Bynens Feb 27 '12 at 21:25

3 Answers3

34

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/

Llanilek
  • 3,386
  • 5
  • 39
  • 65
megaSteve4
  • 1,760
  • 1
  • 17
  • 24
  • http://www.logicbox.net/jquery/simplyscroll/custom.html does what you showed in http://javascript.about.com/library/blcmarquee1.htm :) – tftd Feb 27 '12 at 02:50
  • +1 for http://caroufredsel.frebsite.nl/ . nice examples. clear site & documentation. – Flion Apr 22 '13 at 14:54
  • +1 for caroufredsel https://github.com/gilbitron/carouFredSel . For anyone interested, here you can find really nice example usage: http://coolcarousels.frebsite.nl/c/9/ – Ekin Jun 19 '15 at 01:56
7

The Silky-Smooth jQuery Marquee and Giva Labs' Marquee

Sampson
  • 265,109
  • 74
  • 539
  • 565
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>
buck54321
  • 847
  • 9
  • 21