Wordpress循环与jQuery集成

时间:2011-08-15 06:01:00

标签: javascript jquery html css wordpress

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

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

当您点击缩略图时,在其上方,div将被取消隐藏,并将向下滑动内容以显示有关所点击缩略图的信息。如果单击下一个缩略图,则当前div将向上滑动并隐藏,然后另一个隐藏的div将向下滑动并显示下一个缩略图的信息。

http://lifestyletrader.com/jqueryidea.jpg

我真的不知道如何去做这个,所以任何帮助都会非常感谢upvotes:D!

2 个答案:

答案 0 :(得分:1)

也许你可以使用一些jquery插件来创建画廊,比如AD Gallery

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

请参阅此AD Gallery example并告诉我这样的事情是否符合您的要求。

答案 1 :(得分:1)

在您发布的示例中,似乎所有帖子的HTML都构建在辅助页面(found here)上,该页面包含在主可折叠div中。该div的高度设置为0,只要您点击下面的缩略图:

  1. 内部内容移动到正确位置(可能基于从点击的缩略图中检索到的ID)

  2. 使用jQuery animate()

  3. 等扩展div

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

    现在回到WordPress循环,我想你可以做两件事之一:

    1. 使用循环构建一个类似的结构,您可以在其中加载所有帖子 并为它们构建大的“焦点”块并隐藏它们(就像这样 例子)然后在点击缩略图后显示相关的

    2. 使用循环构建缩略图,并设置wordpress post id 作为每个缩略图的id,然后异步重新加载大部分 使用ajax的页面。这可能更难,但效率更高, 而且我不确定该怎么做。 :)