skip to main content.

posts about gallery.

in this post, i want to explain how to create a simple neat javascript/css “fullscreen” image viewer, or more concretely, the one i implemented myself here on spielwiese. feel free to re-use the code. it is not garuanteed to work everywhere, but it works fine with firefox, konqueror and chromium/chrome, to my knowledge, and probably also with safari (as it is based on konqueror), and hopefully with opera and more modern versions of internet explorer. i didn’t include any hacks to make it work under older versions of internet explorer or other browsers, but feel free to enhance my version and add a link to yours in the comments here.
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.
the idea is to add a javascript onclick event to the <a> tag, which will become active once the link (i.e. the image) is clicked and show the “popup”. in case the user disabled javascript, everything will fall back to the old behaviour: the user will be redirected to the image and no harm is done by the addition of the new code. the above html code has to be modified as follows:

<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() function.

 1 <script type="text/javascript">
 2 //<![CDATA[
 3 function showPicture(url) {
 4   document.body.style.overflow = "hidden";
 5   el = document.createElement("div");
 6   el.style.cssText = "background: black; color: white; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; z-index: 1000;";
 7   el.onclick = Function("this.parentNode.removeChild(this); document.body.style.overflow = 'visible';");
 8   var code = '<div style="width: 100%; height: 100%; display: table; position: static; overflow: hidden;"><div style="display: table-cell; vertical-align: middle; width:100%;">';
 9   code += '<img onclick="this.parentNode.parentNode.parentNode.removeChild( this.parentNode.parentNode); document.body.style.overflow = \'visible\';" ';
10   code += 'style="max-width:' + window.innerWidth + 'px; max-height: ' + (window.innerHeight - 20) + 'px;" src="' + url + '" /><br />';
11   code += 'click the photo to return to the blog. click <a href="' + url + '">here</a> to go to the image file. copyright &copy; by whoever.';
12   code += '</div></div>';
13   el.innerHTML = code; 
14   document.documentElement.appendChild(el);
15   return false;
16 }
17 //]]>
18 </script>

let me explain what it does. lines 1, 2, 17 and 18 tell your browser that there’s a javascript coming up in an xhtml compatible way; if you are using plain html (instead of xhtml), you might want to change lines 2 and 17. now let’s continue with the main function, showPicture(), expecting one parameter called url.
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 onclick event 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-width and max-heigth parameters 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 .css file, by replacing the el.style.cssText = “…”; by el.className = “imageviewer”; or however you want to call the css class for that <div>.
posted in: www
tags:
places:

today, i updated my gallery code. it now features a “pop-up version”: if you click a photo, it will be shown with a black background, and as soon as you click anywhere, you’ll return where you just were in the blog. you can still use something like firefox’ double click to open the photo in a new window, and the “fullscreen” viewer includes a link to the image file (and instructions on how to get rid of the fullscreen view as well as a copyright notice). if you don’t like the new viewer, you can explicitly disable it by using the new settings menu in the sidebar. there, you can now also more prominently toggle whether you want to see the thumbnails always in colors or not. finally, changing the thumbnails now also works without javascript enabled.
i’d be happy about a bit of feedback, in particular if the new gallery fullscreen viewer works in your browser. i so far tested it with firefox, konqueror and chromium, so it should also work with safari and chrome, but i’m not so sure about the internet explorer… in case it doesn’t work (and if you’re using the internet explorer, also please in case it works) tell me your browser and its version number so i can investigate a bit… (in case you’re using an old internet explorer, you should better change to a newer version or a different browser, as it is very broken anyway.)

posted in: www
tags:
places:

as once announced, i worked on spielwiese‘s gallery system. it is now featured by a c++ backend which generates the galleries as well as the thumbnails (if they aren’t already there), both in grayscale and color! so far, the galleries are shown as before (with some exceptions, mostly in the beginning of the blog though), but on every page you can find a clickable text in the footer, on the very bottom of the page, called “change colors!”: this toggles the thumbnails between grayscale and colors! unfortunately, this currently does not remembers the value (by setting a cookie), so if you reload the page everything will be grayscale again. but the most important part, namely the backend, is there! and maybe it will remember the state before the end of this day :)

posted in: computer www
tags:
places: