GuitarNinja2008 Posted July 24, 2014 Share Posted July 24, 2014 (edited) Hey guys! So, what I am trying to do is make a function that can be called when the user clicks an image, which will 1) find the original natural height of the image clicked, 2) open a new window containing the image at its natural size, and 3) neatly scale the size of the window to fit the size of the image. I have gotten the effect to work for one image at a time, but only by manually plugging in that specific image's width/height into the window.open() command. I want something that will work for any image regardless of it's dimensions, this way I can use the same function for multiple images. I admit I am very new to javascript and have been stuck on this same function for a few days. I have read lots of articles, but I still can't get it to work. My current approach is going off of advice I found here: http://stackoverflow.com/questions/8579391/getting-the-original-size-of-a-scaled-image. What I gathered is that somehow you have to create another copy of the image in your cache, so it does not get confused by css styling that changes the size, and then get the width/height from that. It seems you do that by using Image() and setting its .src property to the .src of the original image. Then I think you assign the .height/.width properties of that cached copy to variables and those should have your values. But to do that you have to use .onload somewhere to make sure that the image is loaded first. That said, here is my code so far: HTML: <img class="imageActive" src="Thirty-six Views of Mount Fuji - No. 14 (copy).jpg" onclick="openWindow()" alt="Mount Fuji, Japan" /> JS: <script type="text/javascript"> function openWindow() { var i = document.getElementsByClassName("imageActive"); var i2 = new Image(); i2.onload = function() { var xImage = i2["width"]; var yImage = i2["height"]; i2.src = i.src; window.open("Thirty-six Views of Mount Fuji - No. 14 (copy).jpg", "Mount Fuji","height=yImage, width=xImage, left=60, top=20"); }; }; </script> When the user clicks the image, it is supposed to call the openWindow() function I created and that is supposed to open the new window. However, when I test this in my browser nothing happens. I have tried changing the code slightly but again either nothing happens or a new window does open but it is too small. Any help with this is sincerely appreciated. It's been driving me nuts. lol Edited July 24, 2014 by GuitarNinja2008 Link to comment Share on other sites More sharing options...
davej Posted July 24, 2014 Share Posted July 24, 2014 Popups can be disabled in the browser. Also you would have to record the image dimensions somewhere. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2014 Share Posted July 24, 2014 Your OpenWindow function creates a new image and sets an onload handler for it, and that's all. After you set the onload handler then set the image src so that it actually loads. Link to comment Share on other sites More sharing options...
GuitarNinja2008 Posted July 25, 2014 Author Share Posted July 25, 2014 (edited) Oh, ok. Thank you guys for the input. I tried to set the src with the line: i2.src = i.src. To me this should make sense, as i2.src is what I am trying to give a value to and i.src is the value I am using. So I tried to use the assignment operator the same way you would when assigning a value to a variable. What would be a better way to set the src then? EDIT: Or are you saying that I am approaching it correctly but I simply put the "i2.src = i.src" code in the wrong place? Edited July 25, 2014 by GuitarNinja2008 Link to comment Share on other sites More sharing options...
davej Posted July 25, 2014 Share Posted July 25, 2014 I'm a little confused about your goal. What will this do that the simple HTML approach won't (approximately) do? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>img{width:200px}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function openWindow(ele) {var xImage = 4*ele.width;var yImage = 4*ele.height;var spec = "location=0,menubar=0,status=0,toolbar=0,height="+yImage+",width="+xImage+",left=60,top=20";//alert(spec);window.open(ele.src,"Name",spec);}</script></head><body><img class="imageActive" src="Autumn.jpg" onclick="openWindow(this)" alt="alt" /><br/><a href="Autumn.jpg"><img src="Autumn.jpg" alt="alt" /></a></body> </html> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 25, 2014 Share Posted July 25, 2014 Just look at what the function does: function openWindow() { var i = document.getElementsByClassName("imageActive"); var i2 = new Image(); i2.onload = function() { // do stuff after the image finishes loading };};You're not actually loading the image. You create an image, set a function to run after it finishes loading, and that's it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now