An All-Purpose Free Versatile Photo Gallery You’ll Love

Posted in How-To Tips, photogallery, webdesign

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.

Among the various free-to-make photo galleries that we are explaining in this blog, the one using ‘Swiss Army’ JavaScript – alarmed? don’t be! – is perhaps the most versatile, as you’ll find soon.

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

2 JavaScript files are used here. One is the ‘swissarmy.js’, while the other comprises the code that John asks to include in the head section of your html page.

You may not make the second JS file separately, but I’ve done it to avoid clutter in the html code.

The steps are rather simple. First, as in the present case, the pagestyle and the 2 JavaScript files are referenced in the head section.

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.

<div id="show"><script type="text/javascript">new inter_slide(slideShow)</script></div>

The html code and the ‘slideshow.js‘ code are also given for your reference.

 

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.

 

Slideshow.JS Code

I’ve trimmed John’s code to the one below for my needs.

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):

var preload_ctrl_images=true;

//And configure the image buttons' images here:

var previmg='left.png';
var stopimg='stop.png';
var playimg='play.png';
var nextimg='right.png';


var slideShow=[]; // SLIDESHOW

//configure the below images and descriptions to your own, note optional links, target and window specifications.

slideShow[0] = ["1-big.jpg", "Seagulls", "http://www.2webvideo.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slideShow[1] = ["2-big.jpg", "Clock Tower"];
slideShow[2] = ["3-big.jpg", "Promenade", "http://www.yahoo.com"];
slideShow[3] = ["5-big.jpg", "Lamborgini", "http://www.google.com", "_new"];
slideShow[4] = ["4-big.jpg", "Atlantic"];
slideShow[5] = ["6-big.jpg", "Tuk Tuk", "http://www.bing.com", "_new"];

//optional properties for these images:

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 miliseconds delay between slides
slideShow.no_added_linebreaks=1; //use for not adding line breaks in formatting of texts and controls


//Notes:

//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=4000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

 

The HTML Code

<html><head>

<title>Image Slideshow</title>

<style type="text/css">

/* All Styles Optional */

* {
font-family:calibri,arial;
font-size:16pt;
}

div#show {
background-color:#efefe7;
width:400px;
margin:0; padding:2px;
border:1px solid #909090;
}

div#show table input,  div#show4 table input {
outline-style:none;
}

</style>

<!--[if IE]>
<style type="text/css">
div#show table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->


<script src="swissarmy.js" type="text/javascript"></script>

<script src="slideshow.js" type="text/javascript"></script>


</head>


<body style="margin:0; padding:0;">


<div id="show"><script type="text/javascript">new inter_slide(slideShow)</script></div>


</body>

</html>

6 Comments

  1. Hi there, just doing some research for my Swiss Army website. Can’t believe the amount of information out there. Not quite what I was looking for, but very nice site. Have a great day.

  2. Hi there,
    I’m having trouble with the size of the pictures. How can I resize the pics? Thamks!

  3. The slide show script has great options, but under html links I see that there are no options to split the fields for one slide in half, linking each to a different html page. Is there a way to do that?

  4. thanks great piece of info. just wondering how do we remove all text , e.g. seagull, clocktower so that it only shows the image up. looking to embed this into a website so only need the image changing , thanks so much, have a nice day

  5. I like this but I am wanting the same thing as @trev. Don’t need any controls, just a preset slideshow embedded into my website.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>