Photoset-grid + lightbox 在点击时打开错误的图像

Question

我正在使用 Stylehatch 的“Photoset-grid.js”和“view.js”

这似乎有效，除了这个事实：当我单击多图像行中最右侧的图像时，它会打开左侧图像。

看我的意思：http://test-theme-one.tumblr.com/

我渲染的 HTML 看起来像这样（我去 safari 并单击“检查元素”，并在我的测试博客上复制了一个照片集帖子的 html）我不明白它是如何设置的，虽然我有它锚点会包裹照片集中的每张图片吗？

<div class="photoset-grid" data-layout="3" style="width: 100%;" data-width="500">
<a href="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" class="view" rel="60178651810" title="help">
    <div class="photoset-row cols-3" style="clear: left;display: block;overflow: hidden;height: 80px;">
        <div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;">
            <img src="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
        </div>

        <div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;padding-left: 2.5px;">
            <img src="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" alt="" style="width: 100%;height: auto;margin-top: -84.5px;">
        </div>

        <div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-left: 2.5px;">
            <img src="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
        </div>

    </div>
</a>

<a href="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" class="view" rel="60178651810" title="me"></a>

<a href="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" class="view" rel="60178651810" title="please ;)"></a>
</div>

Answer 1

问题在于 Photoset Grid 并不是真正为模板工作而设计的。它需要这个模板：

 {block:Photos}
      <a href="{PhotoURL-500}" class="view" rel="{PostID}">
            <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
      </a>
 {/block:Photos}

然后取出所有 标签并复制它们——每行中的每个图像一个。它会生成以下 HTML：

<a class="view" ... >
    <div class="photoset-row cols-3" ...>
        <div class="photoset-cell" ...>
            <img ...>
        </div>
        <div class="photoset-cell" ...>
            <img ...>
        </div>
        <div class="photoset-cell" ...>
            <img ...>   
        </div>
    </div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>

现在，view.js 正在使用锚点/链接来弹出打开灯箱。他们基本上是在捕获整个分组的点击事件。当您在模板中尝试将<img> 包装在<a> 中时，它会将<img> 标记从模板中的<a> 中拉出，并将它们附加到第一个<a>。

如果您正在开发 jQuery 插件，the Photoset-grid code, is pretty clearly bugged 大约在第 113 行 (_setupColumns)。

长话短说，您将无法将 view.js 灯箱与 Photoset-grid 一起使用。除非有好心人出现并修复插件。