jquery - 使用 fancybox 生成缩略图库

Question

首先，抱歉英语不好:-)

在我拥有的一个小网站上，我想使用 Fancybox 向用户展示带有缩略图的图片库。但是，在打开 fancybox 的页面上，我没有图像的链接。 (因为图片很多)。

所以，我尝试了这样的事情:

$(document).ready(function() {              
    $.fancybox(
        [ 
            {href : 'rep/img01.jpg', rel : 'fancybox-thumb', class : 'fancybox-thumb'}, 
            {href : 'rep/img02.jpg', rel : 'fancybox-thumb', class : 'fancybox-thumb'} 
        ],
        {
            type : 'image',
            autoScale : true,
            prevEffect : 'none',
            nextEffect : 'none',
            thumbs: {
                width   : 50,
                height  : 50
            }
        }               
    );
});

它打开了我的画廊，但没有缩略图:-(希望我清楚...

Answer 1

Thumbs 是选项 helpers 的子选项，因此您的代码应该类似于

$(document).ready(function () {
    $.fancybox([{
        href: 'rep/img01.jpg',
        rel: 'fancybox-thumb',
        class: 'fancybox-thumb'
    }, {
        href: 'rep/img02.jpg',
        rel: 'fancybox-thumb',
        class: 'fancybox-thumb'
    }], {
        // API options
        type: 'image',
        autoScale: true,
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
            thumbs: {
                width: 50,
                height: 50
            } //  thumbs
        } //  helpers
    }); // fancybox
}); // ready