To set it up all you need is an HTML block element. All immediate descendants become slides. To start the effect you simply have to give the parent element a class of ‘crossfade’. If FastInit is present it’ll use that to start it automatically, otherwise it’ll add a window.onload event.

Configuration:

To set it up all you need is an HTML block element. All immediate descendants become slides. To start the effect you simply have to give the parent element a class of ‘crossfade’. If FastInit is present it’ll use that to start it automatically, otherwise it’ll add a window.onload event. Alternatively you can do it this way:

new Crossfade('example', {interval : 10});

and it’ll start after a random amount of time between 100 milliseconds and the interval amount.

If you have a child ‘a’ element with a class of ‘loadimage’ the crossfader will replace it with an image tag and load the a.href as the image src. It will also handle pre loading the next image. For example instead of this:

	<li>         <img src="image1.jpg" alt="" />
<div class="caption">Image 1 is pretty</div></li>

You can view this:

	<li>        <a class="loadimage" href="image1.jpg"></a>
<div class="caption">Image 1 is pretty</div></li>

If you have a child ‘a’ element with a class of ‘load’ the crossfader will load the slide content from the a.href via Ajax, a GET request. For example:

    <li>

        <a href="ajax.php&arg=1" class="load"></a>

    </li>

Demo: http://millstream.com.au/upload/code/crossfade/

Download Current Version: http://millstream.com.au/upload/code/crossfade/crossfade.zip

Source: http://millstream.com.au/view/code/crossfade/

Related Listings:

1. AJAX image gallery Script Pyxy-gallery is an AJAX image gallery in PHP and JavaScript,...
2. Gallery Script with XML Parser The original gallery has been taken from http://www.aaronbirchphotography.com and updated...
3. Minishowcase Gallery Script Minishowcase is a small and simple php/javascript online photo gallery,...
4. Photo Gallery : Moo Tools Open Source Photo Gallery Designed with Mootools Javascript Library (E)2...
5. Ajax Photo Gallery The AJAX version of AgileGallery is a free AJAX photo...

Do you like this post?

Email: