I am writing a script that looks for links of the kind <a href='image_url'>...</a>, where image_url is the url of an image, and then adds to those tags an onclick='popupImage(this)' attribute to them that opens a popup displaying the image. I know how to look for those tags, and my question is about writing the popupImage function. So far, I have

function popupImage(link){
    window.open(link,'image','width=400,height=400'); 
}

This works pretty well, but I would like to resize the popup to fit the image, once it's loaded. Thus, I would probably need something of the kind

function popupImage(link){
    w=window.open(link,'image','width=400,height=400');
    w.onload = function(){
        ... Do something to get the size of the image...
        ... Resize the popup (this, I know how to do)...
    }
}

But I don't know how to access the image loaded by the window, since it has no DOM... The thing is that I really don't want to write some HTML into the popup to display the image (for some other reasons).

Any suggestion would be much appreciated. Thanks in advance!

I am writing a script that looks for links of the kind <a href='image_url'>...</a>, where image_url is the url of an image, and then adds to those tags an onclick='popupImage(this)' attribute to them that opens a popup displaying the image. I know how to look for those tags, and my question is about writing the popupImage function. So far, I have

function popupImage(link){
    window.open(link,'image','width=400,height=400'); 
}

This works pretty well, but I would like to resize the popup to fit the image, once it's loaded. Thus, I would probably need something of the kind

function popupImage(link){
    w=window.open(link,'image','width=400,height=400');
    w.onload = function(){
        ... Do something to get the size of the image...
        ... Resize the popup (this, I know how to do)...
    }
}

But I don't know how to access the image loaded by the window, since it has no DOM... The thing is that I really don't want to write some HTML into the popup to display the image (for some other reasons).

Any suggestion would be much appreciated. Thanks in advance!

• javascript

• First, a little light reading: stackoverflow./questions/5871640/… and en.wikipedia/wiki/Unobtrusive_JavaScript – Xotic750 Commented May 12, 2013 at 20:39
• Is your code being injected into the page, afterwards from an extension or Greasemonkey or the like, or is your javascript served up, along with webpage? – Xotic750 Commented May 12, 2013 at 20:41
• Thanks. The javascript code included at the bottom of the html file. – Nown Commented May 12, 2013 at 20:44
• Are you trying to get the images original size or the display/puted size? – Xotic750 Commented May 12, 2013 at 20:58
• I am trying to get the original size of the image. Then, I'll resize the popup to that + a few pixels. – Nown Commented May 12, 2013 at 21:03

2 Answers 2

Here is a solution based on your updated question

HTML

<a href="http://img145.imageshack.us/img145/1750/barcelonaagbartowernighnx7.jpg">One</a>
<a href="http://img515.imageshack.us/img515/5390/005cc0.jpg">Two</a>
<a href="http://imageshack.us/a/img708/9470/patiblechrome.gif">Three</a>

Javascript

(function () {
    window.addEventListener("load", function onLoad() {
        this.removeEventListener("load", onLoad);

        Array.prototype.forEach.call(document.getElementsByTagName("a"), function (anchor) {
            anchor.addEventListener("click", function (evt) {
                evt.preventDefault();

                var newImg = document.createElement("img");

                newImg.src = anchor.href;
                newImg.addEventListener("load", function imgLoad() {
                    this.removeEventListener("load", imgLoad);

                    window.open(newImg.src, "image", "width=" + newImg.width + "px,height=" + newImg.height + "px");
                }, false);
            }, false);
        });
    }, false);
}());

On jsfiddle

No longer a solution after question update.

Here is a possible solution

.image {
    width: 50px;
    height: auto;
}

<img class="image" src="http://img145.imageshack.us/img145/1750/barcelonaagbartowernighnx7.jpg" />
<img class="image" src="http://img515.imageshack.us/img515/5390/005cc0.jpg" />
<img class="image" src="http://imageshack.us/a/img708/9470/patiblechrome.gif" />

(function (global) {
    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);

        Array.prototype.forEach.call(document.getElementsByTagName("img"), function (image) {
            var newImg = document.createElement("img");

            newImg.src = image.src;
            image.addEventListener("click", function () {
                global.open(image.src, "image", "width=" + newImg.width + "px,height=" + newImg.height + "px");
            }, false);
        });
    }, false);
}(window));