between page loads

[timondeks]

1) Script Title: Simple Controls Gallery v1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...plegallery.htm

3) Describe problem:

Ive been trying to edit or change the black colour/image that fades in the 'Simple Controls Gallery' script as the page loads, just before the first picture actually "plays".I couldnt find anything in the js. file or in the head script. It also appears momentarily(blacking out the last loaded image) when I click on a link on the page. Please excuse my javascript ignorance but I really hope I can edit/fix this as the simple controls gallery is an excellent script and perfect for this page.

[ddadmin]

The "black" you see is simply the default background color of the Gallery. When the first image is shown, it's fading in not from the previous image, but from the Gallery background itself, hence the blackness you see. If you wish to change that to say, white, inside the .js file, try changing the keyword in red below within the following line to white:

		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'white', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV

[timondeks]

Thanks a million for the help, that got rid of the black. Is it possible to have the background as an image instead of a colour? would this be something like background: '<img src="">'? I havent managed to get it yet.

[ddadmin]

As far as getting the background to be an image, you can try simply replacing the color name with CSS's background image syntax, ie:

		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:url(http://mysite.com/image.gif), overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV

[timondeks]

Is there a way to point it too a specific image in the images folder within my local directory like I can in HTML?

[timondeks]

Ive tried a good few combinations but still no luck, is this possible to do?

[forum_amnesiac]

You should be able to point it to an image on your local directory, it is just CSS.

If your working directory has a subdirectory called 'images' the code would look like this:

setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:url(images/image.gif), overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV

If the image is in your working directory, the code would look like this:

setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:url(image.gif), overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV

and so on, no different from normal HTML or CSS

[timondeks]

Thanks for the help, I have the image stored in the usual subdirectory 'images'. Unfortunately when I point the code towards this with

background:url(images/blankbanner.jpeg),

and then preview it in the browser the page displays but the whole of the simple controls gallery does not display atall. Would there be another reference to this image I need to make somewhere else in the script?

[jscheuer1]

You know, you really don't need to edit the script at all. I'd say go back to the original version of the script. Instead, add overriding style to the style section in head of the page:

#simplegallery1, #simplegallery1 .gallerylayer {
 background-image: url(image.gif)!important;
}

where simplegallery1 is the wrapperid for that gallery.