Ultimate Fade-in slideshow "loading.gif" problem

[seemoo]

Hi,

I'm updating my website and added the Ultimate Fade-in slideshow. 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]

Hmm =/ Is the restore.png and x.png working okay?

[seemoo]

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]

Hmm.. I dont know. Mind providing me with a link to your page?
(Glad to help with the image caption problem)

[seemoo]

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/templat...mg/shutter.gif) spinning away until the first image is ready... :-)

thanks for looking into it.

[Nile]

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]

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]

I was also going through the same problem and find out a hack.
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 so there may be side effects. please check.
I checked with IE6, IE7 Safari3, Chrome 3, FF 3.5.7 and looks ok to me

[seemoo]

Thanks udeshir!

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

thanks again,

simon

[Nile]

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"