jquery - 如何在页面中心对齐 Lightbox 2？

Question

我正在画廊工作。一切正常，除了 Lightbox Gallery 稍微靠近屏幕的上侧而不是中心。

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

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

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

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

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

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

从这个屏幕截图可以清楚地看到灯箱从顶部开始:75 像素，这不会使图像垂直对齐到屏幕中间。

Answer 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属性(property)。