Open fancyBox manually with thumbnail helpers

Question

I want to make a gallery with only one preview picture and thumbnails helper. I have used the snippet provided by the author for the gallery with only one preview picture and then I added the code for show the thumbnails helper, in this way, but it doesn't show the thumbnails.... I suppose because when you open fancybox manually you don't specify where are the thumbnails, how could it be resolved?

Answer 1

You also need to include the fancybox-thumbs CSS and JS files. They are included in the download under the helpers directory

Answer 2

As JFK has mentioned, you need to have jQuery and all the FancyBox files in the page DOM!

After you can try something like this to load FancyBox on the click event of an element whois ID is "myButton" (For my example)

$("#myButton").bind("click", function() {

    var jumpto = 0, //Change to load non zeroth Image
        data = [
        {   
            "href": "http://farm2.staticflickr.com/1019/3174174579_e2620a6c75_o.jpg",
            "title": "Kongen og Dronningen, Bispen, Norway",
            "thumbnail": "http://farm2.staticflickr.com/1019/3174174579_0c6a63ca70_s.jpg"
        },
        {   
            "href": "http://farm9.staticflickr.com/8029/8067360578_1c86b97745_b.jpg",
            "title": "Make my dream come true...",
            "thumbnail": "http://farm9.staticflickr.com/8029/8067360578_1c86b97745_s.jpg"
        },
        {   
            "href": "http://farm8.staticflickr.com/7134/7104102841_377648a7bb_b.jpg",
            "title": "Twilight",
            "thumbnail": "http://farm8.staticflickr.com/7134/7104102841_377648a7bb_s.jpg"
        }
    ];

    $.fancybox.open(data, {
        index: jumpto,
        padding: 10,
        transitionIn: 'none',
        transitionOut: 'none',
        type: 'image',
        changeFade: 0,
        mouseWheel: true,
        helpers: {
            overlay: {
                closeClick: false,
                speedOut: 200,
                showEarly: true,
                css: {},
                locked: true
            },
            title: {
                type: 'float' // 'float', 'inside', 'outside' or 'over'
            },
            thumbs: {
                width: 50,
                height: 50,
                source: function (image) {
                    return image.thumbnail;
                },
                position: 'bottom'  //'top', 'bottom'
            }
        }
    });

});