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>4 Answers
Answers 1
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.
Answers 2
If you only need to load images from the other websites you can use <img/> with width:100; height: auto; balise.
Here is the fiddle
Answers 3
Answers 4
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:
0 comments:
Post a Comment