At the USOpen.org 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).

Demo

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

Features

  • 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.223 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>