のWordpress + SmoothDivScroll +カラーボックスは：私はこのフォトギャラリー<a href="http://lifelistchase.com/japan-photo-gallery" rel="nofollow">http://lifelistchase.com/japan-photo-gallery</a></p> <p>各画像がアップロードされ、wordpressのポストとして挿入されているを持っているカラーボックス

Question

におけるそれぞれの画像のそれぞれについて、パーマリンクを含めます。 サムネイル（the_post_thumbnail）がSmoothDivScroll jsとともに表示されます。サムネイルをクリックすると、大きな画像を表示するカラーボックスが表示されます（php echo catch_that_image（）を使用）。

大きな画像のカラーボックスに「Xのコメント」を入れたいと思います。 ）は、それぞれのイメージwordpressの投稿のパーマリンクに行きます 例：http://lifelistchase.com/japan-snow-monkeys-hugging

質問：誰かがカラーボックスにこのコメントのリンクを含める方法をありがとう正確に私を見ることができます！

画像ギャラリーコード

01プラグインはすぐにあなたがする必要があるので、生成されるマークアップをカスタマイズする方法を提供していません

$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です。