Aaron Reynolds – The ramblings of a tek ‘ed

Although I’m not a fan of creating a javascript library for all the little simple tasks – you know the really simple things – I have created a simple library for this.

It’s purely because I quite often have to put this effect into a website and I wanted a nice re-useable method t going on with.

Firstly it’s just javascript and HTML – no back-end coding so I wouldn’t use it to show an image library – where you should be able to handle non-javascript users.  This is purely aimed at showing transitioned images on a website with no user interaction.

I’ll add a demo page later and put the link at the bottom of this post.

The javascript library is available for download via my downloads page and I won’t go into detail about.  It simply makes use of Prototype and Scriptaculous – so if you are into jQuery or mootools you’ll want to look elsewhere.

Firstly let’s look at the essential parts of the HTML page and then we’ll look at how to use the library for your purposes.

First we create a DIV (or another container) that will hold the images.  To make sure your website looks OK without javascript, you must provide a static image in the DIV.

Then we create a container (another DIV or a UL or whatever you fancy) and put A tags inside that point at each of the images we will be using.  The “title” attributes will be used as ”alt” alttribtes for the images.

<div id="divLinks" style="display: none">
  <ul>
    <li><a href="images/b_f_0_0_0_0.jpg" title="Image 1">Image 1</a></li>
    <li><a href="images/b_f_1_1_0_1.jpg" title="Image 2">Image 2</a></li>
    <li><a href="images/b_f_1_1_0_2.jpg" title="Image 3">Image 3</a></li>
    <li><a href="images/b_f_1_1_0_3.jpg" title="Image 4">Image 4</a></li>
  </ul>
</div>

<br />

<div id="divContainer" style="position: relative">
  <img id="imgStatic" src="images/b_f_0_0_0_0.jpg" alt="Image 1" style="position: absolute; top:0px; left: 0px;" />
</div>

<script type="text/javascript">
<!--
var images = new enjoyImageTransition(
 {
  callbackName: 'images', // must be the name it is declared as - used for callbacks
  containerId: 'divContainer', // images will be rendered inside this container - it doesn't need to be a DIV
  staticImageId: 'imgStatic', // the original image that will be rendered out once the process begins
  linkContainerId: 'divLinks' // an element containing A tags which detail all the images
 });
-->
</script>

This shows you the minimum configuration to use the library.

Let’s go through all the options available to help you configure how the images appear:

Don’t forget to reference the javascript in your HEAD section (as below) and that’s about it.

 <script type="text/javascript" src="scripts/prototype-1.6.1.js"></script>
 <script type="text/javascript" src="scripts/scriptaculous.js"></script>
 <script type="text/javascript" src="scripts/enjoyImageTransition.js"></script>

You can download the javascript file from here: enjoyImageTransition.js as text.