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

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.