Wordpress + SmoothDivScroll + Colorbox: включить постоянную ссылку для каждого соответствующего изображения в colorbox - PullRequest
Новая
       10

Wordpress + SmoothDivScroll + Colorbox: включить постоянную ссылку для каждого соответствующего изображения в colorbox

2 голосов
/ 17 декабря 2011

У меня есть эта фотогалерея http://lifelistchase.com/japan-photo-gallery

Каждое изображение загружается и вставляется в виде поста WordPress. Миниатюры (the_post_thumbnail) отображаются с помощью SmoothDivScroll js. При нажатии на миниатюру появляется Colorbox, показывающий большое изображение (с помощью 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 code 

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

1 Ответ

1 голос
/ 17 декабря 2011

Плагин не предлагает готового способа настроить сгенерированную разметку, поэтому вам придется немного подправить.

Сначала вам нужно добавить ссылку на постоянную ссылку в разметку. Я не знаю php, поэтому не могу предоставить код для этого, но идея в том, чтобы добавить атрибут data-permalink к элементу <a>. this в колбэках colorbox это элемент, так что он будет легко доступен: 

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

В сгенерированной разметке макет для colorbox создается в элементе #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.

...