Lytebox issue : can't escape when iframe output from db record / tinymce

[Aethon]

I have an page that outputs records from a database (php/mysqli). I'm using TinyMCE to enter in information into the database.

I'm trying to create an image gallery that uses Lytebox to view the images. By replacing a div in the record with an on-the-fly iframe containing a script that outputs the images in a certain directory, as resized using a php image resizer script.

So far, everything works great. The images show up with the right formatting in the right place.

The only problem is that when I click on an image, instead of the lytebox opening in the parent window, it opens in the small iframe that's written dynamically to the page.

I've used lytebox successfully before, even from within an iframe. This site also uses lytebox in a calendar iframe that works properly. But somehow, because the iframe is written dynamically from the php, it doesn't in this other case.

According to Markus Hay, creator of Lytebox, to use from within an iframe, you include the JS reference on the iframe and the JS and the CSS references on the parent page.

When I do this on the problem page "nouvelles", the popup still works but without the css so I ended up adding both references to both pages.

Either way, though, the popup appears inside the iframe and not above it, as it should.

Has anyone ever used lytebox this way?

Should it matter whether the code is hardcoded or dynamically written?

The one other aspect that might be affecting this, although it doesn't in the calendar application where it works fine, is that I use .htaccess mod_rewrite to clean up the urls a bit.

Any ideas, people?

Here is the php I use to create the iframe :

$display = utf8_encode($rsEv->getColumnVal("edescription"));

$galref = getBetween($display,'<div class="gall">','</div>');

$galcode = '<div class="gall">'.$galref.'</div>'; // so I can remove name from the description field and put images

$galframe = "<iframe src='/gallery/?gall=".$galref."' width='100%' height='auto' frameborder='0' onload='javascript:resizeIframe(this)' scrolling='no'></iframe>";

$display = str_replace($galcode, $galframe, $display);

Here is the source of the iframe :

<div style="float:left;margin:0 20px 20px 0;"><a href="/tinymce/fileman/Uploads/galleries/test1/ecole_bully.jpg" class="lytebox" data-lyte-options="group:gallery" data-title="Voici notres images de projet" >
<img src="/image.php/ecole_bully.jpg?width=150&height=150&cropratio=1:1&image=tinymce/fileman/Uploads/galleries/test1/ecole_bully.jpg"/></a></div>

[pixelsoul]

It really shouldn't matter whether you write the html for this, or if it is generated by PHP. PHP doesn't manipulate the DOM after the page has been rendered.

Do you have a live page somewhere that we might be able to see it in action?

[Aethon]

yes..it's at ecolehorizonsoleil.com/nouvelles/

at the main page, if you click on a date in the calendar, it works fine. But at the NOUVELLES page, it won't pop up in the top window.

[Aethon]

In the nouvelles pages, the first record contains a video followed by a collection of photos and I wanted to have them popup in a lytebox window.

In the calendar on the home page, you can click and bring up an event in the same box. Both are in iframes but in the calendar it works properly.

[Aethon]

OK...the client removed the photos... :( I'll try to set it up on a hidden page.

[Aethon]

I've set up a hidden page : http://www.ecolehorizonsoleil.com/news.php

[Aethon]

No ideas? did you check the page?