Menu
On my website, when clicking on links, I need to display a modal popup (see also this solution) that:
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):
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>
692
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.
103
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/
27
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
