View Full Version : Ultimate Fade-in slideshow (v2.4)

09-29-2010, 01:04 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hi all :) This script works great to me... just a need: is there a way to avoid slideshow stops while onmouseover event?

tnx :)

09-29-2010, 02:04 PM
Add the highlighted:

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
var sObj = this;
this.setting.$wrapperdiv.bind('mouseenter', function(){sObj.setting.ismouseover=false});

Don't miss the added comma (red) after the togglerid value.

09-29-2010, 03:15 PM
:D great John!

Thank you, now it's really what I needed :)

09-30-2010, 01:36 PM
maybe the loading gif is not loaded?

I tried to upload big sized JPGs on a server and it seems to me that the surfer doesn't experience he has to wait for something to appear in the box... the box remains empty while the first image has been downloaded.

I uploaded the loading.gif animation in the same folder as mypage.aspx and fadeslideshow.js...

09-30-2010, 02:50 PM
That's a common problem. To give specific instructions I would need to see the page. However, this topic was covered here*:


The slideshow in that case was for wrapperid: fadeshow4, so substitute your wrapperid for fadeshow 4 in all of it, and of course your images and settings. All references to "Library/loading.gif" (there are quite a few) should be replaced with the location of your loading image.

And, of course the 'from' blocks in that post ("replace for example on people-slideshow.html") and ("and replace:") will be different on your page, the first one might not even be there. In wich case simply add the replacement (with the changes for wrapperid and loading.gif) to your stylesheet. If you have no stylsheet, make one for the 'replacement' styles. These added/replacement styles include a new background color, this is probably not required by your show, or if so should be a different color:

#fadeshow4, #fadeshow4 .gallerylayer {
text-align: left;
width: 825px;
height: 410px;
margin: auto;
background: #b3b3b3 url(Library/loading.gif) center no-repeat!important;
.descpanelfg {
text-align: center;

As I say though, if you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

*Note: The solution in that post is probably a bit of overkill, but perhaps not. It anticipates all sorts of eventualities which will not be apparent upon cursory testing. Most importantly, it works.

10-03-2010, 08:56 PM
:) works since I added the Style information as you provided in this answer!

thank you very much, John!