How can I link directly to colorbox from an external link?

Question

I have built a portfolio webpage that uses colorbox to display images. I want to be able to link directly to the colorbox on that page from an external link sent to people.

Does anyone have any ideas on how I can achieve this?

Answer 1

Ensure that each image link has a unique id, e.g. <a id="photo1" href="photo1.jpg">

Add something like this to your document ready function, after the colorbox init code:

if (location.hash) {
    var link = $(location.hash); // location.hash includes "#" in front
    // change the hasClass() test below to match your image links only
    if (link.length > 0 && link.hasClass('colorbox')) {
        link.click(); // trigger colorbox
    }
}

Then send links with the id appended to the URL, e.g. http://example.com/#photo1