title: Wordpress+SmoothDivScroll+Colorbox : Include a permalink for each of the respective image in colorbox
body: <p>I have this photo gallery <a href="http://lifelistchase.com/japan-photo-gallery" rel="nofollow">http://lifelistchase.com/japan-photo-gallery</a></p>
  
  <p>Each image is uploaded and inserted as a wordpress post. 
  Thumbnails (the_post_thumbnail) are displayed with SmoothDivScroll js. When thumbnail is clicked, a Colorbox appear showing the large image (using php echo catch_that_image(). </p>
  
  <p>I WANT TO include a "X comment(s)" on the colorbox of the large image. Clicking on X comment(s) will go to permalink of the respective image wordpress post.
  Example: <a href="http://lifelistchase.com/japan-snow-monkeys-hugging" rel="nofollow">http://lifelistchase.com/japan-snow-monkeys-hugging</a></p>
  
  <p><strong>Question: Can someone show me exactly how to include this comment link on colorbox? Thank you!!</strong></p>
  
  <p><strong>Image gallery code</strong> </p>
  
  <pre><code>$the_query = new WP_Query( $args );?&gt;
       &lt;?php while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post();?&gt; 
            &lt;?php $status = get_post_meta($post-&gt;ID, 'status', true); ?&gt;&lt;?php $finishdate = get_post_meta($post-&gt;ID, 'finishdate', true); ?&gt;
            &lt;a href="&lt;?php echo catch_that_image() ?&gt;" rel="favourite" title="&lt;?php the_title(); ?&gt;"&gt;&lt;?php the_post_thumbnail(''); ?&gt;&lt;/a&gt;
            &lt;?php endwhile; ?&gt;
  </code></pre>
  
  <p><strong>Catch_that_image code</strong></p>
  
  <pre><code>function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/&lt;img.+src=[\'"]([^\'"]+)[\'"].*&gt;/i', $post-&gt;post_content, $matches);
    $first_img = $matches [1] [0];
  
    if(empty($first_img)){ //Defines a default image
      $first_img = "/images/default.jpg";
    }
    return $first_img;
  }
  </code></pre>
  
  <p><strong>SmoothDivScroll code</strong></p>
  
  <pre><code>jQuery(window).load(function(){ 
  // Init Smooth Div Scroll   
  jQuery("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onmouseout", 
                                              autoScrollDirection: "backandforth", 
                                              visibleHotSpots: "always",
                                                      autoScrollStep: 1,
                                                      autoScrollInterval: 38 });
  
  // Init colorbox
      jQuery("div#makeMeScrollable a").colorbox({ speed: "500" });
  
      // Pause autoscrolling if the user clicks one of the images
      jQuery("div#makeMeScrollable").bind("click", function() {
              $(this).smoothDivScroll("stopAutoScroll");
      });
  
      // Start autoscrolling again when the user closes
      // the colorbox overlay
      (document).bind('cbox_closed', function(){
              jQuery("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
      });
       $("#cboxWrapper").bind("contextmenu",function(e){ 
              return false; 
      }); 
      });
  </code></pre>