Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Rotating (Fading) Image Slideshows

In order to give the ability to easily add rotating images to pages in our site, we have chosen to use a script called “Cross-Fade Anything” available from Millstream Software. This script is unobtrusive - meaning that it is linked into the <head> section of every page and requires no additional scripts embedded in the <html> or any scripting knowledge to make it work. You will not need to add or edit any scripts. You will simply need to add your content, structured in the right way, and it will just work.

The Basics

The basic method is this:

  • Create an unordered list (<ul>) on your page and assign it a class of "crossfade".
  • Each list item (<li>) will hold an image that you want to rotate.

That’s it. Adding the "crossfade" class to the list is what instructs the script to treat this list differently than other lists and format it as a slideshow. All but one of the list items will be hidden initially and the script will automatically fade in the subsequent images.

<ul class="crossfade">
        <li><img src="images/photo1.jpg" alt="ASU Administration Building" /></li>
        <li><img src="images/photo2.jpg" alt="Roscoe" /></li>
        <li><img src="images/photo3.jpg" alt="The UC" /></li>
        <li><img src="images/photo4.jpg" alt="Angelo State University Students" /></li>
</ul>

Another Option

One nice feature of this script is that you do not necessarily have to use an image (<img>) tag in the list item. There is another option if you don’t want to embed all of those images directly in the page. This would be especially useful if you had a large number of images to rotate and you don’t want to cause visitors to wait for all of them to download inititally.

In this case, instead of putting the image tag directly in the list item, use an anchor (<a>) that links to the image and give the anchor a class of "loadimage". The "loadimage" class causes the script to treat each link as if it were an actual image while not loading the image until needed. The end result of this method is exactly the same as the previous method.

<ul class="crossfade">
        <li><a href="images/photo1.jpg" class="loadimage">ASU Administration Building</a></li>
        <li><a href="images/photo2.jpg" class="loadimage">Roscoe</a></li>
        <li><a href="images/photo3.jpg" class="loadimage">The UC</a></li>
        <li><a href="images/photo4.jpg" class="loadimage">Angelo State University Students</a></li>
</ul>

Yet Another Option (Preferred)

You are not limited to either one of the above methods. You can also combine them both. You can mix and match actual image tags and anchors at will to get the best of both worlds.

This example embeds the first image, while linking to the rest, but to the end-user, it’s all transparent. They will always only see the rotating photos.

This is the preferred method because it does not cause an unnecessarily long page load time, but even if a user has javascript turned off, or unavailable, they will still see at least the first image.

<ul class="crossfade">
        <li><img src="images/photo1.jpg" alt="ASU Administration Building" /></li>
        <li><a href="images/photo2.jpg" class="loadimage">Roscoe</a></li>
        <li><a href="images/photo3.jpg" class="loadimage">The UC</a></li>
        <li><a href="images/photo4.jpg" class="loadimage">Angelo State University Students</a></li>
</ul>

Slideshow Dimensions

The default slideshow dimensions are set at 460px wide by 235px high. That is the same size as the show on the ASU homepage. In order to add a slideshow without further modifications you will need to to resize your images to match those dimensions. Otherwise, the script will automatically crop them to those dimensions which may not be what you want. If you need a different size show, it will require an additional step. You can add a style attribute to the unordered list (<ul>) in which you define the different width and/or height to be different than the default.

<ul class="crossfade" style="width:300px; height:150px;">
        <li><img src="images/photo1.jpg" alt="ASU Administration Building" /></li>
        <li><a href="images/photo2.jpg" class="loadimage">Roscoe</a></li>
        <li><a href="images/photo3.jpg" class="loadimage">The UC</a></li>
        <li><a href="images/photo4.jpg" class="loadimage">Angelo State University Angelo State University Students</a></li>
</ul>