图像右侧的灯箱说明？

Question

我有一个问题，试图改变描述显示的方式，我不希望它显示在图像下面，因为信息很大，所以我想显示在图像旁边，但它总是给我错误，我问插件的支持，我没有得到任何重播我谷歌但没有运气，我甚至尝试寻找另一个插件，支持图像右侧的描述，但没有运气我用这个插件

  

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

     

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

点击任何图片，图片很好地展开，标题很好地显示在用户可能不知道的底部，所以我想将整个标题移到图像的右侧

更新＃1 我添加了css #imageDataContainer{ floating:right，它确实有效，但现在我想把它拉起来

Answer 1

您需要更改Lightbox.css文件。您发布的链接指向JavaScript文件。

我认为您希望图片标题显示在右下方，关闭按钮显示在左下角？如果是这样，您需要修改Lightbox.css，如下所示：

• 将float的{​​{1}}和text-direction属性更改为右侧

#imageDetails

• 将#imageData #imageDetails{ width: 70%; float: right; text-align: right; }的{​​{1}}属性更改为左

float

修改

这些更改将显示标题＆amp;在右上角关闭图像 - 与图像顶部齐平。

在Lightbox.js文件中：

您必须切换构建器节点部分，以便imageDataContainer位于顶部。所以从第134行到第163行现在应该看看这个

#bottomNavClose

• 在第303行注释掉以下行：

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

然后在Lightbox.css文件中，您需要将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}) ) ) ]) ) ])); 更改为：

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

然后会显示如下图像：