0

我想制作一个只有一张预览图片和缩略图助手的画廊。我使用了作者为画廊提供的片段，只有一张预览图片，然后我添加了显示缩略图助手的代码，以这种方式，但它不显示缩略图....我想是因为当你手动打开fancybox你没有指定缩略图在哪里，怎么解决？

4

2 回答 2

0

正如 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'
            }
        }
    });

});
于 2012-11-08T04:58:29.757 回答
0

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

于 2012-07-08T04:36:03.633 回答