WordPress的+ SmoothDivScroll +彩盒：包括在顏色框

Question

對於每個相應的圖像的固定鏈接我有這樣的照片庫http://lifelistchase.com/japan-photo-gallery

每個圖像上載並插入作爲一個WordPress柱。 縮略圖（the_post_thumbnail）與SmoothDivScroll js一起顯示。當點擊縮略圖時，一個Colorbox出現顯示大圖像（使用php echo catch_that_image（）。

我想在大圖像的顏色框中包含一個「X註釋」點擊X註釋（s） ）將前往各個圖像的WordPress後的永久 例：http://lifelistchase.com/japan-snow-monkeys-hugging

問：有人告訴我究竟是如何包括顏色框此評論鏈接謝謝!!

圖片庫代碼

$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> 

在生成的標記，佈局FOT的顏色框被創建到#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); 
    } 
}); 

這裏有一個的jsfiddle working example。