tags:

views:

3534

answers:

6

Hi,

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.

Thanks. Andrew

+1  A: 

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.

Sbm007
Where would I put that selector? Within the jquery.prettyPhoto.js file where it tries to do show()?
Andrew
Could you edit your post to show the code please and I'll have a look.
Sbm007
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
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
A: 

hi,

i want to implement this fabulous script in a custom page.. my problem is that i would like to use this mixed gallery not in an overlaying div, but in an existing div on my page.

is it possible to do that ? thanks in advance

niko
Hi.Do you mean that you would like the lightbox to display within the DIV? If so you may have to modify the source to make it do that.BTW. You may have better lucky opening up a new thread for your question.
Andrew
A: 

Hi Andrew,

I had the same problem and it's fixed now. I had to change the code a little bit, but it's fine now. I was wondering about this:

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

Could you please share this 'setting'? I'm experiencing the same.

Thank you very much!

Floris

Floris
A: 

Hi, i'm having the same issue, but i can't seem to understand the answer that's been stated in this thread...

Can someone help me simplify and clarify on how to get the photos to display in iframe parent?

Thanks!

jia
A: 

Hi,

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.

Andrew
A: 

Hi Andrew,

It appears you've solved this issue but I don't understand yet - I've tried carefully implementing all the changes outlined here, but can you explain to me the selector $("#myid", top.document); OR $("#myid", parent.document.body); - I don't know what to do with that!

I've posted more in detail in the prettyPhoto support forums discussion you started - http://forums.no-margin-for-errors.com/comments.php?DiscussionID=32.

Thanks in advance!,

-Matthew

Matthew
Hi Matthew,The $("myid", top.document) and $("#myid", parent.document.body); selectors mentioned in sbm007's posts were his initial suggestions which didnt work. In his post edit he provided the answer that did work, which was to search the iframe contents for the images.
Andrew
From what I can see in your post on "no-margin-for-errors" it looks fine.Can you post your html code and send me an email and I will forward you the modified pretty photo source.
Andrew
Sure! But I can't seem to find your email address. The site I'm working on is fuzzieworld.com/www/index.html - I want to have everything in iframes but can't get the gallery to work yet. I will post my updated best attempt later today, and my email address at fuzzieworld.com/www/contact.html Please get in touch at your earliest convenience!
Matthew
fuzzieworld.com/www is the working directory for the new site designfuzzieworld.com/www/gallery.html is the working prettyPhoto lightbox gallery but is its own pagefuzzieworld.com/www/newgall.html is the non-working gallery made to be contained in an iframe inside of index.html
Matthew
Ahh. I put in a typo in my description of changes. The line displayIframeContentsInParent = true on around line 20 should end in a comma and not a semi colon. i.e. "displayIframeContentsInParent = true,"
Andrew
I made that change and put your script in my app and it works fine.
Andrew
Got it working finally! Kinda... The script is noticeably slower when called from inside the iframe, sometimes skips pictures (when using left/right keys), and will only start on the first picture, regardless of which picture you clicked.I'm going to sleep on it, tomorrow I'll look at the .js myself and see if I can get lucky with something. :PGood eyes on catching that semicolon! G'night,-Matthew
Matthew
I'm uploading the halfway working gallery - fuzzieworld.com/www/index3.html will take you there - also check fuzzieworld.com/www/contact.html so you can shoot me an email as it would be more convenient than these comment boxes :)
Matthew