How to enlarge an image in a new window using Javascript

Question

I've seen plenty of solutions for this using jQuery but I need to do it in Javascript only. I'm trying to write a script that will attach an onclick listener to every image on a page, with a function that opens the clicked image in a new window at double its width & height. The problems I'm having are that the new window opens when the page loads, not when the image is clicked, and the new window is showing "undefined" for the image source and "NaN" for its width and height. Here is my .js:

var x = document.images;
var imageWindow;

function magnify() {
   for (var i = 0; i < x.length; i++) {
     x[i].addEventListener('click', launchWindow(this), false);
   }
}

function launchWindow(img) {
   var h = img.height * 2.0;
   var w = img.width * 2.0;
   imageWindow = window.open();
   imageWindow.document.write("<html><head><title>Image</title></head><body><img src=" + img.src + " width=" + w + " height=" + h + " alt='Magnified image'></body></html>");

   if(window.focus) {
     imageWindow.focus;
   }
}

And the relevant HTML of my test page:

Answer 1

Your loop to assign the event handler is actually running the event handler rather than assigning it. Try doing this instead:

x[i].addEventListener('click', function() { launchWindow(this) }, false);

How to enlarge an image in a new window using Javascript

Question

1 answers

solution1
3 ACCPTED 2014-03-07 16:39:18

How to enlarge an image in a new window using Javascript

Question

1 answers

solution1 3 ACCPTED 2014-03-07 16:39:18

solution1
3 ACCPTED 2014-03-07 16:39:18