Linking an iframe to open in lightbox

Question

Can I use a link to link to iFrame content that opens in a lightbox or fancybox?

EG; View Graphic Design Gallery Click here> Lightbox displaying my gallery from another site

Possible? How would I encode it in a lightbox / fancybox? I know that this is possible now, but cannot be implemented with my layout.

Update - December 17th, 2011

I am trying to do this with fancybox, below is a link to the layout I am developing - I was able to implement this in another document from scratch, naming the same / css libraries in my head, so this cannot be the case. I feel that these are some conflicts between some of my other inline JavaScript. Can someone help me understand why iFrame fancy box will not be implemented with my layout? (I know that some JS and code that is not used in the atm layout, but this is only because I disabled it before debugging, I will use all this code)

Corresponding link

Answer 1

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

There are two ways to do this:

$.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(); }); 

By clicking on the link, you will load google in the iframe. if you want it to boot without clicking:

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

You can also set the visibility of the link as hidden.

Answer 2

With DivBox, you will 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 3

I use shadowbox and do this. Download and link in javascript shadowbox and css. Then you can use the following to view the iframe inside the shadowbox. An iframe can contain anything (including an iframe).

Make a link in your body:

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

Then, by clicking on this event, follow these steps in the 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

After polling all the different lightboxes, I settled on Colorbox . It is built using jQuery, so there are no conflicts. It is easy to implement, comes with several options for appearance and is easy to change the style if I need.

Answer 5

Colorbox is the one! I use it from the very beginning of the project, its lightweight and easy to use.

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

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

Take a look at the examples on this site.