Question

I am using fancyBox 2, and I am using the “thumbnail helper.” When I have images in my gallery, fancyBox automatically uses the target images for thumbnails, but when I link to a video (Vimeo, in my case), it does not generate a thumbnail. I thought this would be easily remedied by just specifying an image for fancyBox to use for the video link, but I don’t know how to do this.

On the website, http://fancyapps.com/fancybox/, it says that there is a “source” option for the thumbnail helper, which should be used like this to enable thumbnails, and set source:

$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
            source : 'img/~~~.jpg'
        }
    }
});

But of course, that can’t work, because how could I specify which thumbnail to use for which target image or video? I can’t find any working examples of the thumbnail helper being used with videos, or custom thumbnails. Thank you in advance for any help.

EDIT:

The “source” option is described as a “function to obtain the URL of the thumbnail image”. I am trying to figure out how to use it. I am thinking of something like

source: item.thum

where I have a “thum” attribute for the thumbnail source in each item that I am referencing, such as

$.fancybox.open([
    {href : 'image1.jpg', thum : 'thumb1.jpg'},
    {href : 'image2.jpg', thum : 'thumb2.jpg'},
    {href : 'image3.jpg', thum : 'thumb3.jpg'}],
    {helpers : {
        thumbs:{source:this.thum}
    }   }
)

Would it be something like this? Can you see what I mean? How would I actually make that work? As you can see, I am not a speaker of JavaScript.

Answer 1

I made it work like this: my function found all items whose href element contained the string http://vimeo, and replaced those entire hrefs with the url of the thumbnail image I am using for the videos.

I had to learn about regular expressions, too, to make it work.

$(".fancybox").fancybox({
    helpers : {
        thumbs : {
            source: function( item ) {
                return item.href.replace(/http:\/\/vimeo.*/gi, 'img/vimeo.jpg');
    },
});

Actually, I also have an HTML file in an iFrame in my gallery as well, and I wanted to give that its own thumbnail, too, so my final product was:

$(".fancybox").fancybox({
    helpers : {
        thumbs : {
            source: function( item ) {
                return item.href.replace(/http:\/\/vimeo.*/gi, 'img/vimeo.jpg')
                .replace(/.*html/gi, 'img/html.jpg');
    },
});

For anyone who finds this thread, and wants to see an example of this in practice, here is a link to the site where I used it.