Fit Iframe to an image, in a modal

Question

I have tried many option but nothing works. On my website clicking on any post open an iframe in a modal box (using Featherlight.js) with the wordpress single.php

The problem is I can't fit the modal box to the image inside, I just decided to had sizes into the html code so far.

<div id="post">
<a href="#" data-featherlight="#featherlight-<?php echo get_the_ID(); ?>"> 

        <?php
        if ( has_post_thumbnail() ) {
        the_post_thumbnail('post-thumbnails');
        }
        ?>  

    </a>

<div class="myframe">
<iframe class="lightbox" src="<?php the_permalink(); ?>" width="400" height="600" id="featherlight-<?php echo get_the_ID(); ?>" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

</div>

Do you reckon it's possible using javascript or jquery? I only know html, css and a bit of php but if I have to...

Thanks!

Ok I probably need to use Ajax apparently... – levystore Dec 12 '16 at 23:40 — levystore, Dec 12 '16 at 23:40

score 0 · Answer 1 · edited May 23 '17 at 11:53

If I understand correctly you are using Featherlight as a "lightbox", and when that box opens you want to resize the box to be the same size as the image inside it.

So essentially what you want to do is:

Add code which triggers after the lightbox opens
Have that code check the dimensions of the image
Update the dimensions of the <iframe> to the image's dimensions

If I have that right, the tricky part (especially if you are new to web development) is that you need to understand that all web development revolves around "documents" (web pages), and when you use any frame you wind up with multiple "documents": one for the parent that has the <iframe> and one for the page within that <iframe>.

So, first off you need to write logic that will trigger when the lightbox opens. You'll have to read the documentation for Featherlight to see if it gives you a "hook" for that. If not you'll have to add your own "onClick" logic that occurs when the user makes the click to open the light box. If you do the latter you might need to use a window.setTimeout to wait a second or two for Featherlight to create the <iframe>.

Once that logic triggers it will need to wait for the <iframe> to load. You can do this by attaching an onLoad event handler to the iframe (from your onClick handler). When that handler is triggered the <iframe> will be loaded and you can check the image's size.

To actually access the <iframe> document see this SO: Accessing the document object of a frame with JavaScript.

Once you do that you can access the image (something like iframeDocument.getElementsByTagAndClassName('img')[0], if there's only one image on the page) and check it's height and width CSS properties.

Finally, once you've done that you change the height and width CSS properties of the <iframe> and you should be all set.

Effectively it looks a bit tricky for someone like me... But actually from my example I only need to check height and width right? — levystore, Dec 13 '16 at 11:32
Well you need to both check it (on the image) and set it (on the iframe), but yes. For how to do that see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style — machineghost, Dec 13 '16 at 16:13

Fit Iframe to an image, in a modal

1 Answers1