0

我遇到了这个网站：http ://www.jfletcherdesign.com 。

我想复制主页如何显示他所有帖子的特色图像，以及当您单击图像时，您会在特定帖子中深入了解。我还想复制您如何使用图像单击“前进”和“下一步”到类别中的相应帖子。

有人可以为我指出设置此功能的正确方向吗？

如果您可以将我指向用于在他的类别页面上实现翻转效果的 jQuery 插件，则可以加分。

谢谢！

4

1 回答 1

1

该网站基于 WPShower 的不平衡主题。这是一个免费主题，因此您可以下载并查看所有源代码。那应该回答你的第一个问题。

要获得作为上一篇和下一篇文章分页的图像，您需要做的就是使用get_adjacent_post 函数。您可以使用类似下面的代码来设置它以链接图像。将其粘贴在 single.php 的底部或您希望分页出现的任何位置。

<?php
    $prev_post = get_adjacent_post(true, '', true);
    $next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
    <a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
    <a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>

现在对于 jQuery 翻转，它非常简单：

$(document).ready(function() {
    $('.article').mouseenter(function() {
        $(this).find('.article-over').show();
    });
    $('.article').mouseleave(function() {
        $(this).find('.article-over').hide();
    });
    $('.article').hover(
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 0.3);
        },
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 1);
        }
    );
});

它作用于主题生成的以下 HTML 标记：

<li class="article li_col1" id="post-1234">

    <div class="preview">
        <a href="http://www.site.com/2013/01/post/"><img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post"></a>
    </div>

    <div class="article-over">
        <h2><a href="http://www.site.com/2013/01/post/" title="Cool Post">Cool Post</a></h2>
        <div class="the-excerpt">
            <p>Blah blah blah this is a post excerpt...</p>
        </div>
    </div>

</li>

所以基本上当您第一次访问该站点时，对于除第一个项目之外的所有项目，您所看到的只是.preview包含类别图像的 div。.article-overdiv 绝对位于 div 之上，但.preview具有一种display:none您看不到的样式。

当 mouseenter 事件被触发时，.article-overdiv 会通过 显示show()，并且里面的图像.preview淡出到 0.3 的不透明度，让您可以看到.previewdiv 背后的黑色背景。当鼠标离开时，.article-over被隐藏，.preview图像逐渐变回完全不透明。

如果您仍然卡住，请告诉我，我会尝试进一步解释。

于 2013-01-29T21:32:24.483 回答