JonMifsud
Web Developer & Consultant

Scrolling Images with jQuery WebTicker

29 June 2012

You've probably got a list of images or sponsors that you'd like to rotate somewhere within your website; not exactly a rotating list of text/articles that are provided with the default webTicker sample. No worries it can be done too using the same script.

Note that whilst this article will cover using the jQuery webTicker with images it will not cover all the basics and downloads again, so please refer to the original webTicker project page

The most common issue when anyone tried using the webTicker for loading scrolling lists of images was that the width of the ticker is small, and the whole list seem to collapse with only one or two items ever showing. This issue is related due to the images being loaded after the jQuery.ready() function is called.

This causes the webTicker to assume that the width of each list item is close to 0, thus when computing the total width of the complete list the ticker assumes that this is not any more then 200 pixels. So when the images load the max-width would already be defined making the images collapse within the ticker and none of them would appear.

There are a few ways one can resolve the issue.

  1. If all the images are of the same 'width' one can define the width in CSS on the img/li elements

  2. If the width is different but already known per image each image tag should define the width <img src='/workspace/uploads/symphony-logo-100x19.png' width='100px'/>

  3. Make sure that all the images are loaded before launching the webTicker, either the load function instead of the ready function or another plugin. Note that the load function is not suggested as it does not always fire with images.

The above techniques should resolve your issues with Scrolling images when using the jQuery WebTicker. If you still have issues you can still contact me for personal advice.

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment
hengsopheak

Please help me to create webticker and how to download please because i see it in this site "http://kohsantepheapdaily.com.kh" But i don't know how to create it

Reply

06 Oct 2012 @4:10am

Jon

Hi there, you should be able to follow the original webticker tutorial, or otherwise contact me using the hire link so I can provide more information based on your website/system.

Reply

06 Oct 2012 @11:46am

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.