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.
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
picPop() emits the following code into the popup window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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;
}
</style>
<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);
}
</script>
</head>
<body>
<div id="d">
<img id="i" src="url/passed/to/picPop.jpg">
<p>Optional text passed to picPop()</p>
</div>
</body>
</html>