燈箱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> 

其結果是，我的畫廊展示了第一圖像爲「68 2」，當它真的是34 1「數據 - 燈箱「在任何地方都不重複，並且只在網頁上顯示34次。

你可以在這裏查看我的工作頁：[REMOVED] ...作爲一個測試，第一個圖像都有自己的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之前啓動燈箱。