Expand a facebox/Lightbox outside an iFrame...

**Poontang** · 04-13-2009, 10:11 AM

1) Script Title: FaceBox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ebox/index.htm

3) Describe problem:

First: Hey friends! I am new to this forum, but certanly not to DD!
I have been using this site for some years, and I must say that I have learned alot from trying messing around with the scripts featured on the site.

Now, I want to use the Facebox or similar script to make pictures pop-up from an iFrame. My problem is that the iFrame is way smaller than the original imagesize (and the size I wan't the image to be shown).
So - can I make the Facebox (or lightbox) open these images on top of the page, using the space outside the iFrame as well?

I hope i made myself understandable

)
(I'm from Denmark, by the way)

KEEP DD ALIVE

()

**Poontang** · 04-22-2009, 06:35 AM

hmmmmm... Is it an impossible question?

**jscheuer1** · 04-22-2009, 06:54 AM

http://www.dolem.com/lytebox/

**Poontang** · 05-03-2009, 07:55 AM

Originally Posted by jscheuer1

http://www.dolem.com/lytebox/

Oh man! Thanks! That one ALMOST hit the spot..
But... it doesn't seem to work in FF and Safari!?

Any ideas?

**jscheuer1** · 05-03-2009, 08:52 PM

Do you mean the demo page for it doesn't work in those browsers, or that your implementation of it doesn't? In any case, I believe the author thinks it works in those browsers. Perhaps you are doing something wrong, or there could be a problem with the code I suppose. If the demo page works in those browsers and you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**Poontang** · 05-04-2009, 07:46 AM

Hey John.

My site is danish, so I hope it'll be understandable:

www.annikaaakjaer.com/test

PLEASE NOTE: in the lefthand side menu, you'll spot a TEST link.
This link opens the picture-site in a iFrame - the lytebox works perfectly in IE,
and partly also in FF and Safari. It seems to load the script very well, but it seems that the url to the picture isn't working.

BUT: If I test the htm that contains the thump SOLO in FF and Safari, it all works perfectly.
So - the error only occurs when FF and Safari loads the htm in the iFrame...

It's sad, because it works so damn perfect in IE - both 7 and 8.

**Poontang** · 05-08-2009, 04:35 PM

Any ideas why it doesn't work in Safari and FireFox?

**jscheuer1** · 05-09-2009, 01:30 AM

From what you've said so far, I can only think of two things -

As regards understanding the site, my Danish is weak. If you could tell me what to do - what to click on, in what sequence to see the issue - I might get an idea of what the trouble might be.
A general issue with Lytebox is that the iframe that it is displayed inside of should have a name attribute, ex:
HTML Code:
```
<iframe name="whatever" src="page_with_lytebox.htm"></iframe>
```

**Poontang** · 05-09-2009, 08:44 AM

Hello.

I hope this explanation is good:

On the site www.annikaaakjaer.com/test you will find a TEST link:

When pressed, the site opens a thump-section in an iFrame with only one thump (for testing):

In Internet Explore 7 (and 8) the lytebox loads perfectly, and the picture loads as it supposed to. On top of the site, incl. the space outside the iFrame that host the thump. Absolutly no problems there!

But in both Mozilla FF and Safari the "fade" effect and the picture-frame loads perfectly - but the picture doesn't load at all...

It clearly works fine, but seems to have problems "finding" the actual picture!?

A bit of codes:

In the index.html I have the following line (more lines are added to show possition):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="lightbox/lytebox.css" type="text/css" media="screen" />
<title>Annika Aakjær</title>

...and in the actual frame containing the thump:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
</head>

...and a little piece of code from the index.html:
<iframe name=target style="width:626px;height:531px" src="mainFrame.htm" allowtransparency="true" frameBorder=0></iframe>

I can't use the src="name_of_site_with_thump.htm" here, as I don't want the thump-site to be the "splash" site when entering the homepage...

I don't think it's relevant to post both CSS and JS codes here... I left them pretty much untouched, except for changing the images used for "close" button etc. And these files seem to load perfectly.

**jscheuer1** · 05-10-2009, 02:34 AM

It appears to be a path problem. Where you have:

Code:

<a href="presse/annika_aakjaer_presse_01.jpg" rel="lytebox" title="Foto: Sofie Amalie Klougart"><img src="presse/01.png" width="84" height="89" border="0"></a>

on this page:

Code:

http://www.annikaaakjaer.com/test/billeder/presse.htm

The browsers that are having a problem are not finding the path to the image. Perhaps if you made the path absolute, ex:

Code:

<a href="http://www.annikaaakjaer.com/test/billeder/presse/annika_aakjaer_presse_01.jpg" rel="lytebox" title="Foto: Sofie Amalie Klougart"><img src="presse/01.png" width="84" height="89" border="0"></a>

It may work.

If that takes care of it but you don't understand what an absolute path is, let me know. If there is still a problem even with the path as shown (don't forget to clear the browser's cache before testing the newly uploaded file), let me know that too.

Thread: Expand a facebox/Lightbox outside an iFrame...

Thread Tools

Search Thread

Expand a facebox/Lightbox outside an iFrame...

The Following User Says Thank You to jscheuer1 For This Useful Post:

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions