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.

I sometimes forget that we have Hargreaves in the physio room – it’s been so long since I saw him don a United shirt.

According to the papers his recovery is now a psychological one rather than a one physical one: Man Utd – What the Paper’s say.

I remember my time in Sport Studies and how important the psychological element is to a players ability; I used to run through skill moves and plays in my head repeatedly in an effort to use reinforcement to learn and incorporate new skills.  But to overcome 18 months of slow recovery is something else entirely: every day having to find some encouragement in the smallest of improvements and finding something of use in a day when you actually go backwards.

Best of luck Hargo.

Although there are ways to send email in PHP using PEAR and other libraries, sometimes you’ll get stuck in a situation where that either isn’t possible or just too much of a faff.

The other day I decided to create a function for this purpose that I can use in my own library of code.

It can be dropped into your include files and used for simple emails without attachments, HTML emails or complex emails with multiple attachments.

I haven’t spent a great deal of time on this so it might not be 100% but works well for me so let me know if there are any flaws that need to be taken care of.

You can download the function (and supporting functions) from here: send email with attachments in PHP