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>

**合計初心者！

出典

2016-11-21 Mona Jalal

あなたの主な問題は、あなたがロードされ、外部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>

そして、すべてのlibsがロードされたとき、それは偉大な作業方法を参照してください。
;）

EDITは、うーん...
はまた、その上にjQueryを追加...

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

それはフィドルの外観に表示されない理由を私は知りません...
しかし、それは必要です。

第二EDITはそれはjQueryの2.2.4の代わりにjQuery 3.1.1とのより良い取り組んでいるように見えます
...
サムネイルが表示されませんでした...

はので、代わりにこれを追加します。

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

出典

2016-11-21 23:31:27

fancyboxが期待通りに動作しない

答えて

関連する問題