The code presented here demonstrates a way to open a popup window which resizes itself to the size of a contained image.

This work is licensed under a Creative Commons License.

How to use

Include the file picpop.js in the parent document:

<script type="text/javascript" src="picpop.js"></script>

Add an onclick event to each image anchor:

<a href="image.png"
    onclick="return picPop(this.href);">Show image</a>

Sample: Show image

Additionally, you can add a short text that will be displayed below the image:

<a href="image.png" onclick="return picPop(this.href,
        'This a picPop sample.');">Show image</a>

Sample: Show image

About the Code

picPop() emits the following code into the popup window:

    <title>Full view</title>
    <style type="text/css">
/* Let the content span the whole client area of the
window but hide any overflow so that it is possible to
calculate the difference to size the window */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
img {
    margin: 0;
    padding: 0;
p {
    margin: 0;
    padding: 0.5em;
    text-align: center;
<script type="text/javascript">
onload = function() {
    var b = document.body;
    var d = document.getElementById("d");
    var i = document.getElementById("i");

    // Ugly Gecko fix: if the window is already open
    // the body is not sized to the dimension of the
    // window due to html, body { overflow: hidden; }
    if(!d.offsetWidth) {
        b.style.overflow = "visible";
        b.style.overflow = "hidden";

    // Ugly Gecko fix 2: Firefox 1.5 does not expand
    // d.offsetWidth to the width of the image
    var w = Math.max(d.offsetWidth, i.offsetWidth);

    // Calculate the difference between the
    // image and the body dimension
    var dx = w - b.offsetWidth;
    var dy = d.offsetHeight - b.offsetHeight;
    window.resizeBy(dx, dy);

    // Center the window
    var x = (screen.availWidth - b.offsetWidth) / 2;
    var y = (screen.availHeight - b.offsetHeight) / 2;
    window.moveTo(x, y);
    <div id="d">
        <img id="i" src="url/passed/to/picPop.jpg">
        <p>Optional text passed to picPop()</p>