Ultimate Fade-in slideshow (v2.1)

[wiggy298]

First thank you for this very simple script. I am not that html savvy and I have been searching for something like this that did not require flash.Was very glad I came across this script.

On to my question. I am using the following code below. Is there a way to set a static image before this script kicks in? What I mean is that when I load my homepage I have this blank space where the script loads the image. The script does kick in, but just wondering what I could do to either make the script load faster or have a flat image in it's place before hand.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [512, 444], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.mydomain.com/images/main_homepage2.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "FREE SHIPPING STORE WIDE"],
["http://www.mydomain.com/images/main_homepage1.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 2"],
["http://www.mydomain.com/images/main_homepage2.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 3"],
["http://www.mydomain.com/images/main_homepage1.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 3"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>

<div id="fadeshow1"></div>



Thank you in advance

[jscheuer1]

To get it to kick in faster, optimize your images in the show, even any other images on the page, this will reduce load time.

It is possible as well to superimpose an image and/or other content over the show and to dismiss that once the show has initialized. You would need to have a basic to intermediate knowledge of HTML and css style to palce content over the show. To dismiss it on init, add this code (highlighted) to the show's definition (don't miss the added comma after togglerid: ""):

 . . . s/main_homepage1.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 3"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){jQuery('#cover').css('display', 'none');}
})

where 'cover' would be a unique id for the element covering the show prior to initialization. If you need help constructing and positioning such an element, let me know.

[wiggy298]

Thank you for the info. So if I wante to use the following image

http://www.mydomain.com/images/main_homepage2.gif with the image size being 512 x 444, how would I show this?

Thank you again and I appoligize for piggy backing off another post.

[jscheuer1]

<div style="z-index: 10000; position: relative; width: 512px height: 444px;;">
<img id="cover" style="z-index: 10000; position: absolute; top: 0; left: 0; width: 512px height: 444px;;" src="http://www.mydomain.com/images/main_homepage2.gif" alt="">
<div id="fadeshow1"></div>
</div>

Notice how the added division wraps around the fadesshow division, and the image is in the wrap around division. Make sure there is no other element with the id 'cover' on the page.

[wiggy298]

Thank you very much. The load appearance looks much more cleaner now. keep it mind I set both positions to relative.

By using <img id="cover" style="z-index: 10000; position: absolute; the picture would appear underneath the main banner.

Thank you very much.


If anybody needs the full code for this. It is as follows

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="fadeslideshow.js" type="text/javascript">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script><script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [512, 444], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.mydomain.com/images/main_homepage2.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "FREE SHIPPING STORE WIDE"],
["http://www.mydomain.com/images/main_homepage1.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 2"],
["http://www.mydomain.com/images/main_homepage2.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 3"],
["http://www.mydomain.com/images/main_homepage1.gif", "http://www.mydomain.com/c-440-lighting-electrical.aspx","_self", "Reading Message Number 3"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){jQuery('#cover').css('display', 'none');}
})


</script> <div id="fadeshow1"></div><div style="Z-INDEX: 10000; POSITION: relative"><img alt="" id="cover" style="Z-INDEX: 10000; LEFT: 0px; POSITION: relative; TOP: 0px" src="http://www.mydomain.com/images/main_homepage2.gif" /> <div id="fadeshow1"></div></div>

[jscheuer1]

As long as you're happy, but what I wrote should work. I see you didn't wrap the show, that may have something to do with it, but I believe there are other issues. Anyways, again - if you're happy, I'm happy.