Custom Post Type ‘Lightbox’ only displaying 1st post, no plug-ins

first post, been lurking around here for WP specific answers outside of SO.

Trying to create a lightbox using purely HTML/CSS and no plugins. The lightbox will echo the image, title text, and additional bio text. The lightbox is working, however only displaying content from 1st post in the loop, despite clicking on other posts in the loop. How can I trick out the loop to iterate through all different post types related to link?

Here’s what I have…. Thanks for the advice!

<div class=”team-gallery-wrapper hv-wrapper-team”>
<div class=”row”>
<?php $args = array(‘post_type’ => ‘team’, ‘order’ => ‘ASC’, ‘posts_per_page’ => 5); ?>
<?php $team = new WP_Query($args); ?>

<?php $i = 0; $columns = 2; if ( $team->have_posts() ) : while ( $team->have_posts() ) : $team->the_post(); ?>

<?php
$span = ‘col-md-2 text-left content-center’;
if($i >= 5){
$i = 0;
echo ‘</div><div class=”row>’;
} else {
$i++;
}
?>

<div class=”<?php echo $span ?>”>

<a href=”#img1″>
<?php the_post_thumbnail( ‘full’, array( ‘class’ => ‘team-thumbnail’) ); ?>
</a><!– lightbox anchor –>

<h4 class=”name cochin”> <?php the_field(‘name’); ?></h4>
<p class=”title helv-md”> <?php the_field(‘title’); ?></p>
</div><!– col –>

<!– LIGHTBOX–>

<a href=”#_” class=”lightbox” id=”img1″>
<div class=”lightbox-bg”>
<div class=”col-md-2″>
<?php the_post_thumbnail( ‘full’, array( ‘class’ => ‘team-thumbnail-lightbox’) ); ?>

<h3>
email@theinternet.com<br>
(212) 555-5555
</h3>
</div>
<div class=”col-md-10 lb-contents”>
<h4 class=”name-lightbox cochin”> <?php the_field(‘name’); ?></h4>

<p class=”title-lightbox helv-md”> <?php the_field(‘title’); ?></p>

<p class=”bio-text”>
Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.

Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.

Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.

Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.

Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.

</p>
</div>

</div><!– lightbox-bg–>
</a>

<!– LIGHTBOX–>

<?php endwhile; ?>
<?php else: ?>
<h1>No posts here!</h1>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!– .row –>

/* CSS */

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
color: inherit;
}

.lightbox-bg {
position: absolute;
left: 5%;
top: 10%;
width: 90%;
height: 80%;
background-color: $white;
padding: 20px;
overflow: hidden;
}

.team-thumbnail-lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
outline: none;
display: block;
}

.lb-contents {
width: 500px;
}

.bio-text {
column-count: 2;
}

Read more here:: Custom Post Type ‘Lightbox’ only displaying 1st post, no plug-ins

Leave a Reply

Your email address will not be published. Required fields are marked *