My client, Terra Nova Pools, wanted to add a new page to their site that would display a looping slide show of before and after pictures of their clients’ pools. I decided to implement this page using this solution that relies on the script.aculo.us javascript library to fade a series of div tags in and out sequentially. The solution worked well with the exception of one small glitch – the screen seemed to jump between slides in FireFox (see comments on page above). I solved this by setting the position attribute for all slide divs to absolute with the following line of css:
div.slide { position: absolute; }
You can see the results at: http://www.terranovapools.com/clients/before-and-after/
I chose this solution because I knew I could rely on the script.aculo.us library to support a wide array of browsers as well as allow me to use web standards to ensure that the page would degrade nicely for users on mobile devices or older browsers. I had previously used Dynamic Drive’s ultimate fade in javascript slide show for the site’s home page, but that did not work at all in Safari and required defensive coding to be able to degrade nicely.