May
Dynamic Image Gallery and Slideshow
Posted by Michael in AJAX, Design, JavaScript
The updated version of the script is available here.
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:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(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>
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 to michael@leigeber.com with the title “BUG REPORT”.
Click here to download the source.
Update 5/16/2008 – Updated CSS and added outline:none for the next and previous links.
Update 5/26/2008 – Updated the CSS to resolve an issue with resizing the window in IE6. Thanks to Jon Stoski for reporting.
Update 5/28/2008 – Pushed script inside global namespace. Fixed a couple IE related bugs.
)
What to do, when the full size pictures and thumbs placed in the same folder?
personally i think you are selling a load of crap, the download file is not even close to 3kb, you are not talking about the include files you only talk about the html.
G on 15 May 2008 at 12:28 pmnice try but real webdevvers do it official style