与 jQuery 集成的 Wordpress Loop答案

【问题标题】：Wordpress Loop integrated with jQuery与 jQuery 集成的 Wordpress Loop
【发布时间】：2011-08-15 06:01:00
【问题描述】：

所以这在文字中很难解释，我附上了一张图片，所以它应该更有意义！

基本上，我想在一行中显示最近的帖子。它们将通过 the_post_thumbnail 显示。

当您单击缩略图时，其上方的 div 将变为未隐藏，并将内容向下滑动以显示有关单击的缩略图的信息。如果点击下一个缩略图，当前的 div 会向上滑动并隐藏，然后另一个隐藏的 div 会向下滑动并显示下一个缩略图的信息。

我真的不知道该怎么做，所以任何帮助都将不胜感激：D！

【问题讨论】：

【解决方案1】：

也许您可以使用一些 jquery 插件来创建画廊，例如 AD Gallery？

希望它只需要一些调整即可根据您的需要进行调整。

看到这个AD Gallery example，告诉我你是否需要这样的东西。

【讨论】：

好吧，我会看看你的例子，看看你如何调整 jquery 插件来完成它。
好的，所以我已经编写了 WP-loop 来显示内容，并放入一个小 jquery 让它看起来有点花哨。这是一个大致基于我找到的示例的工作版本 - mathewhood.com/sitefiles 这是我的 HTML 和循环 - jsfiddle.net/dFdyP

【解决方案2】：

在您发布的示例中，似乎所有帖子的 HTML 都构建在辅助页面 (found here) 上，该页面包含在主可折叠 div 中。该 div 的高度设置为 0，并且每当您从下方单击缩略图时：

如果它已经展开；它使用动画折叠，内容移动到新位置，然后重新展开。

现在回到 WordPress 循环，我想你可以做以下两件事之一：

使用循环构建一个类似的结构，您可以在其中加载所有帖子并为他们构建大的“焦点”块并隐藏它们（像这样例如）然后在单击其缩略图后显示相关的一个
使用循环构建缩略图，并设置 wordpress 帖子 ID 作为每个缩略图的 id，然后异步重新加载大部分使用ajax的页面。这可能更难，但更有效，而且我不确定该怎么做。 :)

【讨论】：