1

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.

5 Answers 5

2

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.

4
  • Where would I put that selector? Within the jquery.prettyPhoto.js file where it tries to do show()?
    – Andrew
    Sep 27, 2009 at 10:05
  • Could you edit your post to show the code please and I'll have a look. Sep 27, 2009 at 10:34
  • Thanks! That worked well. I put in a small check in the page that is displayed in the iframe so that it will not try to modify the anchors if the page is displayed in an iframe.
    – Andrew
    Sep 28, 2009 at 14:13
  • I noticed that the above method only works if you dont use image galleries. So I put in a new setting in the pretty photo js library which determines if it should look in the contents of iframes for other images in the same gallery as well as hiding other combo boxes in the iframes.
    – Andrew
    Oct 1, 2009 at 8:28
2

found this somewhere

<base target="_parent" />

put it inside the head of IFRAME

1

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.

0

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.

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.