jQuery Simple FadeSlideShow

Written by Pascal Bajorat

December 16, 2010

I have just created a small jQuery slideshow as a plugin on jQuery.com published: Simple FadeSlideShow (Preview / Demo)

There's really no shortage of feature-rich jQuery-based slideshows out there, but that's what was bugging me this morning when I was looking for a small flexible slideshow that really doesn't need to do more than fade images with a "fade" effect.

Of course I could have searched for a small slideshow and for sure I would have found exactly what I was looking for, but in that time I might as well have written my own small slideshow, and that's exactly what I did.

The "Simple FadeSlideShow" is characterized by its flexibility and slim size. It is just 2.4kb in size and really does nothing more than fade images or other content (text, videos, etc.) with a fade effect.

So the "Simple FadeSlideShow" is exactly the right script for all those who really don't want more than a simple image / content slider.
The slideshow is extremely easy to integrate into any web page and doesn't even need extra CSS definitions to work. The slideshow script writes all needed CSS definitions into the corresponding elements as InlineStyle by itself. However, as a JavaScript alternative, a prudent web designer should provide a corresponding version via CSS.

As already mentioned, the slideshow is very flexible and can be built in all imaginable variants from the HTML construct; e.g.

as a list:


    <li><img src="images/slide-2.jpg" width="730" height="448" border="0" alt="" /></li>
    <li><img src="images/slide-1.jpg" width="730" height="448" border="0" alt="" /></li>

or with div tags:


<div><img src="images/slide-2.jpg" width="730" height="448" border="0" alt="" /></div>
<div><img src="images/slide-1.jpg" width="730" height="448" border="0" alt="" /></div>

or, or, or ...

The function call is very simple:
$(document).ready(function(){
$('#slideshow').fadeSlideShow({
width:730, // Width of the slideshow
height:448, // Height of the slideshow
speed:'slow', // speed of the transition animation
interval:10000 // Time until a new image is displayed (1000 = 1 second)
});
});

For more information, see the corresponding jQuery project page: plugins.jquery.com/simplefadeslideshow/
A demo is available here: www.simplefadeslideshow.com

Recommended posts

Looking for a reliable and competent marketing & WordPress agency?

Let's tackle your project together!

Bajorat Media has 4,9 from 5 Stars | 3055 Reviews on ProvenExpert.com