CODEWITHSUNDEEP
javascriptjqueryfancybox
Andrew McLachlan
Andrew McLachlan

Reputation: 349

Pass custom data to FancyBox image gallery

I'm creating a standard image gallery using FancyBox. The page shows a list of thumbnails which are linked to bigger versions that appear in FancyBox. I want to pass a further URL to FancyBox so it will display a link to an full-res version of the image.

I can see that one way would be to add extra content to the link's title attribute and parse it out in the titleFormat function. However, this would screw up the tooltips in the thumbnails.

Is there any other way to pass the extra data I need to FancyBox? Alertnatively, is there a way to access the URL of the image displayed in FancyBox from which I can infer the URL to the full-res image?

Thanks.

Upvotes: 0

Views: 1504

Answers (2)

Andrew McLachlan
Andrew McLachlan

Reputation: 349

In this case I was able to infer the URL of the full size image from the preview. The currentArray and currentIndex parameters of the titleFormat function gave me what I needed.

function doFancyBox() {
    $('a[rel=imageGroup]').fancybox({
        'titlePosition': 'inside',
        'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
            return "<span class=\"Title\">" + title + "&nbsp;&nbsp;:&nbsp;&nbsp;<a href=\"" + inferFullSizeFromUrl(currentArray[currentIndex]) + "\">Full Size Image</a></span>";
        }
    });
}

function inferFullSizeFromUrl(url) {
    var str = url.toString();
    return url.replace(/_preview/i, "");
}

Upvotes: 1

user973254
user973254

Reputation:

You can add your own content like $('#fancybox_div').fancybox('<img src="1.jpg" />') and so on

Upvotes: 0

Related Questions