i assume that so far, you include your images using
<a href=”path/to/image.jpeg”><img src=”path/to/image-thumbnail.jpeg” /></a>.
this displays a thumbnail (called
path/to/image-thumbnail.jpeg) and allows the user to click it, to be forwarded to the real image (called
path/to/image.jpeg). maybe you also use an
alt tag, or specify the size of the thumbnail. that doesn’t really matter.
onclick event to the
<a href=”path/to/image.jpeg” onclick=”showPicture(‘path/to/image.jpeg’)“><img src=”path/to/image-thumbnail.jpeg” /></a>
the addition is printed in bold. the drawback of this method is that you have to replicate the image’s name, but then, you already had to do that for the thumbnail, and if you have automated the whole process, changing your script to insert this part shouldn’t be any problem.
so now let me show you how to implement the
showPicture(), expecting one parameter called
first, the function disables scrolling for the main document (line 4), as otherwise the user can scroll around while viewing the picture (which won’t move). then it creates a new
<div>tag (line 5) and eventually adds it as a child to the document root (line 14). the tag is equiped with a css style (line 6) telling the browser to display it at a position relative to the browser’s viewpoint, namely in the upper right corner with the size equal to the viewpoint size – meaning it covers the whole viewpoint. it is colored in black, with text in it being centered and written in white. then, in line 7, a
onclickevent is set for the tag. it simply waits until the tag is clicked (or anything inside that tag, to be precise) and removes the tag, which closes the “fullscreen” view. it also enables scrolling of the document (which was disabled in line 4). the lines 8 to 12 build up the html code which will be put into the
<div>tag in line 13. in line 8, we create two
<div>tags which will ensure a vertical centering in sane browsers. lines 9 and 10 inserts the image specified in
url; here, i set the
max-heigthparameters to essentially the viewport size, which ensures that the image will be rescaled to fit into the viewpoint. i substract a bit on the vertical size so there’s some space for the “disclaimer”. the “disclaimer” is added in line 11, it tells the user how to get rid of the fullscreen view, provides a link to the image file, and shows a copyright notice.
you can adjust the code as you like, for example you can change the colors and the disclaimer. also adding keyboard support might be nice, so you can get rid of the viewer when pressing
escape. i guess it isn’t too hard to do, i’ll probably do that somewhen later. you can also move all the formatting into your
.cssfile, by replacing the
el.style.cssText = “…”;by
el.className = “imageviewer”;or however you want to call the css class for that