我正在使用Stylehatch的'Photoset-grid.js'和'view.js'
除了这个事实之外,它似乎还行得通:当我单击多图像行中最右边的图像时,它将打开左边的图像。
明白我的意思:http://test-theme-one.tumblr.com/
我渲染的HTML看起来像这样(我去了野生动物园并单击“检查元素”,并在测试博客上复制了html上的photoet帖子)我不知道它是如何设置的,尽管我有它,所以锚定将每个图像包装在photoset中?
<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>
最佳答案
问题在于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使用锚点/链接弹出灯箱。他们基本上是捕获整个分组的click事件。当您在模板中尝试将
<img>
包装在<a>
中时,它会将<img>
标记从模板中的<a>
中拉出并将其附加到第一个<a>
上。如果您正在开发jQuery插件,请在第113行(
_setupColumns
)周围the Photoset-grid code, is pretty clearly bugged。长话短说,您将无法在Photoset-grid中使用view.js灯箱。除非有某种灵魂出现并修复插件。