Lightbox2.03 : caption text and close button position

[theEdge]

1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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]

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]

Big thx, works fine !!!

cu,theEgde.

[swtiemiss]

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]

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]

Thank you so much, John. You're a life saver!

[kfirooo1]

but my ask is how i put the close on the image?2.05