First Picture on www.opusonline.at
Second Picture
Third Picture had no caption!
Are we there yet?First Picture on www.opusonline.atSecond PictureThird Picture had no caption!Are we there yet?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>
...
</ul>
Now inside the head or body you link the main function to your image list.
<script type="text/javascript">
$(document).ready(function(){
$('#gallery').foxiswitch();
});
</script>
This is it! Automatically an image gallery is build with thumbnails and control elements.
Another possibility would be ...
$('#gallery').foxiswitch({externalImages:true,autoplay:true,textPrev:'«',textNext:'»'});
// 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>
</ul>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. |
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 jquery.com.
Check out my other small and easy programs!
foxibox
Nice image gallery. Very easy to use.
foxislide
Nice image rising effect. Very easy to use.
foxitip
Nice tooltips on links staying inside the window. You can even use different styles on one site. So easy to use.
foxiblob
Lavalamp effect on menus. You can even use different styles on one site. So easy to use.
foxiballoon
Objects following your vertical scrolling like a balloon. Very easy to use.
foxicols
Equal height columns made easy.