Question

I’m trying to rig up a Knockout binding for Fancybox (although I don’t think that’s too much involved here). I’m calling Fancybox based on the code from the sample here: http://jsfiddle.net/STgGM/

$.fancybox.open([{
                    href: value.image(),
                    title: value.title()
                }], {
                    padding: 0
                });

The object passed in looks like:

{href: "http://example.com/imageurl", title: "Image Title"} 

Stepping through the fancybox code, it bails out of trying to show the image around line 855 of the script:

if (!type) {
    F.coming = null;

    //If we can not determine content type then drop silently or display next/prev item if looping through gallery
    if (F.current && F.router && F.router !== 'jumpto') {
        F.current.index = index;

        return F[ F.router ]( F.direction );
    }

    return false;
}

I’m not entirely sure what it’s looking for at this point. F.current is null and F.router doesn’t exist on the object.

So, in short, I’m trying to trigger Fancybox from a link click, without modifying my markup that much, or calling .fancybox() on a particular element. This appears to be possible, but it doesn’t appear to be working for me.

Answer 1

After digging through the code more, I eventually found the solution. Fancybox was trying to figure out what sort of content I was telling it to display by inspecting the URL I was giving it. As my URL had no extension, since it was coming from an external service that uses and ID to access an image, and not a full file name, Fancybox had no clue what I was telling it to display, and gave up.

The solution, since I know what the content is, is this:

$.fancybox.open({
            href: value.image(),
            title: value.title(),
            type: 'image'
        },//other stuff (not relevant to this)

This makes FancyBox work as expected.