Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

So I have a gallery-like archives page full of donors on my site. Each box of the gallery consists of a featured image from the donors post type. The goal for the site is, upon clicking a donor, to have a lightbox (I use fancybox) open with the information from the clicked donor. My problem: no matter which box I click on it opens the lightbox with only info from the first (top-left) donor. I've been playing around with using $.get and $_GET to retrieve the postID of the clicked image but to no avail so far. Here's what I'm working with:

php for donation-archive:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?> 
        <div class="span3 donation-wrapper">
            <a href="/donations?donateID=<?php echo $post->ID;?>"><?php the_post_thumbnail('medium'); ?></a>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

JQuery to launch fancybox:

$('.donation-wrapper a').on('click', function(e){
        e.preventDefault();
        <?php $donateID=$_GET['donateID'];?>
        $.fancybox.open([$('.donate-lightbox')], {
                padding : 0,  
            helpers : { 
                overlay: {
                    css : {
                        (styling...)
                    }
                }
            }
        });
    });

Then inside the the fancybox I have different headers/paragraphs etc styled like <h1><?php echo get_the_title($donateID);?><h1>

So to reiterate the question: why does this always launch the fancybox for the first item and never for the one the I click? Also, how do I remedy this? Thanks

share|improve this question

closed as off-topic by toscho Jul 18 at 5:47

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

    
Thanks for the answers. It turns out my client wanted some extra functionality that I couldn't get to work with the above layout, so I wound up going a different route. Just closing the question out. Thanks again! –  marker004 Jul 18 at 0:10

2 Answers 2

Instead of using the post IDs, can you use a counter and inline content?

<?php if (have_posts()) : ?>

    <?php $i = 1; //start counter ?> 

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

        <div class="span3 donation-wrapper">

            <a class="fancybox" href="#donate-<?php echo $i; ?>"><?php the_post_thumbnail('medium'); ?></a>

        </div>

        <div style="display:none;">

            <div id="donate-<?php echo $i; ?>">

                <?php the_content(); ?>

            </div>

        </div>

    <?php $i++; //end counter ?>

    <?php endwhile; ?>

<?php endif; ?>

I'm using ColorBox, which I believe works slightly differently...but the lightbox content is on the page in the div with id="donate-#", and wrapped in a div with display:none to hide it until it's clicked. Also, your jQuery would change to something like this:

$(".fancybox").fancybox({

  // options here

});
share|improve this answer

I agree with Rev, there has to be a common identifier that links the thumbnail image and the DIV containing the relevant donor info. The above example should work, assuming the posts aren't paginated.

I'm not sure why the post ID wouldn't be relevant either. I think you're HREF value is a little off. Perhaps something like this:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?> 
        <div class="span3 donation-wrapper">
            <a class="fancybox" href="#donorID-<?php echo $post->ID;?>">
                <?php the_post_thumbnail('medium'); ?>
            </a>
        </div>
        <div id="donorID-<?php echo $post->ID;?>" style="display:none;">
             Donor Content Here
        </div>
    <?php endwhile; ?>
<?php endif; ?>
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.