javascript 链接 iframe 以在 Lightbox 中打开

Linking an iframe to open in Lightbox

提问by doc holiday

Is it possible to use a link to link to an iFrame of content that opens in a lightbox or fancybox?

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

EG; View my Graphic Design Gallery Click Here > Lightbox displaying my gallery from a different site

例如; 查看我的平面设计图库 单击此处 > 灯箱显示来自其他站点的我的图库

Possible? How Would I code it within a lightbox/fancybox?I know it's possible now - but can't get it implemented with my layout.

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

Update - Dec 17th 2011

更新 - 2011 年 12 月 17 日

I'm trying to do it with fancybox, below is the link of the layout I'm developing - I've been able to implement this in a different doc from scratch calling the same libraries/css in the head, so it can't be that. I feel like it has to be some conflict-ions between some of my other inline JavaScript. Can anyone help me figure out why iFrame fancy box won't implement with my layout? (I know theres some JS and code that isn't be used in the layout atm, but it's just because I've been stripping it down to debug, I will use all that code)

我正在尝试使用fancybox来完成它，下面是我正在开发的布局的链接 - 我已经能够在不同的文档中从头开始调用相同的库/css来实现它，所以它可以'不是那样。我觉得它必须是我的其他一些内联 JavaScript 之间的一些冲突。谁能帮我弄清楚为什么 iFrame 花式框无法在我的布局中实现？（我知道有些 JS 和代码未在布局 atm 中使用，但这只是因为我一直在将其剥离以进行调试，因此我将使用所有这些代码）

Relevant link

相关链接

采纳答案by Ashkan Mobayen Khiabani

Lightbox is designed only for images but you can use fancybox.

Lightbox 专为图像而设计，但您可以使用fancybox。

there are 2 ways to do it:

有两种方法可以做到：

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

or:

或者：

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

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

Clicking on the link will load google in an iframe. if you want it to load without clicking :

单击链接将在 iframe 中加载 google。如果您希望它在不单击的情况下加载：

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

You may also set the link visibility style to hidden.

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

回答by rabusmar

With DivBox, you would do something like the following:

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

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

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

回答by Anil

I use shadowboxand do this. Download and reference in the shadowbox javascriptand css. Then you can use the following to view the iframe inside a shadowbox. The iframe can contain anything (including a iframe).

我使用shadowbox并执行此操作。 在 shadowbox javascript和 css 中下载和引用。然后您可以使用以下内容查看 shadowbox 内的 iframe。iframe 可以包含任何内容（包括 iframe）。

Make a link in your body:

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

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

Then on click of that event, do the following on DOM Ready.

然后单击该事件，在 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
        });
    });
});

回答by Tim

After trying out all the various lightboxes, I've settled on Colorbox. It's built using jQuery so there's no conflicts. It's easy to implement, comes with several options for look and feel, and it's easy to change the styling if I need to.

在尝试了所有各种灯箱之后，我选择了Colorbox。它是使用 jQuery 构建的，因此没有冲突。它很容易实现，带有多种外观和感觉选项，如果需要，也很容易更改样式。

回答by Ricardo Souza

Colorbox is the one! I'm using it since the begining of the project and its lightweight and easy to implement.

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.

看看这个站点中的例子。