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 displayin

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.

Answer 2

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 3

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.

Answer 4

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 5

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.