Fancybox는 jQuery와 함께 작동하지 않습니다. infiniteScroll을 통해로드 된 페이지에서 벽돌

Question

벽돌집 플러그인 (http : // www. 4pixels.co.uk/)에 빌드 된 내 포트폴리오 웹 사이트에 세 페이지가 있습니다. 첫 번째 페이지에서 fancybox는 몇 개의 이미지에 대해 완벽하게 작동합니다.

그러나 infiniteScroll을 사용하여 첫 페이지의 맨 아래에 2 페이지를로드하면 멋진 상자 링크가 작동을 멈추고 두꺼운 상자 이미지를 새 페이지로로드합니다.

페이지 2 (http://www.4pixels.co.uk/index2.html)를 브라우저에 직접로드하면 모든 css/js에서 제대로 작동합니다. 이후 페이지 1에서로드 할 때이 페이지에서 js 및 css를 제거했지만 아무런 차이가 없으며 멋진 상자가 여전히 작동하지 않습니다 (시도 할 이미지는 Winston Ellis 웹 사이트의 반응 스크린입니다)

모든 내가

$(document).ready(function() { 
    $("#tumblelog").on("focusin", function(){ 
    $("a.example2").fancybox({ 
    'overlayShow' : true, 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic' 
    }); 
    }); 
    }); 

을 시도했지만 여전히 작동하지 않은

---

최고의 앤디. 나는 당신의 예제가 작동하는 것을 보아서 내가 볼 수 없듯이 그것을 구별해야 할 것입니다.

Answer 1

Fancybox v1.3.4는 (infiniteScroll에 의해 추가 된 것과 같이) 동적으로 추가 된 요소에 바인딩 될 수 없습니다).

1 : 당신이 fancybox 그 새로운 요소에 바인딩 갖고 싶어

, 당신은 두 가지 옵션이 있습니다 fancybox의 버전 2.x로 업그레이드 ... 또는

2 : fancybox의 v1.3.4을 계속 사용하지만, 스크립트를 변경하고()에서 jQuery를 사용하십시오. follow this link to learn how to