Question

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

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

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

非常感谢任何见解！

Answer 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>

这是非常简陋的，很大程度上未经测试。总的来说，这应该让你开始朝着正确的方向前进。希望这有帮助！

WP;寻找一种动态添加内容到灯箱的方法

1 个答案: