Question

我在使用Lightbox 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>

结果，我的画廊将第一张图像显示为“68中的2张”，当它真的是34张中的1张时。“数据灯箱”在任何地方都不重复，并且仅在网页上显示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>

申请wookmark后

  <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之前启动灯箱。

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

1 个答案: