foxiswitch 0.2


Discover an image gallery you can switch through. You can even use the right and left arrow to navigate, the space-bar to start or stop the diashow and during the diashow the up and down arrow will make it faster or slower.



Damn small and easy program for a nice image gallery with thumbnails. It is designed to be easily integrated and just working fine even with IE6.

This program is under GNU General Public License v3. It was developed with jquery 1.3.2.

Actually the minified program is only 5 kB in size (gzipped 1.5 kB)! Last updated on 01st October 2009.


To 0.2 just the keys for playing the diashow faster and slower changed to up and down arrow keys.


Include the stylesheet into the head.

<link rel="stylesheet" type="text/css" href="jquery-foxiswitch-0.2.css" />

Include the jquery-library and the plugin at the end of the body or into the head.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxiblob-0.1.min.js"></script>

Inside the body you have your image list.

<ul id="gallery">
  <li><img src="image1.jpg" width="400" height="300" alt="first pic" /><span>First Picture</span></li>
  <li><img src="image2.jpg" width="520" height="390" alt="second pic" /><span>Second Picture</span></li>

Now inside the head or body you link the main function to your image list.

<script type="text/javascript">

This is it! Automatically an image gallery is build with thumbnails and control elements.

Another possibility would be ...


// in the body
<ul id="gallery">
  <li><a href="image1.jpg"><img src="thumb_image1.jpg" width="50" height="45" alt="first" /></a><span>First Picture</span></li>
  <li><a href="image2.jpg"><img src="thumb_image2.jpg" width="50" height="45" alt="second" /></a></li>

In this example the gallery is created with external images wich runs a diashow after loading. Text for links are changed to special characters "«" and "»". The second picture has no caption because of leaving out the text with the span element.

Please be sure to start the main function only once!


property default description
fade 0.3 Opacity of thumbnails. Allowed are values from 0 to 1.
speed 500 The speed for animation effects. Values are 'slow', 'normal', 'fast' and milliseconds.
caption true Shows the image caption. Allowed is true or false.
externalImages false If you use your own linked thumbnails. If true, thumbnails will not be resized. Allowed is true or false.
thumbWidth 50 Fixed width for generated thumbnails. Height defers. Value in Pixel.
slideSpeed 5000 Speed for diashow in milliseconds.
autoplay false Runs the diashow after loading automatically. Allowed is true or false.
textPrev 'Previous' Text for the previous link.
textNext 'next' Text for the next link.
textPlay 'Play' Text for the start-diashow-link.
textStop 'Stop' Text for the stop-diashow-link.
textHelp 'Help' Text for the help link.
helptext 'Left Arrow: Go backward<br />
Right Arrow: Go forward<br />
Space-bar: Play, Stop<br />
Up Arrow: Play faster<br />
Down Arrow: Play slower'
Helptext. You can use html.
imageBeforeCaption true You can switch the order of main image and caption. Allowed is true or false.
thumbsBeforeControls true You can switch the order of thumbnails and controls. Allowed is true or false.
imageBeforeThumbs true You can switch the order of main image (with caption) and thumbnails (with controls). Allowed is true or false.


If you use my program please be so fair to !

foxiswitch 0.2 full
jquery-foxiswitch-0.2.js, jquery-foxiswitch-0.2.css, license-gpl-3.0.txt

foxiswitch 0.2 minified
jquery-foxiswitch-0.2.min.js, jquery-foxiswitch-0.2.css, license-gpl-3.0.txt

package of foxiswitch 0.2 full, minified and this documentation
jquery-foxiswitch-0.2.js, jquery-foxiswitch-0.2.min.js, jquery-1.3.2.min.js, jquery-foxiswitch-0.2.css, documentation.html, images, license-gpl-3.0.txt

The latest version of jquery you will get on

Don't miss

Check out my other small and easy programs!

Nice image gallery. Very easy to use.

Nice image rising effect. Very easy to use.

Nice tooltips on links staying inside the window. You can even use different styles on one site. So easy to use.

Lavalamp effect on menus. You can even use different styles on one site. So easy to use.

Objects following your vertical scrolling like a balloon. Very easy to use.

Equal height columns made easy.