Opening an image in a popup: how to get its size when the image is loaded?

Question

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!

First, a little light reading: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — Xotic750, May 12 '13 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, May 12 '13 at 20:41
Thanks. The javascript code included at the bottom of the html file. — Nown, May 12 '13 at 20:44
Are you trying to get the images original size or the display/computed size? — Xotic750, May 12 '13 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, May 12 '13 at 21:03
Are you wanting to prevent the anchor from navigating and only have the popup, or do you want both actions? — Xotic750, May 12 '13 at 21:40
Normally when you click an anchor the browser navigates to the "href" attribute — Xotic750, May 12 '13 at 21:53
Only have the popup. We should also have a `return false`; after the `imagePopup(this)` if that's what you mean. — Nown, May 12 '13 at 21:54

Xotic750 · Accepted Answer · 2013-05-12T23:32:46.207

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/compatiblechrome.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

Thanks a lot. Except for the fact that the popups are now blocked by my browser (which was not the case with the first version), it works like a charm. — Nown, May 12 '13 at 22:04
It would seem simpler to call "window.addEventListener" directly. What is the motivation to make this code block a function with "window" as a parameter? — Andrew Shepherd, May 12 '13 at 23:23
Just a template that I have. I have one without too but this got clicked, sure change global to window and remove it from attributes. — Xotic750, May 12 '13 at 23:28

Xotic750 · Answer 2 · 2013-05-12T22:09:00.637

0

No longer a solution after question update.

~~Here is a possible solution~~

CSS

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

HTML

<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/compatiblechrome.gif" />

Javascript

(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));

On jsfiddle

edited May 12 '13 at 22:09

answered May 12 '13 at 21:09

Xotic750

22,914
8
57
79

Thank you very much. I am looking for a way to intercept ... tags, not the images themselves, but I guess your solution applies with minor modifications to that case. However, the problem is that I would like to avoid loading the images in the main page until the user actually clicks on the link (I expect the user to visit only a few of the links on the page)... – Nown May 12 '13 at 21:30
Show me an example of your markup, add it to your question as it was not clear what you required, "I am writing a script that looks for links to images and adds an onclick" – Xotic750 May 12 '13 at 21:34
Sorry about that. I updated the question accordingly. To be more precise, the question is not about how to find the elements to change, but really how to obtain the dimensions I want to resize the popup to. Equivalently, I could have asked the following (maybe simpler) question: I have an img_url variable that contains the url of an image (which is not loaded anywhere yet) and I would like to open a popup that loads the image directly, and not some HTML code displaying it. But I would like the popup to have the correct size. – Nown May 12 '13 at 21:41

Opening an image in a popup: how to get its size when the image is loaded?

2 Answers2