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

Question

我试图让fancybox大拇指正常工作。

我已经导入了所有的js/css文件，但它只显示我点击过的图片（没有thums，也没有幻灯片）。我希望同一页面中的每张图片都可以加载到fancybox（w/thumbs）和每个图片的标题“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', ''); 
    } 
}); 
}); 

SOLUTION

$('.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'); 
} 
});