Thumb-o-Matic - Display images without reloading the page

Thumb-O-Matic allows you to display pictures in a web page without leaving the page. The images are loaded into a newly generated element.

An example are the following links. Activate them to see the linked image:

• Hippo
• Hippo closeup

Activate the images to get rid of them again.

You can apply this functionality to your image links by adding a CSS class to them, or you can use Thumb-O-Matic from your own scripts, as shown with this form:

Select picture: Hippo Hippo closeup Left: Top

Browsers with JavaScript disabled will load the image in the browser, there is no dependency on scripting support.

To install Thumb-o-Matic, simply add it to the head of your HTML document:

<script type="text/javascript" src="thumbomatic.js"></script>

Thumb-o-Matic comes with its own onload call, if you want to use it together with other scripts, you need to remove the

window.onload=function()
  {
    thumbomatic();
  }

section and call the function thumbomatic() when you load the page.

The script checks if the browser is capable of creating elements and only applies the functionality if that is the case.

Using the script in HTML

Using the script without any changes is rather easy. Simply apply the class do_tom to the links that should become enabled. The earlier example shows that:

<ul>
  <li><a href="hippo.jpg" title="Photo of a purple grinning hippo"
  class="do_tom">
  Hippo</a></li>
  <li><a href="hippo_closeup.jpg" class="do_tom">
  Hippo closeup</a></li>
</ul>

Thumb-o-Matic automatically places the image at a specific offset of the current link and applies an alternative text and a title. All of these can be defined as variables in the script:

var offsetX=50;
var offsetY=10;
var alternative='Hippo';
var titleinfo='Activate Link to remove image';

If you set a title on the link, it will become the alternative text of the image instead if the predefined alternative.

Using Thumb-o-Matic as a script

There are three functions inside Thumb-o-Matic, that you can use:

createContainer(id)

This will create the element that contains the images created later.

setPic(o,auto,ix,iy,closeMessage,alternative,id)

This displays the picture in the created container. The parameters are:

o

Either a link object in the page or the url of the image

auto

Defines if the coordinates are to be used as coordinates or as an offSet to the location of the link object. (boolean)

ix,iy

The coordinates where the image should appear

closeMessage

The title attribute value of the link created

alternative

The text alternative of the created image

id

The ID of the image container

getCoordinates(offsetTrail,d)

Returns the coordinates of the activated object - this function was taken from the JavaScript and DHTML cookbook by O'Reilly and slightly modified. offsetTrail is the object and d which coordinate should be returned (x or y).

An example was used in the form on this page:

function showimg(o)
{
  var mytom=new thumbomatic();
  if(!document.getElementById('ic'))
  {
    mytom.createContainer('ic');
  }
  var sel=o.getElementsByTagName('select')[0];
  var img=sel.options[sel.selectedIndex].value; 
  var x=document.getElementById('x').value;
  var y=document.getElementById('y').value;
  mytom.setPic(img+'.jpg',false,x,y,'Activate Link 
  to remove image','hippo','ic');
  return false;
}

Thumb-o-Matic is provided as-is and the developer does not take any liability for any damage caused by it.

Thumb-o-Matic is not open source, and it is prohibited to change and resell the script.

The use of the script is free.

Download Thumb-o-Matic

• thumbomatic.zip
• Version 4.0
• 18.05.2005

Discuss Thumb-o-Matic

• Check blog

Archived Versions

• thumbomaticold.zip
• Version 3.1
• 20.06.2003
• Netscape 4.x support