fancybox不按预期工作

问题描述：

我跟随了这个jsfiddle中的代码并将所有内容写入单个html文件中。
缺少什么，因为它不像jsfiddle中显示的那样工作？ http://jsfiddle.net/kevin11189/uZCC6/1270/fancybox不按预期工作

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .hidden { 
     display: none; 
    } 
</style> 
</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> 
<script language="JavaScript"> 

    $('.fancybox-thumbs').fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 

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

     helpers : { 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 

</script> 
</html>

**总新手在这里！

答

你的主要问题是是新的小提琴，从我所看到的...

因为你会看到加载外部ressources。
在HTML文件的<head>补充一点：

<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css"> 
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css"> 
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> 
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

并查看所有库加载它是如何工作的伟大。
;）

编辑
嗯...
同时添加的jQuery最重要的是......

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

我不知道为什么它不会在小提琴的外部显示...
但它是必要的。

第二编辑
它看起来就像是使用jQuery 2.2.4，而不是jQuery的3.1.1更好的工作...
缩略图不显示...

所以添加此相反：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

fancybox不按预期工作

相关推荐