CODEWITHSUNDEEP
jqueryhtmlhyperlinkcolorbox
MrGreggan
MrGreggan

Reputation: 31

colorbox: How to include link in title?

Hello to all coders of quality and others!

I have a simple gallery using colorbox...

    $(document).ready(function()
        {
        $(".gallery").colorbox({rel:'gallery', transition:"none", width:"95%", height:"95%"});
        })

    <a class="gallery" href="image.jpg" title="Click here to download hi-res version"><img src="imageThumbnail.jpg"></a>

I would like each photo to include a link in the title so the user can download a hi-res version (as a zip file). I tried setting the href to the zip file, but all it did was advance to the next photo. I see by the colorbox parameters there are many options, but I don't know enough about this to figure out which one is the best way.

Any help would be appreciated... thanks!!

Upvotes: 0

Views: 4405

Answers (3)

MrGreggan
MrGreggan

Reputation: 31

I got it working, thanks to your help Claude and isherwood... thanks!

Here's the colorbox jquery:

$(document).ready(function(){
    $(".gallery").colorbox({rel:'gallery', transition:"none", width:"95%", height:"95%"});
});

$(document).ready(function(){
    $("a.gallery").colorbox({
        rel: 'a.gallery',
        title: function(){
            var url = $(this).attr('name');
            var txt = $(this).attr('title');
            return txt+'<br /><a href="'+url+'" target="_blank">download hi-res (.tif.zip)</a>';
        }
    });
});

and the HTML:

<a href="Image.jpg" class="gallery" name="Image.zip" title="Image">
    <img src="thumbnail/Image.jpg">
</a>

YAY!!

Upvotes: 2

isherwood
isherwood

Reputation: 61083

It's in the ColorBox docs: Make the title a link

http://www.jacklmoore.com/colorbox/faq#faq-titlelink

$('a.gallery').colorbox({title:function () {
    return "To view full size, click here!".link(this.href);
}});

Obviously you'll need to modify the link argument, but you haven't given us enough information for an example.

Upvotes: 0

Claude
Claude

Reputation: 599

Looking at the "Usage" section at the top of colorbox homepage there is an example that uses a function for the title:

// ColorBox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
    var url = $(this).attr('href');
    return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

I think this is what you are looking for. In the function you can refer to a zip file rather than the same image in _blank window. But, this should get you going.

Upvotes: 2

Related Questions