Load colorbox image from something other than href attribute

Question

I got this:

$(document).ready(function(){
    $(".top_up").colorbox(
        {
            rel:'group3',
            opacity: '0.2'

        }
        );
});

And then with this:

<a id="172703536171203_661714" class="top_up" rel="pics" href="FULL_IMAGE_LINK" title=""><img src='THUMBNAIL' style='border: medium solid #1A1A1A;' /></a>

Works just fine..

But I wish the href="" to be something else than the full image link, and make the colorbox look for the full image link in either rel attribute or something else (doesnt matter, just another than href and id attributes) .

How can i do this?

Answer 1

You are 99% there already. However, instead of using the rel attribute, you could also use a custom data attribute, making the code more readable:

<a data-colorbox-href="http://...">
    <img ... />
</a>

then with the "href" option in your colorbox instantiation, use a callback to grab the value of the data-colorbox-href (or whatever) from the link clicked:

$(".top_up").colorbox({
    //all the other options you have up there, plus...
    href: function() {
        return $(this).attr("data-colorbox-href");
    }
});