0

我在画廊工作。一切都很好，除了灯箱库比屏幕中央稍微多一点。

灯箱来源： http: //lokeshdhakar.com/projects/lightbox2/

它应该动态地将叠加层放置在屏幕的中心，但由于某种原因，在我的情况下它没有这样做。当我调试代码时，它将主要的灯箱容器属性显示为：

<div id="lightbox" style="display: block; top: 189.4px; left: 0px;">

第二个问题：我怎样才能将照片的描述添加到灯箱中，因为现在它只显示照片的标题。我实际上需要添加照片的描述和日期。

为了更清楚，我添加了屏幕截图以显示它在我的屏幕上的外观：

![在此处输入图像描述][1]

从这个屏幕截图可以清楚地看出，Lightbox 从顶部：75 像素开始，这不会使图像垂直对齐在屏幕中间。

4

1 回答 1

1

我遇到了同样的问题。垂直对齐由屏幕高度决定，但不考虑图像大小。我的问题是在纵向模式下拍摄的照片会溢出页面，所以我决定修改灯箱代码以将所有图像向上移动。如果您提前知道所有图像的大小相同，那么理论上您可以将此值更改为您需要的任何值（您必须自己进行计算。在灯箱中查找这部分代码js并进行相应的修改。

o=f.scrollTop()+f.height()/10;n=f.scrollLeft();this.$lightbox.css({top:o+'px',left:n+'px'}

或者，在灯箱 css 文件中，查找.lightbox并添加以下内容：

  top: 0px !important;

将 0px 值修改为您计算的任何值。

要向灯箱添加说明，请设置<img>标签的alt属性。

于 2013-09-05T06:46:24.757 回答