Question

我是新来的，这是我的第一个问题，但我已经进行了研究而无法找到答案。

我正在开发一个Wordpress网站，并在索引页面上的网格上黑客使用带有摘要和缩略图的砌体的模板。当您点击图片时，您将被定向到帖子内容。这是主题：http://jinsonathemes.com/fabs/?themedemo=Vasiliki

我想要实现的是：

当用户点击缩略图时，内容会在同一页面上显示和展开。这是Up Magazine的一个例子：http://upmagazine-tap.com

我在这个非常酷的小提琴（＃FS34t）上查看了JQuery脚本。这些框在点击时展开和折叠内容，但这并不是我对此网站的想法。肯定会在另一个上实施。

我认为这将是一个简单的显示/隐藏功能，但每个图像使用相同的内容链接到特定的帖子＆＃34;内容＆＃34; DIV。我如何使用砌体网格中的图像作为相应帖子内容展开/折叠的触发器 - 如Up Magazine样本中那样？

感谢您的阅读。

Answer 1

我会将the_content添加到自己的子div中的post div。然后在css中隐藏该div。

然后我会创建一个打开div的函数[我使用jQuery slideDown（）]。该函数还将包括该函数中的砌体重载方法[.masonry（'reload'）]。

然后我会将该函数绑定到div上的点击，或者可能是后缩略图。

非常粗略：

HTML 的

<div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>

css

div.post-content {
display: none;
}

JS

$('.classofpostthumbnail').click(function() {
  $(this).siblings('.excerpt').slideUp();
  $(this).siblings('.post-content').slideDown();
  $('.masonrycontainer').masonry('reload');
});

但是我的js绝对可以改进。 [对于初学者来说，将幻灯片与其回调链接在一起，以便所有动画在彼此之后运行。当然你的html和css可能要复杂得多。

Answer 2

嗯...... UpMagazine没有div上的隐藏内容我们将内容加载到容器中，AJAX向/wp-admin/admin-ajax.php发送请求（参见：http://core.trac.wordpress.org/browser/trunk/wp-admin/admin-ajax.php）。

很高兴你喜欢这个网站。

如何使用缩略图作为触发器在Wordpress网站上使用JQuery Masonry扩展和折叠内容

2 个答案: