Varal Image Switcher

Paginate any HTML content

(NOTE: This is a very old script, from circa 2003, and although it still works it is largely unmaintained. I am only leaving this page up here for historical reasons, because this script got fairly popular at some point.)

Overview

Image Switcher is a free JavaScript that automatically inserts a series of images into one single hot-swappable viewport, like the one below.

The source code for this example is:

<div class="imgsw">
	<img src="img1.png" />
	<img src="img2.png" />
	<img src="img3.png" />
	<img src="img4.png" />
</div>

Quite simple!

The cool thing is that if the client has disabled JavaScript everything still looks fine and dandy -- try turning it off, yourself. Also, the order of the different parts can easily be changed using a configuration file, as shown in the Usage section. You can use it to show thumbnails, titles and captions, as well as to paginate any HTML element (not just images)! You can also have as many Image Switchers as you like on the same page, with no added effort.

Other examples

Features

Cross-browser
Customizable with JS
Stylable with CSS
Can preloads images
Allows thumbnails to be used
Supports captions, multiple images at a time, and works with any HTML element.
Degrades gracefully

If the client doesn't have JavaScript: all images are shown according to CSS
If the client doesn't have CSS: still looks / works fine
If the client has neither JS nor CSS: all images are shown serially

Unobtrusive JavaScript: keeps your XHTML clean
Keeps your class, alt, title and onclick attributes for each image

Usage

Just enclose your images in a div with class set to imgsw. Oh and link the javascript in the header. Like this:

<html>
<head>

	...

	<!-- below is the configuration file (not required) -->
	<script type="text/javascript" language="javascript" src="imageswitcherconf.js"></script>

	<!-- below is the main file (required) -->
	<script type="text/javascript" language="javascript" src="imageswitcher.js"></script>

	...

</head>
<body>

	...

	<div class="imgsw">
	  <img src="dog59.jpg" />
	  <img src="dog5.jpg" />
	  <img src="logo.gif" />
	</div>

	...

</body>
</html>

The configuration file is self-explanatory. Click to see it.

The included preloader looks for a file called "loading.gif" to display while loading pictures. You can either download mine or provide your own. Use the configuration file to specify a different image name.

What about CSS?

The viewports are divs with class name imgsw_viewport. The little numbered links are all in a div with class imgsw_numbers, and the previous/next buttons are in a div with class imgsw_prevnext. Also, selected links get an active class.

To better understand the CSS structure, you should use something like the firefox extension View Rendered Source Chart to see the HTML that is being interpreted after all JavaScripts have modified it. Here's what it would tell you the example in the beginning of this page looks like:

<div id="imgsw0" class="imgsw_toplevel">
<div class="imgsw_list_numbers">
  <a class="active" id="imgsw0_link0" href="javascript:IS.doTheSwitch(0, 0);" title="">
	 <span> 0 </span>
  </a>
  <a id="imgsw0_link1" href="javascript:IS.doTheSwitch(0, 1);" title="">
	 <span> 1 </span>
  </a>
  <a id="imgsw0_link2" href="javascript:IS.doTheSwitch(0, 2);" title="">
	 <span> 2 </span>
  </a>
  <a id="imgsw0_link3" href="javascript:IS.doTheSwitch(0, 3);" title="">
	 <span> 3 </span>
  </a>
</div>
<div class="imgsw_prevnext">
  <a class="imgsw_prev" href="javascript:IS.doTheSwitch(0, -2);" title="previous image">
	 <span> &lt;previous </span>
  </a>
  <a class="imgsw_next" href="javascript:IS.doTheSwitch(0, -1);" title="next image">
	 <span> next&gt; </span>
  </a>
</div>
<div id="imgsw0_viewport" class="imgsw_viewport">
  <a href="javascript:IS.doTheSwitch(0, -1);" class="imgsw_link_img">  <img src="file:///D:/My%20Documents/HTML/imagem/js/img1.png" id="imgsw_img_0_0_0" class="imgsw_image" title="click for next." alt=""> </a>
</div>
</div>

The ids are there for the script to be able to access the elements, but can be used for styling as well. Keep in mind that if you have multiple Image Switchers on the same page, each on will have a unique set of ids, allowing you to individually style them.

And below is an extract of the CSS file used for this page. It looks more complex than yours will probably be, since I use this configuration file as the basis for all the Image Switcher examples.

.imgsw_list_numbers a,
.imgsw_list_titles a,
.imgsw_list_filenames a,
.imgsw_list_thumbnails a,
.imgsw_prevnext a
{
	padding: 0 0.5em;
	text-decoration: none;
	color: #ccc;
	border: 1px solid #202930;
}

.imgsw_viewport a,
.imgsw_viewport a.active:hover,
.imgsw_viewport a:hover
{
	border: none;
}

.imgsw_list_numbers a.active,
.imgsw_list_titles a.active,
.imgsw_list_filenames a.active,
.imgsw_list_thumbnails a.active
{
	color: #fff;
	background-color: #3a444d;
	border: 1px solid #3a444d;
}

.imgsw_list_numbers a.active:hover,
.imgsw_list_thumbnails a.active:hover,
.imgsw_list_titles a.active:hover,
.imgsw_list_filenames a.active:hover
{
	background-color: #666e74;
	border: 1px solid #666e74;
}

.imgsw_list_numbers a:hover,
.imgsw_list_thumbnails a:hover,
.imgsw_list_titles a:hover,
.imgsw_list_filenames a:hover,
.imgsw_prevnext a:hover
{
	color: #fff;
	border: 1px solid #3a444d;
}

.imgsw_list_thumbnails a
{
	padding: 5px;
	display: inline;
	float: left;
}

.imgsw_list_titles a,
.imgsw_list_filenames a
{
	display: block;
	padding: 0;
	margin: 0;
	width: 300px;
}

.imgsw_list_numbers,
.imgsw_list_titles,
.imgsw_list_filenames,
.imgsw_list_thumbnails,
.imgsw_prevnext
{
	display: inline;
	padding: 0;
	margin: 0;
}

.imgsw_list_thumbnails img
{
	border: none;
	display: block;
}

.imgsw_image
{
	border: none;
	margin: 0;
}

.imgsw_viewport 
{
	clear: both;
	padding-top: .5ex;
}

.imgsw_title
{
	font-size: 2em;
	padding: 0;
	margin: 1em 0 0 0;
	color: #fff;
}

.imgsw_toplevel
{
	padding: 1em 0;
	position: relative;
	font-family: Trebuchet MS, sans-serif;
}

Customization options

Below is a table explaining the configuration parameters available for the ImageSwitcher. They may all be ommitted (that means that the file imageswitcherconf.js may be left out as well), causing the default values to be employed.

parameter name	default	explanation
order	new Array("list", "prevnext", "viewport")	Use this add, remove and reorder different components: the image title (`"title"`), the page list (`"list"`), the previous/next buttons (`"prevnext"`), the viewport where the current image appears (`"prevnext"`). You may also remove from this list any component you don't wish to display.
usePreloader	true	If `true`, images are preloaded behind the scenes, for smoother navigation. When the images are too large and too many, this may slow things down. This option is not compatible with the option `useLoadingImage`.
useLoadingImage	false	Allows you to show an indicator that the current image is loading. This option is not compatible with the option `usePreloader`.
loadingImageSrc	"loading.gif"	If `useLoadingImage` is `true`, then this option specifies the location of the "progress bar" image.
prevText	"<"	Specifies the text that will be displayed in the "previous image" button.
nextText	">"	Specifies the text that will be displayed in the "next image" button.
clickImageForNext	false	If `true`, clicking an image will cause the switcher to proceed to the next set.
tooltip	"click for next."	Allows you to specify the tooltip that appears when the user leaves the cursor over the image. To specify a different tooltip for each image, use the `img` tag's `title` attribute and set this to `false` (notice that there are no quotes!).
listType	"numbers"	Allows you to choose the format of the list. The options are `"thumbnails"`, `"numbers"`, `"titles"` or `"filenames"`.
thumbnailSuffix	""	Specifies the suffix of the thumbnails to be used. For example, if an image is called `myimage.jpg` and its thumbnail is `myimage_thumb.jpg`, then the suffix is `_thumb`. If blank (`""`), then the original image is used as its own thumbnail, which is nice if you're lazy, but looks worse due to the poor quality of most web browser's resampling. If you do end up leaving it blank, don't forget to set `thumbnailWidth` and `thumbnailHeight` to something small, like `"32px"`
thumbnailWidth	""	Specifies the width of the thumbnail image. You can include units, like `"32px"` or `"10%"`. Leave blank (`""`) to use the original width of the thumbnail file.
thumbnailHeight	""	Specifies the height of the thumbnail image. You can include units, like `"32px"` or `"10%"`. Leave blank (`""`) to use the original height of the thumbnail file.
countFrom	0	Allows the list of numbers to start at any given integer, including negative ones.
elementsPerPage	1	Specifies the number of elements to show at a time. This is useful to display more than one picture at a time, or include captions.

Download

Download version 2.80
(right-click and choose save as)

You may also want to download the configuration file for more options, as well as loading.gif

This script is licensed under the MIT License, which, to put it in non-legal terms, allows you to share, use and modify it. Even for commercial purposes. Check out the Wikipedia article on this license for more.

Changelog

Version 2.8
Version 2.7
Version 2.62
Version 2.6
Version 2.5
Version 2.0
Version 1.0