iframe - iFrame でクリックすると、ライトボックスをフルスクリーンで開きますか?

Question

ここに私のページがあります: http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos

このページを別の Web サイトに実装したいと考えています。iframe で試してみましたが、ライトボックス (fancybox) はページ全体ではなく、iframe 内でのみ開きます。どうすれば多くの痛みを伴わずにこれを解決できますか?

これがどのように見えるかです：http://www.croatia-photography.com/

Answer 1

私が想像できる唯一の方法は、fancybox スクリプト自体にギャラリー要素を含めることです。

したがって、あなたのページhttp://ilijaveselica.com/Gallery/GetCroatiaFavPhotosでは、次の代わりに:

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

...そして、ギャラリーの各画像のすべての非表示の html アンカーには、次のようなものがあります。

$('.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

かっこ内にhrefandを指定していることに注意してください。また、fancybox が親ページと iframe の外側で開くことを示していたことtitleにも注意してください。parent.$.fancybox

次に、外部のギャラリーを開くために必要な唯一の htmliframeは次のとおりです。

<a class="gallery" href="javascript:;"><img src="{thumbnail}" alt="" /></a>

詳細な参照とデモ (更新を参照) については、これを確認してください https://stackoverflow.com/a/8855410/1055987