Question

i am having an issue trying to change the way the description showing, i don’t want it to show below the image because the information in big, so i wanted to show beside the image but it always gives me error, i asked the support of the plug-in and i haven’t got any replays i googled but with no luck, i even tried looking for another plug-in which support descriptions on the right of the image but no luck i used this plug-in

http://www.huddletogether.com/projects/lightbox2/

http://www.sabayafrah.com/secure/

click on any image, the image well expand and the caption well show at the bottom where the user might not know, so i wanted to shift the whole caption to be on the right of the image

update #1
i added in the css #imageDataContainer{ floating:right and it did work but now i wanted to pull it up

Answer 1

You need to change the Lightbox.css file. The link you posted points to the JavaScript file.

I think you want the image caption to be displayed at the bottom right and the close button on the bottom left? If so, you need to amend the Lightbox.css as follows:

• Change the float and text-direction properties for #imageDetails to right

#imageData #imageDetails{ width: 70%; float: right; text-align: right; }

• Change the float property for #bottomNavClose to left

#imageData #bottomNavClose{ width: 66px; float: left; padding-bottom: 0.7em; outline: none;}


EDIT

These changes will display the caption & close image in the top right hand side – level with the top of the image.

In the Lightbox.js file:

You have to switch round the builder node sections so that the imageDataContainer is at the top. So from line 134 to 163 it should now look this this

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

• On line 303 comment out the following line:

  this.imageDataContainer.setStyle({ width: widthNew + 'px' });

Then in the Lightbox.css file you need to change the #imageDataContainer to :

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; float:right; background-color: #fff; overflow: auto; width:25%; height:100%; }

This will then display the image like this: