EasyImageTour – a free and easy Image Presentation Script

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, 740 hits)


 

5 Kommentare »

cen
verfasst am 16. September 2007 um 17:34

How can you display more than 6 images?

verfasst am 16. September 2007 um 17:49

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>

verfasst am 29. September 2007 um 0:52

Does the JavaScript HAVE to be in the ?

verfasst am 5. Juli 2008 um 10:49

Images needs to be all of the same size ?

cwxwwwxdfvwwxwx
verfasst am 25. Dezember 2008 um 16:19

well, hi admin adn people nice forum indeed. how's life? hope it's introduce branch ;)

Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />


 
Produced and © by Koller Jürgen | Powered by the awesome WP | Love and Joy to everyone