同位素图像onclick揭示顶级div Wordpress中的新内容

Question

我正在努力复制Wordpress上angular theme发生的事情。

我已经能够获得同位素来过滤post_thumbnails显示它们并且它的动画很棒，但我坚持的是当点击图像或链接时，该帖子/作品集的内容会显示在新的div中。理想情况下就位并推开盒子，所以如果你在手机上，你就不必滚动到顶部。

让我入门的任何指示都会很棒，只是在任何地方都找不到这样的东西，并认为这对其他人非常有用：）

谢谢

Answer 1

实际上，这很容易实现。基本上你只需要为所有Isotope项添加一个点击处理程序。处理程序必须确定单击了哪个元素（例如，通过检查所单击项的类名，但当然有多种方法），然后将相应的内容添加到div元素。

如果必须在适当的位置显示内容，则更容易。您只需将预览和完整内容添加到同一个Isotope项目，但默认隐藏完整内容：

<div class="item">
    <div class="preview">...</div>
    <div class="full">...</div> <!-- hidden with CSS -->
</div>

然后为所有Isotope项添加一个点击处理程序：

$(".item").click(function(){
    $(this).toggleClass("big");
    $("#container").isotope("reLayout");
});

通过调用.isotope("reLayout")，当点击的项目展开时，其他项目将被推开。

最后，您需要一些基本的CSS规则，使div元素的.big元素更大，默认隐藏.full，但在父.big设置时显示div 1}}。在这种情况下，.preview当然必须隐藏;这一切都可以用CSS完成，不需要JavaScript / jQuery。

好的，解释起来有点麻烦 - 我想一个例子说的是千言万语： JSFiddle

当然这只是一个非常基本的例子，但希望它能解释我的意思。 ;）