Lightbox 2 Issue

byrd80 · March 12th, 2008, 05:14 PM

I'm using Lightbox 2 in a new site I'm building and having issues with the Close & Loading gifs.

The index page has 2 images that open up in lightbox and everything works fine.

Then on another page ( pages/sound.htm ) the images open up in lightbox, the effect works, but the close & loading gifs do not appear.

This is the case in bothe IE & Firefox ( IE shows the red x )

Im not sure where I've gone wrong. Everything seems to be linked up correctly.

Here is the site:
http://www.freebassaudio.net/index.htm

Please reference the Home & Sound pages. Any help would be greatly appreciated, as I cannot seem to figure this out, thanks.

-Will

Ed · March 12th, 2008, 05:16 PM

Moved to JavaScript Forum.

Ed.

CloudedVision · March 12th, 2008, 06:32 PM

most likely the page is in a different directory so the link to the image is broken. Try adding a slash in front of the image URL. eg: test/bla.jpg -> /test/bla.jpg

byrd80 · March 12th, 2008, 08:19 PM

unfortunately, thats not the problem.

thats whats got me so confused, everything looks to be linked up properly. looks like ill keep re-checking.

thx!

CloudedVision · March 12th, 2008, 09:38 PM

think you could post a link of the page that works and the page that doesn't?

Edit: Oops, didn't see there already was a link

unitedcraig · March 12th, 2008, 10:22 PM

instead of having pages/sound.htm, place sound htm in the same directory as your index page, this could work

Aso · March 12th, 2008, 10:41 PM

The Lightbox graphics are relative to the CSS file. In your case, this is at the root of your site.

However, you're linking to graphics like so;

Code:

#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; }

Your linking to a directory higher than your root (using ../), when it should just be

Code:

#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; }

If this still doesn't work, then specify absolute URL's (eg. http://freebassaudio.net/images/prevlabel.gif).

unitedcraig · March 12th, 2008, 10:43 PM

This is what i meant, just not in such a detailed way

I have had quite a bit of trouble with lightbox in the past, all to do with links to files

byrd80 · March 12th, 2008, 11:27 PM

thanks so much, aso. that worked for the previous and next label gifs, although the close and loading gif still do not work on the pages inside the "pages" folder.

and im not seeing where my closelabel.gif is linked in the css. i only see the link to the prev and next gifs.

am i missing something?

Aso · March 13th, 2008, 12:27 PM

Ok, it seems in Lightbox 2, they specify the loading and close image locations in lightbox.js, which seems a little odd.

In fact, for how you're using lightbox, you'd be better off with Slimbox. It's much lighter, and only requires a fraction of the mootools framework.

But I know that's off topic, it's up to you if you want to change

.

So the reason the loading and close images don't work for your 'page' directory, is because javascript uses the directory relative to the page it's called from (unlike CSS, which is relative to the file itself).

So, open lightbox.js and modify fileLoadingImage and fileBottomNavCloseImage to:

Code:

fileLoadingImage:        'http://www.freebassaudio.net/images/loading.gif',
fileBottomNavCloseImage: 'http://www.freebassaudio.net/images/closelabel.gif',

byrd80 · March 13th, 2008, 01:11 PM

thanks again, aso186. finally found those links at around 1am! everything works now *breathes a sigh of relief*

ill have to check out slimbox, thanks for the tip.