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.234 hits)
cen schreibt:
How can you display more than 6 images?
Webdawson schreibt:
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>
L schreibt:
Does the JavaScript HAVE to be in the ?
Tiziano schreibt:
Images needs to be all of the same size ?
cwxwwwxdfvwwxwx schreibt:
well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch 😉