PDA

View Full Version : Resolved Ultimate Fade-in slideshow "loading.gif" problem



seemoo
01-25-2010, 02:33 AM
Hi,

I'm updating my website and added the Ultimate Fade-in slideshow (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm). I really like it and it works great so far.

The only thing that I can't get to work is the "loading.gif" image in the fadeslides.js file. Here is the part I'm talking about:


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}


I downloaded the loading.gif and placed it in the same folder as the fadeslide.js file, but for some reason the image never gets displayed as the larger slides are being loaded. The result is an empty space for quite a while, as my slideshow is fairly large.

Anybody else run into this? How can I get this to work properly?

Thanks a lot for your help,

simon

Nile
01-25-2010, 03:10 AM
Hmm =/ Is the restore.png and x.png working okay?

seemoo
01-25-2010, 03:53 AM
Hi Nile,

The image caption slider that you helped me out with last week, works great. I'm really happy with how it looks now. Thanks again!

I don't know if these two images work, as I don't use them in this slideshow... I'm using slideshow 3.

Could it be that the image doesn't get loaded until the large files get loaded?

Nile
01-25-2010, 03:59 AM
Hmm.. I dont know. Mind providing me with a link to your page?
(Glad to help with the image caption problem)

seemoo
01-25-2010, 04:11 AM
http://www.simonchristen.com/index.php

This is the main page and when the images are loading for the slideshow, it would be great to have a this gif (http://www.simonchristen.com/templates/darkmatter/img/shutter.gif) spinning away until the first image is ready... :-)

thanks for looking into it.

Nile
01-25-2010, 04:37 AM
I don't see a blank space...?

Try changing:


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


<div id="fadeshow1"><img src="http://www.simonchristen.com/templates/darkmatter/img/shutter.gif" /></div>

seemoo
01-25-2010, 04:58 AM
Well not blank space...

It takes quite a few seconds before the first image of the slideshow is loaded... To bridge that gap I would like the shutter.gif image to be displayed where the first slide would go until that slide is loaded.

I assume this is the purpose of the original loading.gif image in the code that I posted in my first post...

But it seems it doesn't want to get displayed...

It's no big deal... was just wondering if anybody ran into the same thing....


I tried your code, but it doesn't seem to display the image either...?

udeshjr
01-25-2010, 11:51 AM
I was also going through the same problem and find out a hack. :cool:
following changes was done,
in file "fadeslideshow.js"
line 35-40 range

preloadimages[i]=new Image()
preloadimages[i].src=fadeSlideShow_descpanel.controls[2][0]
for (var i=0; i<setting.imagearray.length; i++){ //preload images
Reason: load the loading image faster

line 80-90 range

if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
//$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
//$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}
Reason: seems like loading hide soon as created, so I stopped.

I'm not a java guru :D so there may be side effects. please check. :rolleyes:
I checked with IE6, IE7 Safari3, Chrome 3, FF 3.5.7 and looks ok to me :)

seemoo
01-25-2010, 09:56 PM
Thanks udeshir!

That seems to do the trick! Tested it on Firefox Unix and it seems to work fine.

thanks again,

simon

Nile
01-26-2010, 03:03 AM
It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"

nrz13
08-23-2010, 01:18 PM
preloadimages[i]=new Image()
preloadimages[i].src=fadeSlideShow_descpanel.controls[2][0]
for (var i=0; i<setting.imagearray.length; i++){ //preload images


This introduces an error when I tested it. Using "2" instead of "i" requires that the slideshow have at least 3 images in it. This probably won't be a problem for most people, but it was an issue for me on some of my pages. I changed the "i" to a "0" for it to work for me. I am not sure what potential problems, if any, doing this will introduce. I haven't found anything wrong with it yet, although the script doesn't actually preload the images before running in either the original or the above modified version.