Can an iframe pop up a Lightbox-style box?

Question

This question isn't about popping up an iframe inside a Lightbox; rather, it's about an iframe on a page that can launch its own Lightbox-style box in the page that contains that iframe. I'm thinking this can't be possible, because the iframe contains the contents of the other URL and whatever Lightbox that URL launches has to fit within the iframe. Thanks.

Answer 1

It is possible but only if you can have some controll of the remote server. There are various ways to do that but to gice you a quick start you can use this simple frame postman.

When you recieve a message from the frame (probably with image URL) you simply open a lightbox dialog in your main document.

Answer 2

If both sites belong to the same domain you can add the JS of the lightbox to the main frame and call the function inside the iframe using ´parent.function´

Answer 3

Try looking at fancybox. I know that supports iframes, and I always use it over Lightbox, much more customisable. I am pretty sure it can deal with nested iframes, however I could be wrong. Worth a try nether the less.

Can display images, HTML elements, SWF movies, Iframes and also Ajax requests

There are examples on the bottom of the page: http://fancybox.net/

Answer 4

I don't know if it's around anywhere online, but i saw Facebook give a presentation about injecting an iframe into other sites to circumvent such problems with cross-site issues. Worth a look.

Answer 5

We are facing the same issue, i guess one possible solution is window.open from an iframe.

Answer 6

A simple workaround that worked for me was to initialize lightbox in the parent window, then to create a blank placeholder link, and function that changes the href and clicks the placeholder link:

In the header or footer of the parent window:

<script type="text/javascript">
  $(function () {
    $('.lightbox').lightBox();
  });

  function image_preview(url)
  {
     $('#fakebox').attr('href',url);
     $('#fakebox').trigger('click')   
  }
</script>

Somewhere in the body of the parent window:

<a href="" class="lightbox" id="fakebox"></a>

So in the iframe I call the parent function to launch the fancybox:

<a href="JavaScript:void(0);" class="btn btn-tertiary btn-small" onClick="parent.image_preview('http://static8.depositphotos.com/1007989/1011/i/950/depositphotos_10118078-Grinning-Smiley.jpg')">Preview</a>