我正在努力在 Wordpress 上复制Angular 主题中发生的事情。
我已经能够获得同位素来过滤 post_thumbnails 显示它们并且它的动画效果很好但我坚持的是当单击图像或链接时,该帖子/投资组合的内容会显示在新的 div 中。理想情况下,将盒子推开,因此如果您在移动设备上,则不必滚动到顶部。
任何让我开始的指针都会很棒,只是在任何地方都找不到这样的东西,并认为它对其他人非常有用:)
谢谢
我正在努力在 Wordpress 上复制Angular 主题中发生的事情。
我已经能够获得同位素来过滤 post_thumbnails 显示它们并且它的动画效果很好但我坚持的是当单击图像或链接时,该帖子/投资组合的内容会显示在新的 div 中。理想情况下,将盒子推开,因此如果您在移动设备上,则不必滚动到顶部。
任何让我开始的指针都会很棒,只是在任何地方都找不到这样的东西,并认为它对其他人非常有用:)
谢谢
实际上,这可以很容易地实现。基本上你只需要为所有同位素项目添加一个点击处理程序。处理程序必须确定哪个元素已被单击(例如,通过检查被单击项目的类名,但当然有很多方法),然后将相应的内容添加到您的div
元素中。
如果内容必须显示在适当的位置,那就更容易了。您可以简单地将预览和完整内容添加到同一个同位素项目,但默认隐藏完整内容:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
然后为所有同位素项目添加一个点击处理程序:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
当点击的项目展开时,通过调用.isotope("reLayout")
其他项目被推开。
最后,您需要一些基本的 CSS 规则来制作更大的div
元素,默认隐藏,但在 parent 中设置时显示。在那种情况下,当然必须隐藏;这一切都可以用 CSS 完成,不需要 JavaScript/jQuery。.big
.full
.big
div
.preview
好吧,解释起来有点麻烦——我猜一个例子说了一千多个词:JSFiddle
当然这只是一个非常基本的例子,但希望它能解释我的意思。;)