동적 콘텐츠로 fancybox 갤러리를 실행하는 방법

Question

Im 시험을 통해 fancybox를 시험해 보았습니다. 작업 종류 아래에 다음 코드가 있지만 라이트 박스 클래스가있는 항목을 클릭하자마자 갤러리를 트리거해야합니다. 아래 코드는 gallery.htm의 콘텐츠를 콘텐츠 div로로드 한 다음 콘텐츠 div에서 미리보기 이미지를 클릭하면 fancybox를 실행합니다. 내가하려는 것은 한 번의 클릭으로 내 동적 콘텐츠를로드하고 멋진 상자를 실행하는 것입니다. 누구든지 제게 조언 해주십시오.

$(document).ready(function(){ 
$('.lightbox').live('click', function(e){ 
    e.preventDefault(); 
    //var url = $(this).attr('href'); 
    var url = "gallery.htm"; 
    $('#content').load(url, function(data, stat, req){ 
     $("a.lightbox").fancybox(); 
    }); 
}) 

});

1) :

는

Answer 1

기본적으로 두 개의 선택기 필요 감사드립니다. 하나는 갤러리 미리보기 이미지를 .load() 방법을 사용하여 페이지에로드하는 작업입니다 (예 : loadGallery :

<a href="javascript:;" class="loadGallery">add dynamic gallery thumbnails</a> 

2). 다른 요소는 fancybox에 요소를 바인딩합니다. lightbox. 파일 "gallery.htm"내 모든 요소가 있어야 다음과 같은 같은 class :

<a class="lightbox" rel="gallery1" href="images/01.jpg"><img src="images/01t.jpg" alt="" /></a> 
<a class="lightbox" rel="gallery1" href="images/02.jpg"><img src="images/02t.jpg" alt="" /></a> 
<a class="lightbox" rel="gallery1" href="images/03.jpg"><img src="images/03t.jpg" alt="" /></a> 

그런 다음 한 스크립트 fancybox하고 페이지에 갤러리 미리보기를로드 (메인 페이지) 이러한 요소를 결합 다른 등으로, 같은 click 내 fancybox 갤러리 화재 : 두 번째가 사용되지 않았기 때문에 우리가 .on() 대신 .live()을 사용하는

$(document).ready(function(){ 
// bind elements to fancybox 
$(".lightbox").fancybox(); 
// load thumbnails and fire fancybox gallery 
$('.loadGallery').on('click', function(e){ 
    e.preventDefault(); 
    var url = "gallery.htm"; 
    $('#content').load(url, function(data, stat, req){ 
    $(".lightbox").eq(0).trigger("click"); 
    }); // load 
    $(this).remove(); // you may remove the selector loadGallery after loading the thumbnails 
}); // on 
}); // ready 

공지 사항. .on() 메서드를 사용하려면 jQuery 1.7 이상이 필요합니다.

또한 첫 번째 항목에서 갤러리를 시작하는 데 .eq(0)을 사용했음을 유의하십시오. 그렇지 않으면 갤러리에 마지막으로 추가 된 요소가 문서에서 시작됩니다.

UPDATE : 나는 갤러리 항목이 포함 된 JSON 응답을 반환 Aajax 요청을 만들 것 여기 DEMO

Answer 2

작업을 참조하십시오. 그런 다음 수동으로 fancybox를 엽니 다 (예 : $ .fancybox.open (응답), 응답은 [{href : ''}, {href : ''}]와 비슷합니다)