灯箱在图像右侧的描述？

-1

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

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

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

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

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

来源

2011-01-20 Mahmoud

您可以发布您修改代码？你已经尝试了什么？ – codingbadger 2011-01-20 08:58:27

@Barry我试着编辑CSS来显示右边的描述，但它一直忽略它，我试着改变这个代码`http：// pastie.org/1480064`但是没有运气 – Mahmoud 2011-01-20 09:01:46

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

我想你想让图像标题显示在右下方，关闭左下方的按钮？如果是这样，你需要修改Lightbox.css如下：

更改float和text-direction属性#imageDetails右键

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

更改float属性#bottomNavClose到左

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

EDIT

这些变化将显示在右上方的字幕&接近图象 - 与所述图像的顶层。

在Lightbox.js文件：

你必须选择轮建设者节点部分，以便imageDataContainer是在顶部。在灯箱

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

然后：所以从线134到163，应该现在看起来这本

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

线303注释掉以下两行。css文件，你需要改变#imageDataContainer到：

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

这一操作将像这样显示图像：

来源

2011-01-20 09:10:38 codingbadger

灯箱在图像右侧的描述？

回答

相关问题