PDA

View Full Version : Lightbox2.03 : caption text and close button position



theEdge
02-01-2008, 05:59 AM
1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: How can I position the cation text and the close button on top of the image instead of under the image ?

I think this would be better if one displays larger images so that the user can see the text information and the close button without scrolling.

cu,theEdge.

jscheuer1
02-01-2008, 06:29 AM
In a text only editor like notepad, open lightbox.js and find this line:


objLightbox.appendChild(objImageDataContainer);

Replace it with this one:


objLightbox.insertBefore(objImageDataContainer, objOuterImageContainer);

theEdge
02-01-2008, 06:54 AM
Big thx, works fine !!!

cu,theEgde.

swtiemiss
06-30-2011, 05:05 AM
Hi,

this is exactly what i need, but for v 2.05. i couldn't find that original line to replace it with. do you know where i would input the new code?

thank you so much!

jscheuer1
06-30-2011, 03:05 PM
Find this section in lightbox.js:


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

Change it to:


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

And find this line:


new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),

and comment it out:


new Effect.Parallel(
[
//new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],

swtiemiss
07-01-2011, 05:35 AM
Thank you so much, John. You're a life saver!

kfirooo1
01-03-2012, 11:30 AM
but my ask is how i put the close on the image?2.05