This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Recently I was looking for a nice existing script for a client project. I wanted something elegant, simple and lightweight. What I found were a number of scripts built on JavaScript frameworks and a few others that really lacked any appealing interface or were over 30kb. I challenged myself to build a full-featured slideshow gallery under 4kb. Hopefully I will be add a few more features to the script soon and make it a little mode user-friendly.
Here is an example of the markup…
<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:imgNav(-1)" id="previmg"></a>
<a href="javascript:imgNav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
The list section is the important element to the gallery. Each li has a value property that is set to the name of the full-size image. The interface is very flexible and can easily be altered in the HTML and CSS.
You will also need to setup the variables below and include the slideshow JavaScript…
<script type="text/javascript">
var imgid = 'image'; // id of image div //
var imgdir = 'fullsize'; // full-size image directory //
var imgext = '.jpg'; // full-size image extension //
var thumbid = 'thumbs'; // id of the thumbnail container //
var auto = true; // automatic rotation toggle //
var autodelay = 5; // seconds before the image rotates //
</script>
<script type="text/javascript" src="packed.js"></script>
Last but not least the onload event…
<body onload="slideShow()">
This script isn’t completely polished yet but I wanted to go ahead and get it out there for anyone that can put it to use. It is tested working in IE6/IE7, FF, Opera and Safari. Feel free to use it in any personal or commercial projects. Please send any bug reports, questions or suggestions to michael@leigeber.com.
Click here for the demo.
Click here to download the source.
9 responses so far
