使用缩略图助手手动打开 fancyBox答案

【问题标题】：Open fancyBox manually with thumbnail helpers使用缩略图助手手动打开 fancyBox
【发布时间】：2012-11-08 12:58:29
【问题描述】：

我想制作一个只有一张预览图片和缩略图助手的画廊。我使用了作者为画廊提供的 sn-p，只有一张预览图片，然后我添加了显示缩略图助手的代码，in this way，但它没有显示缩略图…… 我想是因为当您手动打开fancybox时，您没有指定缩略图在哪里，如何解决？

【问题讨论】：

标签： jquery fancybox fancybox-2

【解决方案1】：

您还需要包含fancybox-thumbs CSS 和JS 文件。它们包含在helpers目录下的下载中

【讨论】：

【解决方案2】：

正如 JFK 所提到的，您需要在页面 DOM 中拥有 jQuery 和所有 FancyBox 文件！

在你可以尝试这样的事情来加载 FancyBox 元素的点击事件后，whois ID 是“myButton”（例如）

$("#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'
            }
        }
    });

});

【讨论】：