Simple, Accessible Image Scroller
July 8th, 2006
An image scroller widget is popular on many "Web 2.0" sites; especially photostreams on blogs. More often than not, these scroller widgets will use huge Javascript libraries such as Prototype and Scriptaculous which have a big cost in terms of weight. And of course, people these days have to over-complicate everything.
James Baker pointed to people who were using the marquee tag to achieve an image scroller effect on Myspace. I’m sure we all remember the days when people would stick huge blocks of marqueed text on Geocities so <marquee> has a bad reputation but the marquee tag is very, very useful for an image scrolling widget.
How it works
The marquee has an onmouseover event which causes it to stop scrolling and a onmouseout event causing it to continue scrolling. This makes it easier to target a specific image and to click on it. You can configure the scrolling speed by changing the scrollAmount attribute and the direction of the scrolling using the direction attribute.
In addition, I’ve applied a little bit of CSS to make it look better and to add a transparency/hover effect to the images. I also introduced a bit of Javascript to replace a div with a marquee on page load (this worked around an issue with Firefox which drew the marquee before all images loaded).
I’m pretty sure if we introduced a little more Javascript we could make the scroller have buttons to spin left/right, to spin a little bit and stop, etc.
Why use Marquee?
- It’s simple - just three lines of Javascript instead of hundreds.
- It is accessible - all your image links are real images which can have alternate texts, etc.
- It can work when Javascript is disabled (the demo doesn’t)
- It’s cross platform - tested in Internet Explorer, Firefox and Opera.
- It’s dead easy to customize.
- It’s really easy to integrate it with scripts such as Lightbox, Reflection.js.
- Doesn’t require Flash, Java or any plugins.
Feel free to use the marquee scroller code; it’s made it public domain.
- Javascript , Web 2.0 , Web Development
- Comments(7)
Hi:
That’s a nice technique. It works in Safari 2.0.4 (Mac OS-X 10.4.7) — however, it has two slight problems. First, it flashes all the pictures to the browser window at once, refreshes, and then starts the marquee. Second, regardless of the number of pictures, when it reaches the end of the sequence, there is a three picture gap between the last picture and starting the sequence again.
Any ideas as to how to fix those problems?
Thanks.
tedd
Hi,
I’m not sure if they can be fixed. It might be possible with a few hacks and further work but I think it then may move beyond the realm of simple. Feel free to develop the idea further if you wish.
Thanx !!
I had trouble finding a scroller that was working both for IE and FF.
And somehow the ones that worked in FF, didn’t work in the page with scripts and div’s I had…
This is the perfect basis to work on.
I added some transparent fade layers on both sides, and it looks just perfect
Is there any way to have the marquee of images start with a full view of images and then scroll non-stop? In other words, I don’t want a blank space at any point in time.
also having trouble finding any html attributes for the marquee scroll behavior that will close the gap between image scrolls, any success in this feild please give me a shout at wtfmancmon@yahoo.com
Hi ,
We have problem with this marquee based scroll, bec its not working good in Firefox browser ,is any body there who can give me solution for that
Thanks
shubham
http://www.webtrixtech.com
Nice, where is the download link?