Fancybox 2自动缩略图

时间:2016-06-16 16:56:34

标签: javascript jquery html fancybox-2

我正在使用Fancybox 2作为图片库。我想知道如何通过源图像制作自动缩略图。在示例中,有2个图像,其中一个是原始的,另一个是缩略图。我想只设置原始图像,Fancybox应该自动创建缩略图。

<p> 
    <a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg"> </a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg"></a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg"></a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg"></a>
</p>

JS

$("a.fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none'
});

如你所见,我没有指定缩略图img。有没有办法自动创建?我的缩略图数不胜数。它可以在1-10之间。

1 个答案:

答案 0 :(得分:1)

这样的东西?

jQuery('.fancybox').each(function(i,e){
jQuery(e).css('background-image','url('+jQuery(e).attr('href')+')');
});

https://jsfiddle.net/agm65/f5xzaL2s/2/