2012-07-10 4 views
0

내 페이지 : http://ilijaveselica.com/Gallery/GetCroatiaFavPhotosiFrame에서 클릭하면 라이트 박스 전체 화면이 열립니까?

이 페이지를 다른 웹 사이트에 구현하고 싶습니다. iframe을 사용해 보았지만 라이트 박스 (fancybox)는 전체 페이지가 아닌 iframe 내에서만 열립니다. 어떻게하면 많은 고통없이이 문제를 해결할 수 있을까요?

여기 보이는 방법은 다음과 같습니다 내가 그 일을 상상할 수 http://www.croatia-photography.com/

답변

0

유일한 방법은 fancybox 스크립트 자체 내 갤러리 요소를 포함한다.

따라서, 귀하의 페이지 http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos에, 대신이있는의 :

$('.gallery').click(function(e){ 
e.preventDefault(); 
parent.$.fancybox([ 
    {href:'images/01.jpg', title: '01'}, 
    {href:'images/02.jpg', title: '02'}, 
    {href:'images/03.jpg', title: '03'} 
],{ 
    // API options here 
}); // fancybox 
}); // click 
:

$(".fancybox-thumb").fancybox({ 
// API options here 
}); 

는 ... 그리고 갤러리의 각 이미지에 대한 모든 숨겨진 HTML 앵커, 이런 일이

괄호 안에 hreftitle을 제공합니다. 또한 팬시 박스가 부모 페이지 및 iframe 외부에서 열리라는 것을 나타 내기 위해 parent.$.fancybox을 사용했습니다.

그런 다음 당신이 iframe 외부 갤러리를 열 필요가 유일한 HTML은 다음과 같습니다

더 참조 및 DEMO (갱신 참조)
<a class="gallery" href="javascript:;"><img src="{thumbnail}" alt="" /></a> 

, 나는 그것을 시도하고 온라인으로 업로드이 https://stackoverflow.com/a/8855410/1055987

+0

을 확인하지만, 지금은 iframe에서 전혀 작동하지 않습니다. –

+0

동일한 도메인 내에서만 작동합니다. 도메인 간 도메인이 작동하지 않음 –

+1

iframe으로 작업 할 때 항상 동일한 출처 정책을 고려해야합니다. http://en.wikipedia.org/wiki/Same_origin_policy – JFK