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, questions or suggestions to michael@leigeber.com.

Click here for the demo.

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.

Leigeber.com has been live for only two and a half weeks but there has been a tremendous response with almost 45,000 visits. I would like to get feedback from you on the site so far, where you would like to see it go and what articles/scripts you would like to see posted. The current layout was put together quickly to get the site up and I have begun work on a much better and permanent design. I have been documenting the new design process and Wordpress integration and will be posting a few articles when it launches.

If you have any suggestions or requests before the new site goes live I would appreciate it. There will be a number of new features and enhancements in the upcoming version. Feel free to email me at michael@leigeber.com or post a response here.

This versatile and lightweight JavaScript clocks in at less than 3.5kb unpacked. The above example is one of four scenarios I have demonstrated on the demo page.

To setup a scroll/slide area create a container with the following CSS properties…

position:relative; overflow:hidden; height:XXXpx;

Inside the scroll area container create another div that will house your actual content. It needs the positioned absolutely within the previous div. Each sliding or scrolling area on the page needs to have a unique ID for this div.

position:absolute;

Inside the content div you can need to create a section for each area of content, be it 1 or 50. For each section after the “prefix-” numerate the order from 1 onwards. The prefix (ie section, newssection, imgsection, etc) needs to be unique to the current sliding/scrolling container’s sections.

<div id="section-1" class="section"></div>

You can call functions to incrementally scroll up or down, scroll to a particular section and initiate autoscroll/cancel the autoscroll. Take a look at the source code for examples. You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com. This code is free for both personal and commercial projects.

Click here for the demo.

Click here to download the source.

This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

Below is the command to call the function…

colorFade('divid','background','ece7b4','f9bcbc',25,30)

The first parameter is the id of the element you are targeting. The second is the property to fade which can be the background, border or text. The third is the hex value of the starting color. The third is the hex value to fade to. The fourth and fifth are both optional. The first is the the number of times to divide the color difference and the last is the transition speed.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com.

Click here to view the demo.

Click here to download the script.

Update 5/5/2008 - I have tweaked a few things and integrated some performance improvements based on Nate’s suggestions.

This lightweight JavaScript form validation allows you to easily add attractive validation messages to your forms. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. The position of the form element (or any other element) is dynamically calculated.

Call the function as follows…

inlineMsg('name','You must enter your name.',2);

The first parameter is the id of the element you wish to display the warning in relation to. The second is the string you wish to display in the message box. You can include HTML, just be sure and escape when necessary. The third parameter is the time to display the message in seconds. It is optional and if left empty will default to the MSGHIDE variable in the JavaScript which is initially set to 3.

This has been tested working in IE6/IE7/IE8, Firefox, Opera and Safari. Please report any bugs to michael@leigeber.com.

Click here for the demo.

Click here to download the source.

Update 5/5/2008 - Updated the script to focus to the erroneous textbox when displaying an alert. Thanks to mbh for the suggestion.
Update 6/2/2008 - Resolved issue with form field focus on non textbox fields. Added select dropdown to the demo and source.