Angelwatt Image Viewer Script

Description

A JavaScript file that takes links to images on the page and allows the the images to be shown on the current page rather than opening a new page. The image is shown on a transparent background to give it an elegant appearance. Background color and level of transparency are customizable and you can add your own loading graphic if desired.

Example

Here's an image from a textual link.

Here's an example using a link on a thumbnail image.
example image

Download

License

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License http://creativecommons.org/licenses/by-sa/3.0/us/. Essentially, you can use this script for free, make changes to it as need be, share it with others, but must also not claim it as your own.

Files

Installation

Installing this script is quite easy, just add a script tag (see below) to the head tag of any web page that needs it and you'll have the basic functionality. By default, the script will add the functionality to any link to an image on the page. It'll work on images with the extensions: jpg, jpeg, gif, png, and bmp.

<script type="text/javascript" src="angelwatt-image-viewer.js"></script>

The script can be customized to only apply to links in a certain area, given by the id attribute of that area. You can modify the last line of the script to do this (see below). Just exchange 'pics' for the id name that you want. If you'll be using a different id attribute for different pages, but using the same script, you can move this line to the HTML page itself and put it in a script tag and define it there for each page.

appendOnLoad ( function() { AngelwattImageViewer('pics'); } );

User Settings

You'll find the user settings for the script at the top of the file, (see below). The first preference (loadImg) is the location of a loading graphic. If you leave it empty (var loadImg = '') it'll leave the graphic out and there will just be the loading message. The background opacity (bgOpacity) controls the transparency of the background. It's value can range between zero (completely transparent) and one (opaque). The text color (textColor) setting is for the loading message's text color. The color can be given in a 3 or 6 hexadecimal valueformat (#fff, #12aab5), an RGB value (rgb(100, 250, 134)), or certain color names (red, yellow, etc.). The final setting is for the background color (bgColor) behind the image. Its color can be defined in the same way as the text color. If you need help coming up with a color value, try out this color picker site.

  /****  User Settings  ****/
  // Loading image: path/file.jpg
  var loadImg   = '/graphics/loading.gif';
  var bgOpacity = 0.8;     // Background opacity: 0-1 (except for IE)
  var textColor = '#fff';  // Text color for loading message
  var bgColor   = '#000';  // Background color for the slide
  /**** End User Settings ****/

Compatibility

Tested on:

I'm aware that IE does have a filter property to handle transparency, but it's not part of the CSS specification so I'm not using it for my script. I've stuck with specifications only for my script. Though, because I'm a good sport, below is a line of code that will make the transparency work in IE. Add it after the normal declaration for opacity (sBg.style.opacity = bgOpacity; at approximately line 135).

sBg.style.filter = 'alpha(opacity='+ bgOpacity*100 +')';

Version History