Scriptaculous Slideshow Flickering Solution

by Dev Duff on November 17, 2009

Scriptaculous slideshow tutorial

If you are using Scriptaculous slideshow on your website and finding issues like Scriptaculous slideshow flickering then this article will help you get rid of the flicker and your slideshow will look much better. Since I use firefox 3.5, I did not notice any flicker, however, when I tested my slideshow with different browsers, I noticed a flicker. There is an interesting reason to why the slideshow flickers.

Why does my Scriptaculous slideshow flicker?

The main reason for flickering is the way div tags are used in the slideshow images. When the browser reads the div tag for first image, it reads the width and height attributes. As soon as the div tag closes, the browser adjusts itself accordingly since it can’t find width or height specifics. Thereafter, while reading the second image’s div tag, it reads the width and height again and re-adjusts itself to display the image properly. This causes quick width and height changes, causing a continuous on-off behavior. All that reflects on the client-side and the continuous on-off behavior causes flickering.

XSitepro

Visual Demonstration

This is how the browser reads the slideshow images and adjusts itself according to the changing attributes. For a very little fraction of time browser finds no attributes between images in your slideshow, that causes the slideshow flickering.

<image1 div tag>
Time (Causing browser to re-adjust attributes)
<image2 div tag> (Load image attributes)
Time (Causing browser to re-adjust attributes)
<image3 div tag> (Load image attributes)
Time (Causing browser to re-adjust attributes)
<image4 div tag> (Load image attributes)

Solution to Slideshow Flickering

The best way to overcome this issue is by providing a wrapper div tag with same width and height as of the images, around all images in your slideshow. Providing a wrapper with same width, height and other attributes will avoid the browser adjusting the attributes again and over. The slideshow will be much smooth and it will look great on the client-side.

Example Code

Let’s say, this is the code for your slideshow:

<div id="slide1" class="slide"><div><a href='link1.html'>
<img border='0' src='images/im1.jpg' /></a></div></div>

<div id="slide2" class="slide"><div><a href='link2.html'>
<img border='0' src='images/im2.jpg' /></a></div></div>

<div id="slide3" class="slide"><div><a href='link3.html'>
<img border='0' src='images/im3.jpg' /></a></div></div>

Write another div class in your css file that has same width, height and other attributes as of your images class and use it this way ..

<div class="slider">
<div id="slide1" class="slide"><div><a href='link1.html'>
<img border='0' src='images/im1.jpg' /></a></div></div>

<div id="slide2" class="slide"><div><a href='link2.html'>
<img border='0' src='images/im2.jpg' /></a></div></div>

<div id="slide3" class="slide"><div><a href='link3.html'>
<img border='0' src='images/im3.jpg' /></a></div></div>
</div>

Results of changed code

Using this method, browsers will understand that all images are part of the main div tag slider which has the same width and height. So, whenever the browser reads between the images, it will find the same attributes (width, height, etc) as of the image attributes. This will prevent sudden change of width and height attributes. Hence, a cleaner code, better slideshow display.

Information

This article is in continuation to the previous tutorial I wrote on Scriptaculous slideshow for blogs and websites posted in June 2009. Scriptaculous slideshow is a powerful, amazing and web standards compliant slideshow script available at script.aculo.us and most of all, it is free. Please support the designers and programmers who worked hard to bring this great script to you for free. A small donation will always encourage and motivate programmers to keep working on such wonderful scripts. You can also purchase Scriptaculous slideshow scripting ebooks that can be extremely helpful in tweaking the script according to your needs for your blog or website.

Prototype and Script.aculo.us Book Practical Prototype and Script.aculo.us Book

Share your thoughts

If you found this article useful, please consider sharing your thoughts. If nothing, even a Hi will do. You know its kinda gets boring working alone on the computer whole day long. Your comments encourage me to find and share useful information on this blog. Thankyou for reading this wordpress tutorial and hope to see you back in future. Have fun with your Scriptaculous slideshow!

This post was written by...

– who has written 305 posts on Dev Duff.

Contact the author

{ 3 comments… read them below or add one }

Rachel

Thanks a bunch Dev!
I have been going nuts over this flickering issue and have spent hours fixing it when the solution was so simple. Thankyou for the help.
Rachel.

Reply

chris

This doesn’t match to the tutorial of your Scriptaculous slideshow for blogs and websites; the images there were wrapped into an unordered list (). In this Solution you use -Layers for each image which is very different and has no reference to the CSS-File… so what ist the core of the flickering?

It is the time, which the images needs to load in any browser and depends on your internet speed. what is needed is a script, which detects whether all images are loaded or a script which preloads all images before showing it!

Reply

Dev Duff

Hello Chris,
Sorry if I kept you waiting.

I would refer you to these articles, I’m sure you will find these articles helpful:
http://snippets.dzone.com/posts/show/1068
http://www.phpbuilder.com/board/showthread.php?t=10359000
Regards,
Dev.

Reply

Leave a Comment

Previous post:

Next post: