Lightbox 2 shows gallery for single image

Question

I'm having a slight issue with Lightbox 2. I'm mixing it with another jquery plugin, WookMark. As such, my thumbnails are a bit more involved, and look like this:

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

As a result, my gallery shows the first image as "2 of 68" when it really is 1 of 34. "data-lightbox" is not duplicated anywhere, and is only on the webpage 34 times.

You can view my working page here: [REMOVED] ... as a test, the first image has its own id, "alone" and you can see it says "image 2 of 2"

If you could take a look, I'd really appreciate it!

Answer 1

Here's what your html looks like:

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

After applying 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>

Lightbox looks for elements with data-lightbox attributes. So, you now have twice as many. Wookmark does have an example that incorporates a lightbox that may be of help: https://github.com/GBKS/Wookmark-jQuery/blob/master/example-lightbox/index.html. But, I think the trick's going to be to init the lightbox before Wookmark.