Click here for the latest version.

TinyBox is a lightweight and standalone modal window script. At only 3.4KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

TINY.box.show('advanced.html',1,300,150,1,3);

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/15/2009 – Updated logic to speed up the animation and fix a positioning issue. Slightly dropped the code weight.

Update 11/16/2009 – Fixed issue that occurred when sizing down a box.

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…

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 //

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 has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

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.

First and foremost, keep your code simple, clean and well documented. This is by no means unique to JavaScript but many people seem to think it is the exception to the rule. Your code should naturally comment itself but it is also important to at least introduce every function. I recommend two versions, a fully documented and formatted version and then a compressed version that you use in production. There are a number of free online utilities that can strip out comments and pack your script. There is no need to push out the extra size required for the documentation and formatting.

Second, keep your JavaScript in an external file. The only exception to this rule is if you have some very lightweight script specific to a single page or are setting up variables that cannot be done in the external JS. An external file results in greater scalability, maintainability and degradability. The correct way to reference an external JS file is as follows:

<script type="text/javascript" src="script.js"></script>

Third, separate your JavaScript from the presentation layer. We have all heard of unobtrusive JavaScript but we still see inline script all the time. Instead of cluttering your font-end code with dozens of event handlers add them dynamically. There are exceptions to this rule so please use common sense and separate the layers when it makes sense. An example of adding an onclick event handler from JavaScript:

var div = document.getElementById('div');
div.onclick = new Function("processClick(this)");

Fourth, properly define and scope variables. Many of the scripts I download hoping to use in a project I immediately throw out. The reason being that the programmer did not take the time to properly define and scope variables. Always reference the first instance of a variable by using var. Otherwise the only way someone can know if that is the first reference to that variable is by starting at the top and reading all the way down. It is also important to scope variables correctly. Don’t scope a variable on the global level unless you need it there. I also recommend differentiation of global and local variables though some kind of visual identifier such is all caps on global variables or some easily identifiable character.

Fifth, don’t assume JavaScript support in the first place. Depending on your audience you may choose to disregard this suggestion but for mainstream websites I highly suggest coding with the minority in mind (an estimated 5-10% of web users do not have JavaScript enabled) and degrade your scripts gracefully. JavaScript should be considered as an added feature and not a dependency. An examples of this would be links, the most fundamental element of a web page.

<a href="javascript:processClick()">link</a>
<a href="#" onclick="javascript:processClick()">link</a>


If the user clicks the either of the links above with JavaScript disabled nothing will happen. However, with the code below they could still navigate.

<a href="link.html" onclick="processClick(); return false;">link</a>