Results 1 to 7 of 7

Thread: Lightbox2.03 : caption text and close button position

  1. #1
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Lightbox2.03 : caption text and close button position

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,944
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    In a text only editor like notepad, open lightbox.js and find this line:

    Code:
    objLightbox.appendChild(objImageDataContainer);
    Replace it with this one:

    Code:
    objLightbox.insertBefore(objImageDataContainer, objOuterImageContainer);
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Big thx, works fine !!!

    cu,theEgde.

  4. #4
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default for v2.05?

    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!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,944
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    Find this section in lightbox.js:

    Code:
            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:

    Code:
            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:

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

    Code:
            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 }) 
                ],
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default same thing

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •