skip to main content.

posts for 2011. (page 10.)

here’s my project 52 shot for the thirtyfirst week. the topic was

schatzkiste.

i’ve had several ideas for this topic, and during the last week started planning something more concrete, until i saw something better yesterday while being in schwanden. while walking up some stairs, we stumbled over a piece of wood in the concrete floor, which said “vorsicht geheime falltür!” – “attention secret trapdoor!”. beneath it was a dark hole, probably some kind of ventilation shaft. probably the hole was covered by a piece of wood to make sure no-one stumbles, and some prankster added the text. anyway, to me, it looks like a fantastic treasure “chest” :-) please click the photo to get a larger version:

technical details: 1/13s, f/8, 35mm, iso 200.

yesterday, we did the panoramic hike near braunwald. on the first leg, from grotzenbüel to gumen, was really nice. it was sunny, and thanks to chinooks it was also pretty warm. around gumen it started to drip a little, and it got more cloudy and foggy and essentially stayed like this until we were back down. on the higher levels we found larger patches of snow, most of them not on the path, but some also crossing our path; on the way down, we had to climb over a larger snow hill crossing the path. but we survived it, and alltogether, the great scenic views on the first leg were worth the whole effort. though it would have been nice to just take the chair lift down from gumen, which unfortunately wasn’t in operation this time of the year. the following photos are a few impressions:

back in braunwald, we discovered this cute hydrant:

finally, on the train ride back, we did a stop-over in schwanden to drink something. on our way, we found among other funny tags this particularly cute one:

finally, a few meters from the tag, on a small staircase up, we found this:

this sunday, i was in elm at the glarner alpchäs- und schabziger märt, a kind of folk festival where you can have fun, try and buy cheese, eat traditional food, listen to bands playing folk music, and as a highlight, watching an almabtrieb. during the latter event, the cows from the alms are driven back into the valley, where they are decorated and equipped with nice cowbells, and walked along the main street so the tourists can watch and take pictures ;-) below are some impressions from that day with wonderful weather, opposing the foggy, cool weather i left behind when leaving the zürich area…

in the last photo, you can see the martinsloch. we didn’t knew the sun was shining through that morning (around 9:33 o’clock), otherwise we probably would have been there earlier…

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[
 3function 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:

here’s my project 52 shot for the thirtyth week. the topic was

the big blue.

when i read this topic, i had to think of the morteratsch glacier, especially the dark blue grotto which is visible on some of the photos i took there. but when this topic was announced, my trip to the morteratsch glacier was already three days ago, and we are not supposed to take archive photos. besides that, i had no perfect photo from that grotto. so i waited, until i visited the next glacier: the rhône glacier. as opposed to this view of the glacier, the photo for this topic had to be taken inside the glacier, where it is deep blue. but this is not a problem at the rhône glacier, as every year, they dig a grotto into the glacier which you can enter. they also installed lights, usually hidden behind ice, which amplify the bluish tones. this was the perfect place to take a photo for this topic, in my opinion. and here it is! please click the photo to get a larger version:

technical details: 1/100s, f/2.8, 16mm fisheye, iso 400.

here’s my project 52 shot for the twentyninth week. the topic was

gepunktet.

here, i chose another motive from norway, at the coast of the barents sea. while having my feet in the ice-cold water, i spotted this dotted rock. a closer look revealed that the dots actually have a nice structure. (if anyone has an idea what this is, please tell me.) anyway, this was the perfect motive for this topic. please click the photo to get a larger version:

technical details: 1/125s, f/5, 105mm, iso 400.

here’s my project 52 shot for the twentyeighth week. the topic was

postkartenmotiv.

as a motive for this topic, i chose the rhône glacier. please click the photo to get a larger version:

technical details: 1/2500s, f/8, 18mm, iso 400.

here’s my project 52 shot for the twentyseventh week. the topic was

fruchtig.

today, i was eating something very fruity: something with marrons. please click the photo to get a larger version:

technical details: 10s, f/20, 105mm, iso 200.

here’s my project 52 shot for the twentysixth week. the topic was

summer of love.

this is a topic i spend quite some time thinking about it. finally, while being in norway at the coast of the barents sea, i had a simple idea which i really liked, much more than all previous ones. at the coast, i saw a lot of mussel shells. broken open, and when viewed from the right direction, having a heart shape. mussels and beach are often associated with summer, so there was the connection. using something like a broken mussel shell, partially covered with sand and water, as an image for love is not that straightforward, i know. i chose it anyway. please click the photo to get a larger version:

technical details: 1/160s, f/5, 105mm, iso 400.

here’s my project 52 shot for the twentyfifth week. the topic was

architektur.

i like old buildings. in particular, fortified places, like castles, might they be still intact or broken into pieces. this photo is from turun linna, turku’s castle, a view into the courtyard. please click the photo to get a larger version:

technical details: 1/80s, f/8, 18mm, iso 400.