Fancybox縮略圖不起作用

-1

我試圖模仿這個jsfiddle：http://jsfiddle.net/kevin11189/uZCC6/1269/但是縮略圖沒有出現。Fancybox縮略圖不起作用

這裏是我的代碼：

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Gallery</title> 
     <meta name="description" content="An interactive getting started guide for Brackets."> 
     <link rel="stylesheet" href=""> 

     <style> 
     .hidden { 
    display: none; 
} 
     </style> 

<!-- Add jQuery library --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


     <script type="text/javascript" src="js/jquery.fancybox.js"></script> 
     <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" /> 


     <script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script> 
     <link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" type="text/css" media="screen" /> 

     <script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script> 
     <link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 

     <script type="text/javascript" src="js/jquery.fancybox-media.js"></script> 

     <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script> 
     <script> 
      $('.fancybox-thumbs').fancybox({ 
       prevEffect : 'fade', 
       nextEffect : 'fade', 

       closeBtn : true, 
       arrows : true, 
       nextClick : true,     

       helpers : { 
        thumbs : { 
         width : 40, 
         height : 40 

        } 
       } 
      });</script> 


    </head> 

    <body> 
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a> 

     <a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a> 

     <a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a> 

     <a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a> 






    </body> 
</html>

的jsfiddle：http://jsfiddle.net/3bbkjdcc/

我加了相同的資源作爲工作的jsfiddle但它並沒有work.Any幫助？

來源

2015-06-22 mikeb

添加的資源具有相對（/jquery.mousewheel-3.0.6.pack.js）路徑。您需要添加絕對路徑，如https://st4b.googlecode.com/files/jquery.mousewheel-3.0.6.pack.js。 – Christoph

您需要在外部資源選項中添加絕對URL路徑，而不是相對。查看Firebug中的控制檯錯誤。

例：http://fancyapps.com/fancybox/source/jquery.fancybox.js，而不是僅僅jquery.fancybox.js

檢查：JSFiddle，我叉你的jsfiddle和編輯的外部來源。

External Sources

來源

2015-06-22 13:02:38

我編輯的帖子，但仍然無法正常工作。我做錯了嗎？ – mikeb

選中此項：http://jsfiddle.net/Manojkr/sdkkca2f/我分叉了JSfiddle並編輯了源代碼。 –

硫是我第一次使用這些東西。現在我應該怎麼做才能使它在我的筆記本電腦上工作？ – mikeb

Fancybox縮略圖不起作用

回答

相關問題