Adding Wordpress Post Title inside Popup

Question

Im trying to make a popup window which will display the post title and post thumbnail.

I have added this popup code into the category page template.

Basically if you click on the post title, the popup window will display showing the post thumbnail and post title, however each popup window is showing the same post details.

What changes would I need to make, so each popup window displays the corresponding post details

example. I have 3 post, titled, Post A, Post B, Post C, but in the lightbox all post titles say "Post A"

Any suggestions would be appreciated

Here is the code im using.....................

<div id="maincontainer" style="width:700px; height:auto; display:block;"><!-- Begin  Main Container -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<span id="magblock"> <!-- Begin Post Block -->

<div class="magazinethumbs">

<?php 
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>

<!-- This opens the Lightbox -->
<a class="lbp-inline-link-1 cboxElement" href="#">

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>

</span> <!-- End Post Block-->


<div style="display: none;"> <!-- Lightbox Popup -->
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">

<!-- Here is the bug, the lightbox is loading the same post details -->

<div class="magazinethumbs">

<?php 
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>

</div>
</div> <!-- End Lightbox Popup -->

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_query();?>

</div><!-- End Main container -->

Im using "Lightbox Plus For Wordpress" plugin http://www.endocreative.com/how-to-insert-content-in-a-popup-using-lightbox-plus-for-wordpress/

I tried your modified code but did not work... Simply loads the entire category page inside the lightbox...

Here is the modified code

<a class="lbp-inline-link-<?php the_ID(); ?> cboxElement" href="#"> 
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>


<div style="display: none;"> <!-- begin popup -->
<div id="lbp-inline-href-<?php the_ID(); ?>" style="padding:10px; background: #fff;">

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>

</div>
</div> <!-- End popup -->

Thanks

Answer 1

I may be sleeping when you answer my comment, so.

You have to do the step 2 of that tutorial, it will give you Inline Lightbox Individual Settings.

it'll give you a sequential classes

lbp-inline-link-1 for lbp-inline-href-1,

lbp-inline-link-2 for lbp-inline-href-2 and so on..

before

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

insert:

<?php 
$i = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

in the place of:

<a class="lbp-inline-link-1 cboxElement" href="#">

put

<a class="lbp-inline-link-<?php echo $i;?>" href="#">

do the same for the:

<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">

put

<div id="lbp-inline-href-<?php echo $i; ?>" style="padding:10px; background: #fff;">

and before the endwhile put

<?php 
$i++;
endwhile; else: ?>

OBS: you have to set the number os posts being show the same number of the "Number of Inline Lightboxes::"

Eg.: If the post list will show, 10 posts per page, on step 2 "Number of Inline Lightboxes::" you have to set to 10.