Question

I’m using Colorbox in my WordPress plugin to create a gallery of Flickr photos. This is how a typical HTML code looks like –

<a href='link/to/large/photo/on/flickr.jpg' title='Caption for the photo on Colorbox'>
    <img src='link/to/small/photo/on/flickr.jpg'>
</a>

Colorbox uses the title value from anchor tag to render caption of the image in colorbox view.

Now I want to include a link to the photo’s Flickr page in the caption of the image. That works perfectly fine with the link getting displayed properly but it creates a problem with tool-tip text for the photo as it shows HTML code.

So the question is, how do I have different values for title and tool-tip text for the anchor tag.

So far I’ve tried to use onmouseover/onmouseout/onmousedown to change the title attribute and set it back. But this doesn’t work for me as multiple images are grouped in one Colorbox and all these events don’t fire for all the images.

I hope I have made my question clear.

UPDATE: Solution to this problem is to make Colorbox use alt attribute of img tag instead of title attribute of anchor tag.

jQuery("a[rel^='example4']").colorbox({
    title: function(){ return jQuery(this).find('img').attr('alt');}
    });
});

Answer 1

I wrote ColorBox but not the WordPress plugin for it, so I’m not exactly sure how it would be implemented with WordPress. You’ll want to use ColorBox’s title property to specify your own title format. For example:

$('.myphotos').colorbox({title:function(){
  var link;
  // do some to convert your image href to it's corresponding flickr URL
  return $(this).attr('title') + " <a href='" + link + "'>Flickr</a>";
}});