Linking an iframe to open in Lightbox

Question

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

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

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)

Relevant link

Answer 1

I use shadowbox and do this. Download and reference in the shadowbox javascript and css. Then you can use the following to view the iframe inside a shadowbox. The iframe can contain anything (including a 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.

$(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 2

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.

Answer 3

With DivBox, you would do something like the following:

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

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

Answer 4

Lightbox is designed only for images but you can use 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 :

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

You may also set the link visibility style to hidden.

Answer 5

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

<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.