Problem with Lightbox - next, prev, close images not showing on one site

[monkeyshinz]

1) Script Title: Lightbox2

2) Script URL (on DD): http://www.lokeshdhakar.com/projects/lightbox2/

3) Describe problem:

i have used the lightbox script on one website http://lindastitt.com/windmill_oct18.html and have had no problems with the "next" "prev" "close" or any of the associated images showing up

however... using the same js and css scripts on this site http://davidfleishmandesigns.com/hangingdisplay.html i can get the slideshow to work but all the associated images are missing - showing up only with image markers

everything worked fine in web preview from Dreamweaver before i uploaded all the files to the web host... that's when things went wrong... i am just getting image markers for the files that should be showing.

images are placed in the correct folder on line - the www/images as they are for the first web site...

just can't figure out what the difference is and why - needless to say it's driving me just a wee bit nuts

thanks in advance for your help...

[jscheuer1]

Well the images are not on the server, at least not where the code expects them to be. For instance, it's looking for the close image here:

http://davidfleishmandesigns.com/images/closelabel.gif

That's set here (in lightbox.js):

// -----------------------------------------------------------------------------------

//
//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	// When grouping images this is used to write: Image # of #.
	// Change it for non-english localization
	labelImage: "Image",
	labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

It's location is relative to the page using the script. To avoid confusion, or for use with pages in different folders, an absolute path may be used. Notice that the loading image is set here as well, make sure that is present and in the correct location.

As for the prev/next images. These are set in the lightbox.css file:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

These are relative to the location of that css file. Absolute paths may be used here as well if desired. Currently they are looking here (the prev image for example):

http://davidfleishmandesigns.com/images/prevlabel.gif

[monkeyshinz]

thanks... i've tried that and it's still not working... hmmmmmmmm

Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'http://davidfleishmandesigns.com/images/loading.gif',
fileBottomNavCloseImage: 'http://davidfleishmandesigns.com/images/closelabel.gif',

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

have also changed the lightbox.css

borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://davidfleishmandesigns.com/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://davidfleishmandesigns.com//images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

~~~~~~~~~~~~~~~~~~~~~~~

i'm using the same lightbox.css and js on this site as on the other one i've done and images are in the same place relatively for both...

the lightbox works perfectly in Dreamweaver preview with all appropriate buttons showing up...

this is driving me nuts.... as it is now not working properly on this page either
http://davidfleishmandesigns.com/press.html

again... thanks for the help and Merry Christmas

[jscheuer1]

The image files are not there. Click on this link:

http://davidfleishmandesigns.com/images/loading.gif

In fact, I don't even think this folder is there:

http://davidfleishmandesigns.com/images/

[monkeyshinz]

Thanks = that's very strange because all the other images are showing up... i'll have to do some more fiddling....

[monkeyshinz]

Thank you soooooooooooo much John!! I now have it working....

Who knew the folders and code were case sensitive? Both the lightbox.css and the lightbox.js were referring to images and i had used Images in naming my folder?

When i renamed the folder with a small i - all my other images disappeard, so it was just easier to go in and alter the codes replacing small i with the captial I and voila!!

Incredible how such a small detail can affect the big picture.

Very grateful for your input and suggestions...

Happy Holidays...
monkeyshinz!

[jscheuer1]

I see you have it sorted:

Images

not:

images

[monkeyshinz]

Yes, thank you very much John!! You Rock!!

All seems to be working as it should now....