2013-01-06 109 views
0

我在我的網頁Fancybox 2 thumbnails。fancybox拇指不工作

一個拇指正在工作,但第二個不是。相反,它會在瀏覽器選項卡中打開第二個大拇指。

我該如何解決這個問題,以便第二個拇指在Fancybox中正常工作?

HTML:

<script> 
     $('.slideshow-thumbs2').fancybox({ 
     prevEffect: 'none', 
     nextEffect: 'none', 
     closeBtn: false, 
     arrows: false, 
     nextClick: true, 
     helpers: { 
      thumbs: { 
      width: 50, 
      height: 50 
      } 
     } 
     }); 
</script> 

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev1.jpg" title="Superjet 100"> 
    <img src="/SSJ100/Prev1.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt="" class="active"/> 
</a> 

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev2.jpg" title="Superjet 100"> 
    <img src="/SSJ100/Prev2.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/> 
</a> 

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev3.jpg" title="Superjet 100"> 
    <img src="/SSJ100/Prev3.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/> 
</a> 

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev4.jpg" title="Superjet 100"> 
    <img src="/SSJ100/Prev4.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/> 
</a> 

回答

0

你有包裹ready()方法內部的代碼,如:

<script> 
$(document).ready(function(){ 
     $('.slideshow-thumbs2').fancybox({ 
     prevEffect: 'none', 
     nextEffect: 'none', 
     closeBtn: false, 
     arrows: false, 
     nextClick: true, 
     helpers: { 
      thumbs: { 
      width: 50, 
      height: 50 
      } 
     } 
     }); 
}); 
</script> 
6

jsFiddle DEMO: Fancybox v2.1.3 and Thumbnail Helper

你粘貼代碼顯示,第一個的fancybox項有class="active"這可能會影響其他拇指不工作。

但是,沒有足夠的信息來確定爲什麼它只適用於1拇指而不適用於其他問題。

確保您已加載至少的jQuery v1.6.4和使用4 Fancybox2文件

兩個文件是的fancybox,剩下的兩個文件都爲縮略圖助手功能如您.fancybox()功能。您可以從已下載的Fancybox 2安裝文件中找到幫助程序文件位於幫助程序文件夾中。

即示於下面的fancybox 2屏幕內的4微型縮略圖是通過使用jquery.fancybox-thumbs.cssjquery.fancybox-thumbs.css縮圖助手文件。


enter image description here

+0

Downvoter,請提供反饋。謝謝。 – arttronics