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

귀하의 주요 문제는로드 외부 능숙 해 보았을 것 때문에

... 내가 볼 수있는 것과, 바이올린에 새로운 될 것입니다.

<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가가로드 할 때 큰 작업하는 방법을 참조하십시오
는 HTML 파일의 <head>이 추가.
그것은 바이올린의 외관에 표시되지 않는 이유)

편집 음
...
또한 그 위에 jQuery를 추가 ...

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

을 모르겠어요 ...
하지만 필요합니다.

2 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가 예상대로 작동하지 않습니다.

답변

관련 문제