View Full Version : Lightbox 2.04, Moving the Caption

10-13-2008, 08:30 AM
Hi All

I am currently working on a site using Lightbox 2.04 and all i would like to do is make a slight alteration to it's basic function and that is:

Move the Cation and close button to the top of the display rather than the bottom.

This however appears to be proving a little tricky, i have searched the net to no avail and pretty much moved everything around in the .js file and have even had an open post on Huddletogether for the last few weeks but to no avail.

Can anyone help. Please!!!

Thanks in advance.

09-24-2010, 06:18 PM
I came across this thread when searching for a solution, but no luck.
After an hour or 2 of messing with stuff, I decided to try switching these 2 sections around and.. tada.

imageDataContainer is the caption/close button stuff.
outerImageContainer is the image/prev/next stuff.

Find this line:


Find the section right below that, that looks similar to below. You can replace it with this, or switch the sections around yourself, just make sure the comma is in between & not at the end :p

objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
Builder.node('div',{id:'imageContainer'}, [
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})

While it does put the caption at the top, the 'slidedown' effect is a little weird at the top. I messed around with that for a bit, but gave up.
There is a "slidedown" effect, but simply changing to that doesn't have the desired effect.
I don't have enough time to figure it out, but if anyone does, please post ;)