External website / image size when displayed in a modal popup + iframe

Question

On my website, when clicking on links, I need to display a modal popup (see also this solution) that:

sometimes shows an external website (link #1 below)
sometimes shows just a JPG image (link #2 below)

Problem: when displaying:

external website in a modal popup, the size is ok (see link #1)
jpeg image in a modal popup, the size is not ok, in the sense it doesn't adapt to the screen (see link #2):

jpeg image in a new window, the size is ok, automatically adapted to fit to screen (see link #3)

Question: How to make that a JPG image displayed in a modal popup iframe auto-adapts its size, i.e. if the JPG's height is high, it's automatically resized? i.e. exactly like it would happen when displaying the image in a new window (see link #3)

PS: don't forget to enable Load unsafe scripts in browser when trying this code snippet. If not, iframes won't be displayed.

Or use this live demo jsfiddle.

document.getElementById("link1").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "http://example.com";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link2").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "https://i.imgur.com/pz2iPBW.jpg";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link3").onclick = function(e) {
  window.open('https://i.imgur.com/pz2iPBW.jpg', 'newwindow', 'width=700,height=500'); 
  e.preventDefault();
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link1">Click me (website, modal popup)</a><br>
<a href="" id="link2">Click me (jpg image, modal popup)</a><br>
<a href="" id="link3">Click me (jpg image, new window)</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

What is your serverside language? – Munim Munna Mar 09 '18 at 09:21 — Munim Munna, Mar 09 '18 at 09:21
check my answer, and let me know of any clarifications. – Munim Munna Mar 16 '18 at 09:33 — Munim Munna, Mar 16 '18 at 09:33

score 3 · Answer 1 · answered Mar 09 '18 at 09:34

If you need to fit the image to <iframe> window, you have to apply some CSS style or set image dimension by JavaScript. But in this case images are being served from different domain, so you cannot access the contents of the <iframe>.

The best way in this case and even if the image is not being served from different origin, is to make an html page for the image and load that html page in the <iframe>.

image-preview.py

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%}
            img{
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <img src="https://i.imgur.com/pz2iPBW.jpg" alt="">
    </body>
</html>

You can make it dynamic by using get parameters in url like, http://yourdomain.com/image-preview.py?src=https://i.imgur.com/pz2iPBW.jpg.

GuySake · Answer 2 · 2018-03-16T16:38:47.217

1

If you only need to load images from the other websites you can use <img/> with width:100; height: auto; balise.

You can keep the iframe popup for websites on an other event. Of course you could detect what content (img/website) you want to show and display the corresponding popup.

Here is the fiddle

edited Mar 16 '18 at 16:38

answered Mar 15 '18 at 11:07

GuySake

124
1
6

The popup should sometimes display an image, and sometimes a full website as `iframe`. In your jsfiddle, the first link is broken because the img can't load a website anymore, do you see what I mean? – Basj Mar 16 '18 at 10:04
Then keep `iframe` for websites and `img` for images. I updated my answer and fiddle. – GuySake Mar 16 '18 at 16:40
Yes that's why I finally used [here](https://stackoverflow.com/a/49318105/1422096). – Basj Mar 16 '18 at 16:40

Pytth · Answer 3 · 2018-03-15T15:14:00.530

1

Are you saying you need to sometimes display an image but in an iframe?

Without an iframe, here is one way you could do it using background-image:

https://jsfiddle.net/um2799fu/8/

edited Mar 15 '18 at 15:14

answered Mar 15 '18 at 15:06

Pytth

4,008
24
29

Thanks for your answer. With a hardcoded URL in `background-image` in CSS, then it's not dynamic: the page/image that the popup should display cannot change (it could but one would need to use JS change CSS, and I think it doesn't solve the problem anyway). [In your jsfiddle, the two first links just display a fixed once-for-all JPG with CSS]. – Basj Mar 16 '18 at 10:01

score 0 · Answer 4 · answered Mar 09 '18 at 11:48

0

You can use width only for that

width: 100%;

Before using width: 100%; After using width: 100%;

answered Mar 09 '18 at 11:48

Abhishek Shah

436
1
3
12

For height you can use height:100% – Abhishek Shah Mar 09 '18 at 11:50
Thanks for your answer. Could you provide a jsfiddle? I'm not sure it changes something for content inside an `iframe`. Also, look at my original jsfiddle posted in the question: I already use `#popup iframe { width: 100%; height: 100%; }` – Basj Mar 16 '18 at 10:06

score 0 · Accepted Answer · answered Mar 16 '18 at 10:12

I tried many solutions, but finally the easiest was to use both an iframe and an img (only one of them is used at a precise time, the other is empty):

<div id="popup">
    <iframe id="popupiframe"></iframe>
    <img id="popupimg"></img>
    <div id="popupclose">❌</div>
</div>
<div id="popupdarkbg"></div>

and to check with JavaScript if the URL is an image or not:

var url = this.getAttribute('href');
if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.png')) {
    document.getElementById('popupimg').src = url;
    document.getElementById('popupimg').style.display = "block";
    document.getElementById('popupiframe').style.display = "none";
} else {
    document.getElementById('popupiframe').src = url;
    document.getElementById('popupimg').style.display = "none";
    document.getElementById('popupiframe').style.display = "block";
  }

Note: it uses endsWith.

External website / image size when displayed in a modal popup + iframe

5 Answers5