Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    1
    Thanked 1 Time in 1 Post

    Lightbox 2.04, Moving the Caption

    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.

  • #2
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    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:
    Code:
    objBody.appendChild(Builder.node('div',{id:'overlay'}));
    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

    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})
                            )
                        )
                    ])
                )
            ]));
    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


  •  

    Posting Permissions

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