How to open colorbox gallery at specific image from url?

Question

Say that you have a standard colorbox gallery:

<a href="img1.jpg" rel="gallery">img1</a>
<a href="img2.jpg" rel="gallery">img2</a>
<a href="img3.jpg" rel="gallery">img3</a>

My question is, is it possible to, say open the gallery from a link, like <a href="gallery#img2">link from other page</a>, redirecting to the gallery page, open the colorbox starting with img2, but also have the rest of the rel group in the colorbox window?

I hope I make sense!

Thank you

EDIT: I was a bit quick on the trigger there... I meant to give examples of what I already tried (simplified):

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
        });
    });
</script>

Result: Cannot open anything.

<script>
    $(document).ready(function(){
        $.colorbox({
           href: 'img2.jpg',
        });
    });
</script>

Result: Open the image in 'href', but without the rest of the group.

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
           href: 'img2.jpg',
        });
    });
</script>

Result: Same as above.

score 5 · Accepted Answer · edited May 23 '17 at 12:04

First, let's make sure I understand... 2 pages, first links to a gallery on second. When link in first page is clicked, gallery on second loads to image clicked (e.g, image 2 of 4). If so...

On the page pointing to the gallery, use links such as:

<a href="gallery?img=img1">img1</a>

In your gallery page, using the getUrlParam from this answer, your JS:

//get parameter from url, returns null if not sent
function getUrlParam(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

$(function() {
    var imgId = getUrlParam("img");

    //init the gallery
    $(".gallery").colorbox({
        rel: "gallery1"
    });

    //if an image id sent, activate that colorbox item
    if(imgId) {
        $("#" + imgId).click();
    }
});

Then make sure all your gallery items have the class and id, for example:

<img id="img1" class="gallery" href="myImage" />

That's it! You're done.

Now a little explanation to clarify why your code wasn't working...

Notice the lack of the html rel attribute in my example above. Don't confuse the "rel" colorbox property with the html rel attribute. It's understandable (same name), but the two aren't related in the way it looks they are (best off not even thinking of them as the same). Indeed, you don't even need the html rel attribute. So just delete it.

The colorbox "rel" property is simply used to group colorbox items that have already been found. In fact, the value of "rel" could be "xyz" - it's simply an arbitrary name of your colorbox group. The rel property itself doesn't go looking for items belonging to the group, just names the items found. You use the colorbox function with selectors to find the items:

$(".gallery").colorbox();

This code finds all dom elements with the class gallery. Now without that rel property, all those elements would be seperate - you click on one and see only that one image. Use the "rel" property to be able to see all of the items found when you click on one of them:

$(".gallery").colorbox({
    rel: "myWonderfulGallery"
});

So in the context of your 2nd and 3rd examples, you only saw 1 image because only 1 image was referenced (via the href property - again, the rel property doesn't grab any images). Hope that helps!

Your answer did the trick! Excellent written, detailed and easy to follow! Thank you so much! — mistalaba, Jul 30 '12 at 02:13
How can I get same result, but call Colorbox like this: `$.colorbox({...})`? — Mehdi Dehghani, Jul 07 '19 at 08:15

How to open colorbox gallery at specific image from url?

1 Answers1