iframe - 在 iFrame 中单击时打开灯箱全屏？

Question

这是我的页面：http: //ilijaveselica.com/Gallery/GetCroatiaFavPhotos

我想将此页面实施到另一个网站。我尝试使用 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 。title另请注意，我们过去曾parent.$.fancybox表示fancybox 将在父页面和iframe 之外打开。

然后，您需要在外部打开画廊的唯一 htmliframe是：

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

如需进一步参考和演示（请参阅更新），请查看此https://stackoverflow.com/a/8855410/1055987