Question

是否可以使用链接链接到在灯箱或幻灯箱中打开的内容的iFrame？

EG;查看我的平面设计图库点击这里＆gt;灯箱从不同的站点显示我的画廊

可能？我如何在灯箱/幻灯箱中对其进行编码？我知道它现在可以实现 - 但无法通过我的布局实现它。

更新 - 2011年12月17日

我尝试使用fancybox进行操作，下面是我正在开发的布局链接 - 我已经能够在不同的doc中实现这一点，从头开始调用相同的库/ css在头部，所以它不可能。我觉得它必须是我的一些其他内联JavaScript之间的冲突。任何人都可以帮我弄清楚为什么iFrame花式盒子不能实现我的布局？（我知道有些JS和代码不能用于布局atm，但它只是因为我已经将其剥离调试，我将使用所有代码）

Relevant link

Answer 1

使用DivBox，您可以执行以下操作：

<script type="text/javascript">
  $("#link").divbox({ type: 'iframe' });
</script>

<a id="link" href="http://your.other.site">Click Here</a>

Answer 2

Lightbox仅适用于图像，但您可以使用 fancybox 。

有两种方法可以做到：

$.fancybox({'href':'http://www.google.com',
  'type':'iframe'
});

或：

<a href="http://www.google.com" id="linktogoogle">google</a>

jQuery(document).ready(function () {
  $("#linktogoogle").fancybox();
});

点击该链接会在iframe中加载Google。如果你想加载而不点击：

 jQuery(document).ready(function () {
   $("#linktogoogle").fancybox().click();
 });

您也可以将链接可见性样式设置为隐藏。

Answer 3

我使用shadowbox并执行此操作。 Download and reference in the shadowbox javascript和css。然后，您可以使用以下内容查看shadowbox内的iframe。 iframe可以包含任何内容（包括iframe）。

在您的身体中建立一个链接：

<a class="modal" href="/path/to/iframe" rel="shadowbox;height=594;width=620">Click Me!</a>

然后点击该事件，在DOM Ready上执行以下操作。

$(document).ready(function(){
    $('.modal').click("click", function(e){
        e.preventDefault();             // Prevent the default action
        var url = $(this).attr('href'); // Get the iFrame href
        Shadowbox.open({
            content:    url,
            player:     "iframe",
            height:     400,
            width:      510
        });
    });
});

Answer 4

在尝试了所有各种灯箱后，我已经确定了Colorbox。它是使用jQuery构建的，所以没有冲突。它易于实现，具有多种外观和感觉选项，如果需要，可以轻松更改样式。

Answer 5

Colorbox就是其中之一！我从项目开始就开始使用它，它的重量轻，易于实现。

<a id="link" href="http://www.link.to.page.com">click here</a>

$("#link").colorbox({ iframe: true });

Take a look at the examples in this site.

链接iframe以在Lightbox中打开

5 个答案: