Question

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

我想将此页面实施到另一个网站。我尝试使用iframe，但灯箱（fancybox）仅在iframe内打开，而不是整页。我知道如何在没有太多痛苦的情况下解决这个问题吗？

以下是它的外观：http://www.croatia-photography.com/

Answer 1

我能想到的唯一方法是在fancybox脚本中包含gallery元素。

所以，在您的网页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

请注意，我们在括号内提供了href和title。另请注意，我们使用parent.$.fancybox表示fancybox将在父页面和iframe外部打开。

然后，您需要在iframe之外打开图库的唯一html是：

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

有关进一步参考和DEMO（请参阅更新），请查看此https://stackoverflow.com/a/8855410/1055987

在iFrame中点击时打开灯箱全屏？

1 个答案: