FancyBox 코드 문제 여기에서 fancyBox을 다운로드 한

이 내가 내 '테스트'웹 페이지에이 코드입니다 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>fancyBox</title> 
     <meta charset="utf-8"> 

     <!-- Add jQuery library --> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script type="text/javascript" src="source/jquery.fancybox.pack.js"></script> 
     <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script> 

     <!-- Add fancyBox main JS and CSS files --> 
     <script type="text/javascript" src="source/jquery.fancybox.js"></script> 
     <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" /> 

     <!-- Add Button helper (this is optional) --> 
     <link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
     <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script> 
     <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" /> 
     <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script> 

     <!-- Add Media helper (this is optional) --> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      /* 
       * Simple image gallery. Uses default settings 
      */ 

      $('.fancybox').fancybox(); 

       /* Different effects */ 

       // Change title type, overlay closing speed 

      /* Button helper. Disable animations, hide close button, change title type and content */ 

      $('.fancybox-buttons').fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 
       prevEffect : 'none', 
       nextEffect : 'none', 
       closeBtn : false, 
       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        buttons : {} 
       }, 
       afterLoad : function() { 
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
       } 
      }); 

     </script> 
     <style type="text/css"> 
      .fancybox-custom .fancybox-skin { 
       box-shadow: 0 0 50px #222; 
      } 
      body { 
       max-width: 700px; 
       margin: 0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <h3>Button helper</h3> 
     <p> 
      <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a> 
      <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a> 
      <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a> 
      <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a> 
     </p> 
    </body> 

</html>

는 내가 경로를 생각 바로 내 서버에, 그러나 이것은 내가 볼 것입니다 :

http://www.bayingwolf.com/site_pop_up/image_pop.html

(버튼 도우미 아래)의 fancyBox 대신.

내가 뭘 잘못하고 있니?

감사합니다.

블루

출처

2013-09-27 user2825094