jquery - jquery fancybox 拇指 - 没有拇指 - 没有幻灯片

Question

我正在尝试让fancybox thumbs 正常工作。

我已经导入了所有的 js / css 文件，但它只显示了我点击的图片（没有拇指和幻灯片）。我希望同一页面中的每张图片都加载到fancybox（带拇指）和“alt”属性作为每张图片的标题。

HTML：

 .....
<a class="fancybox-thumb" rel="fancybox-thumb" href="/test.jpg">
   <img src="test.jpg" alt="text showing">
</a> 
 .....
 ......
<a class="fancybox-thumb" rel="fancybox-thumb" href="/awesome.jpg">
   <img src="awesome.jpg" alt="Awesome">
</a> 

Javascript

$('.fancybox-thumb').each(function () {
$(this).attr('rel', 'fancybox-thumb').fancybox({
    helpers: {
        type: 'image',
        openEffect : 'none',
        closeEffect : 'none',
        title : {
            type: 'inside'
        },
        overlay : {
            opacity: 0.8,
            css: {
                'background-color' : '#000'
            }
        },
        thumbs : {
            width: 50,
            height: 50
        }
    },
    beforeLoad: function () {
        this.title = $(this.element).find('img').attr('alt');
        this.href = $(this.element).find('img').attr('src').replace('_thumb', '');
    }
});
});

解决方案

$('.fancybox-thumb').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: true,
nextClick: false,
helpers: {
    thumbs: {
        width: 50,
        height: 50
    },
    title : {
        type: 'inside'
    }
},
beforeLoad: function () {
    this.title = $(this.element).find('img').attr('alt');
}
});

Answer 1

$('.fancybox-thumb').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: true,
nextClick: false,
helpers: {
    thumbs: {
        width: 50,
        height: 50
    },
    title : {
        type: 'inside'
    }
},
beforeLoad: function () {
    this.title = $(this.element).find('img').attr('alt');
}
});