Jquery Wordpress&x2B；SmoothDivScroll+；Colorbox：为Colorbox中的每个图像包含永久链接

我有这个照片库

每个图像都会上传并作为wordpress帖子插入。 缩略图（后缩略图）以SmoothDivScroll js显示。单击缩略图时，会出现一个颜色框，显示大图像（使用php echo catch_that_image（）

我想在大图像的颜色框中添加一个“X注释”。单击X注释将进入相应图像wordpress帖子的永久链接。 例如：

问题：有人能告诉我如何在colorbox上添加此评论链接吗？谢谢！！

图像库代码

$the_query = new WP_Query( $args );?>
     <?php while ( $the_query->have_posts() ) : $the_query->the_post();?> 
          <?php $status = get_post_meta($post->ID, 'status', true); ?><?php $finishdate = get_post_meta($post->ID, 'finishdate', true); ?>
          <a href="<?php echo catch_that_image() ?>" rel="favourite" title="<?php the_title(); ?>"><?php the_post_thumbnail(''); ?></a>
          <?php endwhile; ?>

---

该插件没有提供现成的方法来定制生成的标记，因此您必须稍微调整一下

---

首先，您需要将permalink引用添加到标记中。我不太懂php，因此无法为此提供代码，但我的想法是在JSFIDLE上的

上添加
数据permalink
属性。
非常感谢您的帮助！！我已经成功地从您在JSFIDLE上的工作示例将其实现到我的照片库中。我希望如此将来将能够帮助更多的人。对于那些可能不知道的人，下面是我如何将永久链接包含到属性中的。不要忘记接受答案，这样它就不会保留在未回答的列表中。
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

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; 
    }); 
    });

<a href="..." data-permalink="http://lifelistchase.com/japan-snow-monkeys-hugging">Photo_3</a>

// the css here is for the sake of the example, you'll have to style it accordingly
var $cboxContent = $('#cboxContent'),
    $permaLink = $('<a></a>').attr({
        id: 'cboxGoTo',
        href: 'javascript:void(0);'
    }).css({
        position: 'absolute',
        'z-index': 999,
        top: '50px'
    }).text('Permalink').appendTo($cboxContent);

var $colorBox = jQuery('div#makeMeScrollable a').colorbox({
    ...
    onComplete: function() {
        var $aTag = $(this), permalink = $aTag.data('permalink');
        $permaLink.attr('href', permalink);
    }
});