Anders Riggelsen

Anders Riggelsen

Web-stuff

Here are some of the experiements I made with HTML, CSS and Javascript

Image Zoom Script

I got tired of there being no extremely simple (and free) Lightbox alternatives without all the bloat. Here is a simple Javascript library that allows you to zoom an image to the center of the screen for more detail. Set the image width to something smaller than it's default size (either with CSS or the HTML 'width' property).

Works in Firefox, Chrome, Opera, IE6, IE7 and IE8

Usage:

<img src="myimage.jpg" onclick="zoomImage(this);" alt=""/>

Demonstration - Download

Simple Javascript Slideshow Crossfader Script

This is a dead simple javascript slideshow with crossfading and simple navigation I made for Arrild Privatskole's website (though without the navigation).

Usage (no controls):

<body onLoad="loadSlideShow();">
<div id="slideshow">
<img src="pic1.jpg" alt="pic1" />
<img src="pic2.jpg" alt="pic2" />
<img src="pic3.jpg" alt="pic3" />
</div>
</body>

All pictures must be the same size. It works by having one dynamically generated element on which it controls the opacity. While it fades it makes the background of the 'slideshow' element the picture it fades from. To see how to add controls to the slideshow, see the source code of the demonstration page. (It's also very simple!)
You can control the waiting and fade time in the slideshow.js file.

Works in Firefox, Chrome, Opera, IE6, IE7 and IE8

Demonstration - Download

CSS/Javascript Aero Glass Effect

I got this idea for a Windows Vista/7 Aero glass effect when working on another design where an element needed to appear 'refracting' the background - like glass.

It works by having a blurred version of the "wallpaper" image as the background but with fixed position.

Works in Firefox, Chrome, Opera, IE7 and IE8

Demonstration