jquery - WordPress+SmoothDivScroll+Colorbox : Include a permalink for each of the respective image in colorbox

Question

我有这个照片库http://lifelistchase.com/japan-photo-gallery

每张图片都会作为 WordPress 帖子上传并插入。缩略图 (the_post_thumbnail) 使用 SmoothDivScroll js 显示。单击缩略图时，会出现一个颜色框，显示大图像(使用 php echo catch_that_image()。

我想在大图像的颜色框中添加“X 评论”。单击 X 评论将转到相应图像 WordPress 帖子的永久链接。示例:http://lifelistchase.com/japan-snow-monkeys-hugging

问题:有人可以告诉我如何在 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; ?>

Catch_that_image 代码

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

SmoothDivScroll 代码

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

Answer 1

该插件不提供开箱即用的方法来自定义生成的标记，因此您必须进行一些调整。

首先，您需要将永久链接引用添加到标记中。我不太了解 php，所以我无法提供代码，但想法是添加 data-permalink属性为<a>元素。 this在颜色框回调中是这个元素，因此可以轻松访问:

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

在生成的标记中，颜色框的布局被创建到 #cboxContent 中元素。因此，您可以在调用颜色插件后添加一个链接:

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

该插件提供了一些回调。我们感兴趣的是onComplete事件。在此回调中，获取永久链接值并更改 href永久链接添加的元素:

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

这是一个working example在 jsfiddle 上。