display jquery prettyPhoto lightbox in iframe parent

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

Question

I am using jquery prettyphoto 2.5.3 and I was wondering how I can get the light box to display in the parent window of an iframe when an image link inside the iframe is selected?

Here's my code:

Page in the iframe:

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

When I load up this page on its own the lightbox works fine.

Iframe code:

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

However, when I load up the page with the iframe and click on the image link in the page that is in the iframe I want the lightbox to display in the parent window and not in the iframe.

Was it helpful?

Solution

Try this selector: $("#myid", top.document)

The top.document tells the selector to target the myid element which exists in the topmost document (your parent page). In order for this to work, jQuery must be loaded in the file which is viewed through the iframe.

Source: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1

EDIT

Ok the only way this will work is:

  1. Remove the following code from your real page (inner.html, the one contained in the iframe):

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. Now in your iframe page, add:

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. Also add the following JS code:

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

That should do the trick, but it will then ONLY work for the iframe page, and not directly from within the real page.

OTHER TIPS

found this somewhere

<base target="_parent" />

put it inside the head of IFRAME

I solved the problem with the iframe using copies of data. See the Script code at Main Page: Note: In my code there is an image that starts the gallery and the gallery is not visible, the image Id is "btngaleria". 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

The iframe html code is:

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

And the div at the the bottom of the page that receives the copied data:

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

I made tests for FF and IE and run normally.

The code changes that I made were:

  • Added a new true/false setting in the settings that start on line 18. i.e. displayIframeContentsInParent: false,

  • On around line 92 in the if(theGallery) if block check if the new setting has been set to true and if so, search the iframe contents for more images in the gallery:

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • On around line 125 in the open function: in the if($.browser.msie && $.browser.version == 6) if else block, add the following to also hide combo boxes in the iframe:

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • Finally on around line 300 in the close function: in the if($.browser.msie && $.browser.version == 6) if else block, add the following to make the combo boxes in the iframe visible again:

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

Of course, when you use pretty photo now you will need to set the new setting to true so that it will search the iframe contents for other images to display i.e.

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

I have posted a link to these changes in the prettyPhoto support forum so hopefully, these changes will get incorporated into the prettyPhoto source.

I finished with this:

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

It looks through all iframes on the main page. JQuery inside iframe's code is not required.

That's all about iFrame's content must be loaded before you try to access it:

http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top