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