灯箱 2 显示单个图像的图库

Question

我在使用灯箱 2 时遇到了一个小问题。我正在将它与另一个jquery插件WookMark混合在一起。因此，我的缩略图更加复杂，如下所示：

<li data-filter-class='["digital", "mabel", "all"]'>
<a href="/illus/phpGallery_images/mabel0.jpg" data-lightbox="illustration" title="caption">
<div class="thumbnail"><img src="/illus/phpGallery_thumbs/tn_mabel0.jpg" />
<p>Caption</p><p class="tags">digital, mabel &amp; bruin</p>
</a>
</li>

结果，我的画廊将第一张图像显示为"2 of 68"，而实际上它是 1 of 34。"数据灯箱"在任何地方都没有重复，仅在网页上出现34次。

你可以在这里查看我的工作页面：[已删除] ...作为测试，第一个图像有自己的ID，"单独"，你可以看到它说"图像2，共2张"

如果你能看一看，我将不胜感激！

Answer 1

以下是您的 html 的外观：

<li data-filter-class='["digital", "watch", "all"]'>
    <a href="/illus/phpGallery_images/peacockl_watch_design.jpg" data-lightbox="alone" title="caption">
        <div class="thumbnail"><img src="/illus/phpGallery_thumbs/tn_peacockl_watch_design.jpg" />
        <p>Caption</p>
        <p class="tags">digital, watch faces</p>
    </a>
</li>

应用旭马克后

  <li data-filter-class="['digital', 'watch', 'all']" style="display: list-item; position: absolute; top: 0px; left: 91px;">
    <a href="/illus/phpGallery_images/peacockl_watch_design.jpg" data-lightbox="alone" title="caption"></a>
    <div class="thumbnail">
        <a href="/illus/phpGallery_images/peacockl_watch_design.jpg" data-lightbox="alone" title="caption">
            <img src="/illus/phpGallery_thumbs/tn_peacockl_watch_design.jpg">
            <p>Caption</p><p class="tags">digital, watch faces</p>
        </a>
    </div>
  </li>

灯

箱查找具有数据灯箱属性的元素。 所以，你现在有两倍的数量。 Wookmark确实有一个示例，其中包含一个可能有所帮助的灯箱：https://github.com/GBKS/Wookmark-jQuery/blob/master/example-lightbox/index.html。 但是，我认为诀窍是在Wookmark之前初始化灯箱。