The heading could have been ‘Creating Photo Gallery – Clickable, Fade-In Transition, Pause On Mouseover & With Controls’.
Should that be, it would be a small measure of what all you can do with the photo gallery I’m going to write about in this post.
This means you only need to make your pictures look good enough using some of the free (why not!) online photo editing tools, and the rest is pretty easy.
To recall its origin, the term ‘Swiss Army’ is derived from the all-purpose ‘Swiss Army knife’ invented by Karl Elsener, and now the trademark owned by Wenger S.A. and Victorinox A.G., longtime suppliers of knives to the Swiss Armed Forces.
The ‘swissarmy.js’ being used here is similarly suited for various purposes. It is authored by John Scheuer, and the script is available free at Dynamic Drive.
To start you need to copy the codes from the Dynamic Drive website, and then put to use according to your need. An example of a photo gallery with the script is given below:
How To Implement
You may not make the second JS file separately, but I’ve done it to avoid clutter in the html code.
Second comes the calling of the photo gallery identified with ‘slideShow’ to play. This is just a one-liner as under which you place in the body section.
Configuring Photo Gallery
The best part of John’s script is that after you install it you can easily configure the photo gallery in many ways. To understand this let me bring up a brief portion of the ‘slideshow.js’ script below:
slideShow.no_descriptions=0; //use for no descriptions displayed slideShow.pause=1; //use for pause onmouseover slideShow.image_controls=1; //use images for controls slideShow.button_highlight='#ffcccc'; //onmouseover background-color for image buttons (requires image_controls=1) slideShow.specs='width=300, height=250' //global specifications for this show's new window(s) slideShow.random=0; //set a random slide sequence on each page load slideShow.manual_start=1; //start show in manual mode (stopped) slideShow.delay=2000; //sets milliseconds delay between slides slideShow.no_added_linebreaks=1; //use for not adding line breaks in formatting of texts and controls
As you can see it is possible to change these parameters – mostly either ‘0’ or ‘1’ – and the photo gallery changes accordingly.
For example, in the above case you may not want the description of images, or the button images, or the pause on mouseover. You may like the delay between slides to be more or less than 2000 milliseconds (or, 2 seconds), and prefer the slideshow to start automatically on pageload.
Refer to the complete list of configuration options John has provided. And don’t be afraid to try them out for your photo gallery.
I’ve trimmed John’s code to the one below for my needs.