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

2 Answers

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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