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

What is Thumb-o-Matic?

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:

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:

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

How to install Thumb-o-Matic

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

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.

How to use Thumb-o-Matic

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:

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

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:

This will create the element that contains the images created later.
This displays the picture in the created container. The parameters are:
Either a link object in the page or the url of the image
Defines if the coordinates are to be used as coordinates or as an offSet to the location of the link object. (boolean)
The coordinates where the image should appear
The title attribute value of the link created
The text alternative of the created image
The ID of the image container
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();
  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;

Terms of Use

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

Discuss Thumb-o-Matic

Archived Versions