javascript - 同位素图像点击显示顶部 div Wordpress 中的新内容

Question

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

我已经能够使用 isotope 过滤 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 规则，使带有 .big 的 div 元素更大，默认情况下隐藏 .full，但在 .big 设置在父 div 中。在那种情况下 .preview 当然必须被隐藏；这一切都可以用 CSS 完成，不需要 JavaScript/jQuery。

好吧，解释起来有点麻烦——我想举个例子说一千多个字: JSFiddle

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