At the Startpage i’ve seen a cool little flashbox with the latest Player Images and a short Image description of the active image. I thought it would be nice and useful to have a Javascript Version of this Box. So i’ve played around a little bit and here is the result. I call this thing EasyImageTour and you can use this script for Private and Commercial Projects for free (please just leave the Copyright notice in the JS Part).


You can find a demo of this script with a few Images of LasVegas here and another one with active autochange function here. I’ve put all required code in one single page – in the download section below you can download a nice structured demo (with external css and js files). A more “modern web2.0” demo is coming soon.

Technical Infos

Tested and compatible with following browsers. (please post a comment if it’s compatible with other browsers too)

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox
  • Opera 9.23


  • Just hover over a thumbnail to view the big version of the image and show the description text
  • You can use unlimited Images
  • Autoplay function (you can turn it on/off and set the speed in the js settings)
  • Previous/Next links
  • Display the number of the active Image
  • Accessible with Keyboard navigation
  • All Big images can be accessed if javascript is turned off

Settings you can set in the JavaScript

There are 4 settings you can set in the Javascript File:

var imagepath = "images/"; // Set the path to your imagefolder
var startimage = 4;	//Set your Startimage (in this example image 4 would be visible at start
var autoplay = 1; // Should the images switch automatic on start?
var switchspeed = 2;  // If autoplay =1, set the time in seconds when the images should switch

Download EasyImageTour

Lets grab it and enjoy! If you need help,have ideas for improvements or just want to show a website where you use the script? Just post a comment 🙂

  Easy Image Tour (259,1 KiB, 2.070 hits)

  1. Just add as much images as you want. So if you want to add a 7th image write: <a href="big7.jpg" onmouseover="imageswitch(‘7’);" onfocus="imageswitch(‘7’);" onclick="return false;" title="imagedescription"><img src="small7.jpg" alt="imagedesscription" /></a>

Sag mir was du denkst

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>