How to have value sent once clicking on a post, queried from database in WordPress

Question

I am trying to create an overview function using colorbox in WordPress.

Let me explain a little. In WordPress, pages have posts that are queried through this code:

$lastposts = get_posts( $args );
foreach($lastposts as $post) : setup_postdata($post); 
get_template_part( 'content', get_post_format() ); 
endforeach;

So this will grab all the posts that are in the WordPress database. Now each post is a product, so I want to know if there is a way I can add some code to this to have a value set to each post that, once someone clicks on the post image it will send the title of that post so it can grab an overview template (something I will make) of that specific product.

UPDATE:

Here is the jQuery that opens once any image is clicked:

<link media="screen" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/colorbox.css" />
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.colorbox-min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function()
    {
        $('.item-post a').colorbox({opacity:0.3, href:"../overviewa512454dzdtfa"});
    });
</script>

I want the title of the post the image is associated with sent to the file that is opened in colorbox.

Answer 1

I would put a rel="<?= $post['title'] ?>" in your links, so that each link has the post title. (Sorry if $post['title']" isn't the right attribute for the WP Post, but you'll find that). Then, in your javascript, pass the title in the URL, like:

<script type="text/javascript">
    $(function()
    {
        $('.item-post a').bind('click',function() {
            event.preventDefault();
            var product_title = $(this).attr('rel');
            colorbox({opacity:0.3, href:"../overviewa512454dzdtfa?title=" + product_title});
        });
    });
</script>

You should either URL encode the title you're passing inside the rel=" tag, or do it with javascript when you pass it to the colorbox.

Then, the overview page, you can access the title with $_REQUEST['title'].

Answer 2

content-page.php, content-aside.php, etc., are the files used in your WP theme to output your products in your loop, because of this line in your code :

get_template_part( 'content', get_post_format() ); 

So basically, all you need to do is to open these files and in the part that outputs the content of each post, surround the post image with an achor using the ID of your post (<a href="#" id="post-<?php the_ID(); ?>">...

Then you will easily be able to "target" the appropriate overview using the ID in your jQuery query...