jQuery Lightbox Evolution: Load lightbox outside a

问题:

I'm using a jQuery Lightbox Evolution plugin, and I have photo links inside a iframe. I wanna that Lightbox open outside a iframe, in a parent window.

In the FAQ, i find that I can put some code on parent:

<script type="text/javascript">
  function frameload(iframe) {
    var doc = iframe.contentWindow || iframe.contentDocument;
    if (doc.document) { doc = doc.document; };

    $('.lightbox', doc.body).lightbox();
  };
</script>

But dont work, because my code is generated inline, dynamic with php. So I dont 'initialize' the plugin in head tag, just call that in the code.

There's my piece of code that initialize the plugin:

echo 
'<a style="cursor:pointer;" id="open_'.$emp_alias.'"></a>';

echo 
'<script type="text/javascript">
   $(document).ready(function(){
     $("#open_'.$emp_alias.'").click(function(ev) {
        $.lightbox([';
        while($images_array = mysql_fetch_assoc($query_emp_images)) {
     echo '"/destaques/'.$images_array['path'].'",';
    }
    echo
         ']);
    ev.preventDefault();
    });                                       });
</script>';

There's a way to load this in the parent window?

Thanks

回答1:

It's in the documentation:

9.How can I open Lightbox in parent window from inside an iframe? First thing you need to do is install the script in your parent window, but don't initialize it. Don't use jQuery(document).ready, instead, add the code below:

<script type="text/javascript">
function frameload(iframe) {
    var doc = iframe.contentWindow || iframe.contentDocument;
    if (doc.document) { doc = doc.document; };

    jQuery('.lightbox', doc.body).lightbox();
};
</script>

Insert onload="frameload(this);" in your iframe markup.

<iframe src="iframe_child.html" onload="frameload(this);" width="500" height="500"> </iframe>  

When you click an image in the child page, the lightbox will be displayed in your parent page. Remember to remove the script in your child page to avoid any problem.

回答2:

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>