Force loaded / displayed image to link to an html ( my post ) page in colorbox

Question

Hello,

I'm using custom meta data to display images as a post in wordpress. When I click the image on my main page it opens in colorbox and this is perfect.

WHAT IS HAPPENING : now, with the image loaded into the colorbox, when I click on the image it cycles through the images on my home page ( NOT what I would like ).

WHAT I WOULD LIKE TO HAPPEN : with the image loaded into the colorbox, when I click on it, it will act as a link and load the post ( associated with that image ) into the colorbox.

I'm not clear on how to do this. The code I'm using to display the image meta data for the posts is:

     <?php

  // check for spine image
  $spine = get_post_meta($post->ID, 'spine image', $single = true);

  // check for spine class
  $spine_class = get_post_meta($post->ID, 'spine class', $single = true);

 ?>

 <div style=" #position: center; #left: 50%; height: 650px; display: table-cell; vertical-align: middle;">

  <div class="post" id="post-<?php the_ID(); ?>">

   <div class="entry">

    <?php

     // If there is a spine image, display it as the post
     if($spine !== '') { ?>

     <p>
      <a rel="bookmark" href="<?php echo $spine; ?>" title="<?php the_title_attribute(); ?>">
       <img src="<?php echo $spine; ?>" class="<?php if($spine_class !== '') { echo $spine_class; } else { echo "left"; } ?>"
        height="400" onMouseOver='resizeImg(this, 150)' onMouseOut='resizeImg(this)'
       />
      </a>
     </p>

     <?php } // end if statement

     // if there's not a spine image
     else { echo ''; }
    ?>

   </div>

  </div>

 </div>

And the function I'm using for colorbox is:

<script type="text/javascript">
$(document).ready(function(){
 //Examples of how to assign the ColorBox event to elements
 $("a[rel='bookmark']").colorbox({transition:"fade"});
});
</script>

So that the links with the attributes of 'bookmark' will open in the color box. How now can I make it so that the image in the colorbox links to the associated web page ( or act as a link to any web page... one step at a time )?

I hope this makes sense and thank you for any help, mlord

Answer 1

My question seems overly complicated once I realized how to do this.

The end result is that I used the ".inline" HTML structured example from the website ( http://colorpowered.com/colorbox/core/example4/index.html ). I can put the image from the wordpress loop href'd to the permalink and call it inline for each image / post to be displayed in the colorbox. Then I included the general colorbox class on that link which opens the post inside of the colorbox as well. Awesome!

Keep care, Matthew