StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need to change the Lightbox.css file. The link you posted points to the JavaScript file.</p> <p>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:</p> <ul> <li>Change the <code>float</code> and <code>text-direction</code> properties for <code>#imageDetails</code> to right</li> </ul> <p><code>#imageData #imageDetails{ width: 70%; float: right; text-align: right; }</code></p> <ul> <li>Change the <code>float</code> property for <code>#bottomNavClose</code> to left</li> </ul> <p><code>#imageData #bottomNavClose{ width: 66px; float: left; padding-bottom: 0.7em; outline: none;} </code></p> <p><strong>EDIT</strong></p> <p>These changes will display the caption & close image in the top right hand side - level with the top of the image.</p> <p>In the Lightbox.js file:</p> <p>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</p> <pre><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}) ) ) ]) ) ])); </code></pre> <ul> <li><p>On line 303 comment out the following line:</p> <p><code>this.imageDataContainer.setStyle({ width: widthNew + 'px' });</code></p></li> </ul> <p>Then in the Lightbox.css file you need to change the <code>#imageDataContainer</code> to :</p> <p><code>#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; float:right; background-color: #fff; overflow: auto; width:25%; height:100%; }</code></p> <p>This will then display the image like this: <img src="https://i.stack.imgur.com/9iGWG.png" alt="alt text"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload