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 :
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>