WP; Looking for a way to add content to a lightbox dynamically

1 Views

I’m not sure exactly what kind of script I need for this, hopefully someone on here knows.

On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I’d like them to trigger a lightbox type of element that has a description of the post/page.

Read More

From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.

Any insight is greatly appreciated!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Pure CSS Solution:

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

    This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!