Bajorat Media
jQuery Simple FadeSlideShow
I just released a small jQuery slideshow as a plugin on jQuery.com: Simple FadeSlideShow (Preview/Demo). The “Simple FadeSlideShow” is characterized by its…
I just created a small jQuery slideshow as a plugin jQuery.com published: Simple FadeSlideShow (Preview/Demo) There’s really no shortage of jQuery-based slideshows with a wide range of functions, but that’s exactly what bothered me this morning when I was looking for a small, flexible slideshow that really doesn’t have to do anything more than fade images with a “fade” effect. Of course I could have searched for a little slideshow and I certainly would have found exactly what I was looking for, but in that time I might as well have written my own little 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 in terms of functionality it really doesn’t do more than fade images or other content (text, videos, etc.) with a fade effect. The “Simple FadeSlideShow” is exactly the right script for everyone who really doesn’t want more than a simple image/content slider. The slideshow is extremely easy to integrate into any website and doesn’t even require any extra CSS definitions to work. The slideshow script automatically writes all the required CSS definitions into the corresponding elements as an inline style. 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 constructed in all conceivable variations based on the HTML construct; e.g. as a list: <ul id="slideshow"> <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> </ul> or with div tags: <div id="slideshow"> <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> </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', // Transition animation speed interval:10000 // Time until a new image is shown (1000 = 1 second) }); }); Further information can be found on the corresponding jQuery project page: plugins.jquery.com/simplefadeslideshow/ There is a demo here: www.simplefadeslideshow.com