Question

我想制作一个只有一张预览图片和缩略图辅助工具的图库。我使用了作者为图库提供的片段只有一张预览图片，然后我添加了显示缩略图助手的代码， in this way ，但它没有显示缩略图.... 我想因为当你手动打开fancybox时你没有指定缩略图的位置，它怎么能解决？

Answer 1

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

下的下载中

Answer 2

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

你可以尝试这样的东西来加载FancyBox对一个元素的点击事件，他的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'
            }
        }
    });

});

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

2 个答案: