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:
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 ></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.
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:
and the popup id to:
so that WordPress would automatically generate new divs for each link.