Home 
Image Slide shows Here
|
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
 Other Sections
Compatibility
|
|
Firefox1+ IE5+ Opera 7+
Ultimate Fade-in slideshow (v1.51) Author:
Note: July 24th, 07': Updated to v1.51, which fixes transitional effect not working in Safari 3.x. Thanks to jscheuer1 for his help. Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features. They are the ability to display multiple slideshows on the same page, optional linking and link targeting for certain images, and the ability to randomize the display order of the images. You can also set the slideshow to pause when the mouse moves over it. Each instance of a fade in slideshow on the page is completely independent of the other, meaning the aforementioned features can be customized for each slideshow. The cool fading effect works in IE, NS6+/ Firefox, and Safari 2, while all other browsers such as Opera 8 will simply skip the effect but continue to display the images. Rock on with the ultimate fade in slideshow script! Demo (first slideshow pauses onMouseover): Directions Step 1: Insert the following script to the HEAD section of your page: Configure the array "fadeimages[]" to reference the images you want to be displayed. Step 2: All that's left now is to insert the below code into the BODY of your page where you want the slideshow(s) to be displayed. The code above shows how to invoke two separate fade in slideshows, each with varying parameters. Here's an explanation of how to invoke function "fadeshow()": new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth,
delay, pause, optionalRandomOrder)
As mentioned, you can invoke "fadeshow()" multiple times on the same page to display multiple fade in slideshows. Fade away we say! Finally, some people have asked "How do I center the slideshow? Since IE and Firefox/Opera behaves differently when it comes to positioning a relatively positioned element, you'll need to use some Frankenstein CSS: <style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}
.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>
<body>
<div class="centerdiv">
CODE OF STEP 2 HERE
</div>
</body>
As you can see, to center a particular slideshow, wrap the code of Step 2 for that slideshow in a special DIV. Do this for each slideshow that you wish centered. The stylesheet obviously should go in the HEAD section of your page. Recent Change Log
|
