Wordpress+SmoothDivScroll+Colorbox : Include a permalink for each of the respective image in colorbox

Question

I have this photo gallery http://lifelistchase.com/japan-photo-gallery

Each image is uploaded and inserted as a wordpress post. Thumbnails (the_post_thumbnail) are displayed with SmoothDivScroll js. When thumbnail is clicked, a Colorbox appear showing the large image (using php echo catch_that_image().

I WANT TO include a "X comment(s)" on the colorbox of the large image. Clicking on X comment(s) will go to permalink of the respective image wordpress post. Example: http://lifelistchase.com/japan-snow-monkeys-hugging

Question: Can someone show me exactly how to include this comment link on colorbox? Thank you!!

Image gallery code

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

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

Didier Ghys Didier Ghys · Accepted Answer · 2011-12-17T09:02:17

The plugin does not offer out-of-the-box a way to customize the generated markup so you have to tweak a little bit.

First you need to add your permalink reference to the markup. I dunno php that much so I could not provide a code for that but the idea is to add a data-permalink attribute to <a> element. this in the colorbox callbacks is this element so it will be easily accessible:

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

In the generated markup, the layout fot the colorbox is created into the #cboxContent element. So you could add a link after the call to the color plugin:

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

The plugin provides some callbacks. The one we're interested in is the onComplete event. In this callback, get the permalink value and change the href of the permalink added element:

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

Here's a working example on jsfiddle.

Wordpress+SmoothDivScroll+Colorbox : Include a permalink for each of the respective image in colorbox

1 Answers