Fancybox links only opening first WordPress post – need to open different posts each time its clicked

I’m working on a site that has a buy now option on a book catalog page (each book is a custom posts). The books are added as custom posts by an admin in addition to custom fields with links, etc. When the user clicks a buy it now button, Fancybox pops up a window that has different places where one can buy the book. The problem I’m running into is each popup is just of the first post in the array. I’m extremely new to jQuery and PHP. I’m assuming I have to create some kind of counter, but I have no idea how to do that. But basically, each buy it now button has to open the separate custom post.

Relevant code:

Read More

js:

<script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox(); });
</script>

html:

    <?php else: ?>
            <li>
                <div class="thumbnail"><?php the_post_thumbnail(); ?></div>
                <div class="content">
                    <h2><?php the_title(); ?></h2>
                    <p><?php echo substr(get_the_content(), 0, 250); ?></i>...              
                    <a class="read-more" href="<?php echo get_permalink(); ?>">Read More &gt;</a></p>
                    <a class="buy-now fancybox" href="#buy-now-popup2">
                        <img class="buy-now-img2" src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/buy-now.png">
                    </a>
                </div>
            </li>

    <div id="buy-now-popup2">
            <h2>Choose a Format</h2>
                <ul>
                    <li>
                        <div class="thumb"><img src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/paperback.png"></div>
                        <h4>Paper Back</h4>
                        <div class="stores">
                            <?php $pbamazon = get_post_meta($post->ID, 'paperback-amazon', true); ?>
                            <?php $pbbn = get_post_meta($post->ID, 'paperback-barnesnoble', true); ?>
                            <?php $pbib = get_post_meta($post->ID, 'paperback-indiebound', true); ?>
                            <?php $pbpenguin = get_post_meta($post->ID, 'paperback-penguin', true); ?>
</div>
</div>

That isn’t the whole buy-now-popup2 div but I don’t think the rest of it has anything to do with my problem. Thanks in advance.

Related posts

Leave a Reply

1 comment

  1. Well, I was able to figure this out on my own, and it was much simpler than I thought it would be.

    I simply changed the fancybox href attribute to:

    <a class="buy-now fancybox" href="#buy-now-popup<?php the_ID(); ?>">
    

    and the popup id to:

    <div id="buy-now-popup<?php the_ID(); ?>" class="buy-now-catalog">
    

    so that WordPress would automatically generate new divs for each link.