페이지의 이미지에 FancyBox2를 올바르게 적용하는 방법

-1

20 개의 이미지 세트에 Fancybox2를 사용하려고하는데 이미지가 아무런 영향을 미치지 않고 열립니다.페이지의 이미지에 FancyBox2를 올바르게 적용하는 방법

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Flickr Feed</title> 
    <link href="../_css/site.css" rel="stylesheet"> 
    <link rel="stylesheet" href="../fancybox2/source/jquery.fancybox.css" type="text/css" media="screen" /> 

    <style> 
     .image { 
      float: left; 
      padding: 10px; 
      border: solid 1px white; 
      margin: 0 30px 30px 0; 
     } 
     .image:hover { 
      border-color: red; 
      background-color: rgb(204,204,204); 
     } 


    </style> 

    <script src="../_js/jquery-1.7.1.min.js"></script> 

    <!-- Add fancyBox --> 

    <script type="text/javascript" src="../fancybox2/source/jquery.fancybox.pack.js"></script> 

    <script> 
     $(document).ready(function() { 
      var URL = "http://api.flickr.com/services/feeds/groups_pool.gne"; 
      var ID = "[email protected]"; 
      var jsonFormat = "&format=json&jsoncallback=?"; 

      var ajaxURL = URL + "?id=" + ID + jsonFormat; 
      $.getJSON(ajaxURL,function(data) 
        { 
         $('h1').text(data.title); 
         $.each(data.items,function(i, photo) 

           { 
            var photoHTML = '<span class="image">'; 
            photoHTML += '<a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '">'; 
            photoHTML += '<img src="' + photo.media.m.replace('_m', '_s') + '"></a>'; 


            $('#photos').append(photoHTML); 

           } 


         );//end each 

         $('#photos').fancybox(
           { 
            openEffect:'none', 
            closeEffect:'none' 
           } 
         ); 
        } 

      );//end get JSON 


     }); // end ready 
    </script> 

</head> 
<body> 
<div class="wrapper"> 
    <div class="header"> 
     <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p> 
    </div> 
    <div class="content"> 
     <div class="main"> 
      <h1>Flickr Images</h1> 
     <div id="photos"></div> 
     <br class="clearLeft"> 
     </div> 
    </div> 
    <div class="footer"> 
     <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p> 
    </div> 
</div> 
</body> 
</html>

나는 오류 메시지 FancyBox2 스크립트에서 '요청 내용은 나중에 다시 시도해 loaded.Please 수 없습니다'얻을 : 여기에 전체 코드입니다.

출처

2012-02-13 skiabox

"작동하지 않음"은 문제에 대한 설명이 아니며 캡슐화 된 엔티티 인이 질문에 데이터가 없습니다. –

주제가 수정되었습니다.이를 알려 주셔서 감사합니다. – skiabox

약간 좋아요. "나는 할 수 없다"는 여전히 유용성과는 거리가 있습니다. 그리고 우리는 질문에 코드를 원합니다. SO 문제는 단지 당신을위한 것이 아닙니다. 그들은 모두 같은 문제가있는 모든 사람들을위한 것입니다. 링크가 끊어지면이 질문은 더 이상 아무에게도 도움이되지 않습니다. –

fancybox 초기화 코드를 getJSON 메소 콜백으로 이동하십시오. 왜냐하면 모든 이미지를 추가하기 때문입니다. 그리고 fancybox 플러그인의 선택자가 잘못되었습니다. #photos이어야합니다. 이 시도.

 $.getJSON(ajaxURL,function(data) 
       { 
        $('h1').text(data.title); 
        $.each(data.items,function(i, photo) 

          { 
           var photoHTML = '<span class="image">'; 
           photoHTML += '<a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '">'; 
           photoHTML += '<img src="' + photo.media.m.replace('_m', '_s') + '"></a>'; 


           $('#photos').append(photoHTML); 

          } 


        );//end each 
        $('#photos').fancybox(
         { 
          openEffect:'none', 
          closeEffect:'none' 
         } 
        ); 
       } 

     );//end get JSON

출처

2012-02-13 22:09:45 ShankarSangoli

문제가 남아 있습니다 ... – skiabox

페이지에 js 오류가 있습니까? – ShankarSangoli

헬프를 찾기 전에 항상 자바 스크립트 콘솔에서 오류를 확인합니다.하지만 크롬 자바 스크립트 콘솔은 오류를 생성하지 않습니다. – skiabox

페이지의 이미지에 FancyBox2를 올바르게 적용하는 방법

답변

관련 문제