2

我不确定我需要什么样的脚本，希望这里有人知道。

在我正在构建的由 wordpress 驱动的博客的主页/存档页面上，我只有一个缩略图网格（特色图像）。而不是这些链接到实际的帖子/页面，我希望它们触发具有帖子/页面描述的灯箱类型的元素。

从那里，用户将能够继续（通过阅读更多）帖子或关闭它并继续搜索网格。

非常感谢任何见解！

4

1 回答 1

1

纯 CSS 解决方案：

<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
    <div class="post-thumb">
        <a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
    </div>
    <div class="post-preview lightbox">
        <div class="preview-wrap">
            <a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
            <?php the_excerpt(); ?>
        </div>
    </div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
    display:none;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    position:fixed;
    top:0;
    left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>

这是非常初级的，并且在很大程度上未经测试。总体而言，这应该让您朝着正确的方向开始。希望这可以帮助！

于 2013-03-29T01:48:22.123 回答