CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

Linking an iframe to open in Lightbox

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

Upvotes: 4

Views: 17320

Answers (5)

Ricardo Souza
Ricardo Souza

Reputation: 16456

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.

Upvotes: 2

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34160

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.

Upvotes: 3

Tim
Tim

Reputation: 779

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.

Upvotes: 3

Anil
Anil

Reputation: 21910

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
        });
    });
});

Upvotes: 3

rabusmar
rabusmar

Reputation: 4143

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>

Upvotes: 5

Related Questions