Fade-in slideshow: black window everytime script starts

[pete the eck]

Ultimate Fade-in slideshow (v2.1) http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm is brilliant but everytime you open a page or return to the website there is a black hole before the first image manifests itself. Have I done something wrong, or is there a way of changing the black to white or another colour or preloading an initial image until the script throws the first one up??

Thanks
Pete
(www.southern-images.co.uk)

[jscheuer1]

There would be a loading image at least for this page:

http://www.southern-images.co.uk/lightbox/index.php?module=media&pId=101&start=0

if you downloaded (right click, 'save as'):

http://www.dynamicdrive.com/dynamicindex14/loading.gif

and placed it here (which is currently a 404 not found):

http://www.southern-images.co.uk/lightbox/loading.gif

Alternatively, you could configure the path to the loading image here (in the fadeslideshow.js script):


/* Ultimate Fade-in slideshow (v2.1)
* Last updated: Sept 10th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize

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)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(sett . . .

If you were to use an absolute path, say:


controls: [['x.png',7,7], ['restore.png',10,11], ['http://www.southern-images.co.uk/lightbox/loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images

it would be valid for all pages using that script.

Alternatively, you could use your own loading image. It could even be something entirely different, like a train or something. Whatever it is, even if it is the one from the demo page, it would be a good idea to keep it small (byte wise) and to preload it on your:

http://www.southern-images.co.uk/

page, so that it would be ready to go once a user got to one of the slide shows.

Note: This loading image is available for download along with two other support images for this script on the demo page. The instructions state to download them and to configure them in the script. See this section on the demo page:


The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):

fadeslideshow.js
[images are here on the demo page] (check inside fadeslideshow.js to ensure that the paths to these 3 images are correct)

[pete the eck]

Wow! What a fantastic detailed answer to my first post.:)
Thank you so much

[pete the eck]

Hi John
I have tried all your suggestions including my own image as a pre-loader and can access them fine at www.southern-images.co.uk/lightbox/loading.gif but despite that I still get the black box. I have configured the js script and gone back to the original, but nothing seems to work. Obviously I am still doing something wrongly..any ideas please!
thanks for your time
pete:confused:

[jscheuer1]

Looks like you did everything right. What appears to be happening though is that there are so many images associated with the page and that the loading.gif is getting loaded last, too late to appear before the first image in the show. You could try preloading it as I had suggested, but I really dont think that would help. It would load faster, but still as the last image.

Here's what I would suggest, make it a background image. To do so we will need to edit the fadeslideshow.js script here (make the two highlighted additions):


jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', backgroundColor:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', backgroundColor:'black'})

Put this in your stylesheet (any image is fine if of a small byte size, absolute path may be used here):


#fadeshow1, #fadeshow1 .gallerylayer {
background: url(loading.gif) center no-repeat;
}

Add this to your var mygallery=new fadeSlideShow declaration:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [300, 185], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["1.jpg", "", "", ""],["2.jpg", "", "", ""],["3.jpg", "", "", ""],["4.jpg", "", "", ""],["5.jpg", "", "", ""],["6.jpg", "", "", ""],["7.jpg", "", "", ""],["41.jpg", "", "", ""],["8.jpg", "", "", ""],["9.jpg", "", "", ""],["10.jpg", "", "", ""],["11.jpg", "", "", ""],["42.jpg", "", "", ""],["12.jpg", "", "", ""],["13.jpg", "", "", ""],["14.jpg", "", "", ""],["15.jpg", "", "", ""],["43.jpg", "", "", ""],["16.jpg", "", "", ""],["17.jpg", "", "", ""],["18.jpg", "", "", ""],["19.jpg", "", "", ""],["44.jpg", "", "", ""],["29.jpg", "", "", ""],["21.jpg", "", "", ""],["22.jpg", "", "", ""],["23.jpg", "", "", ""],["45.jpg", "", "", ""],["24.jpg", "", "", ""],["25.jpg", "", "", ""],["26.jpg", "", "", ""],["27.jpg", "", "", ""],["46.jpg", "", "", ""],["28.jpg", "", "", ""],["29.jpg", "", "", ""],["30.jpg", "", "", ""],["47.jpg", "", "", ""],["31.jpg", "", "", ""],["32.jpg", "", "", ""],["33.jpg", "", "", ""],["34.jpg", "", "", ""],["48.jpg", "", "", ""],["35.jpg", "", "", ""],["36.jpg", "", "", ""],["37.jpg", "", "", ""],["38.jpg", "", "", ""],["39.jpg", "", "", ""],["49.jpg", "", "", ""],["40.jpg", "", "", ""]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false,randomize:true},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 2500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
this.setting.$wrapperdiv.css('backgroundImage', 'none');
this.setting.$gallerylayers.css('backgroundImage', 'none');
}
})


Be sure not to miss the added comma after the togglerid: "", value.

[pete the eck]

Hi John
Thanks for your careful instructions which I followed to the letter but it sadly did not work. However, I then thought to change all references to 'black' in the js script to 'green' and that has produced a satisfactory outcome :)if not quite what you had hoped for! Any thoughts.
Best wishes
Pete

[jscheuer1]

Any thoughts.

Two:


I thought you might do that. If that's all you want to do, css alone can do that leaving the script intact, allowing for different pages to have different background colors while still using the same script file, or even different shows on the same page to have different background colors. Example css using green as the background color for a show using fadeshow1 as its 'wrapperid':


#fadeshow1, #fadeshow1 .gallerylayer {
background-color: green!important;
}

The above method (using css for background color changes) has been demonstrated to work numerous times in other threads in this forum as well as in numerous local tests here.



To diagnose why my other suggestion did not work, the easiest thing for me would be to see your attempt at it. It could be one or more things that you and/or I missed. If you still want to pursue it, give me a link to a page where where you are trying it.

[endymion]

I've been on a wild goosechase for hours on this and about to just resort to another script or animated GIF, which I hate. I followed all the directions here too, with no positive outcome. I can appreciate that you can change the background color for this box, but how about a simple cure to have a background image in place? Eternally frustrating.:confused:

[jscheuer1]

#fadeshow1, #fadeshow1 .gallerylayer {
background-image: url(some.jpg) !important;
}

[endymion]

You are, indeed, a saint.

I'm wondering if some of these various tweaking options wouldn't be better to be posted on the script page itself. Wouldn't it save the programmers and those helping it along to have certain tweaks readily visible so that not as many people bog down the boards?

Just a suggestion. Love the site very much.