Camuti.com - ThumBox Thumbnail viewer

Thumbox 1.0 by Tim Camuti

Overview:

Thumbox is a script that organizes and displays clickable image thumbnails on web pages. It is browser and platform independent and can be added to any html page. When I created ThumBox, I wanted a clean way of displaying and describing screenshots of my work. I wanted to sort my images by category and have themes grouped together but have the enire portfolio compact and visible at a glance without being confusing or overwhelming.

With ThumBox, each row or slider is a group of related images with a title and description. If there is a lot of images, they slide into view when the user wants to see more. Groups of sliders are stacked and if the viewer is interested, they can click the up/down arrows or key up and down to browse the groups. For viewing the reference image I chose to use an existing script called Lytebox at www.dolem.com. an excellent image viewing script. I have included a customized version it in this package.

The result is a clean consise way of presenting a lot of thumbnails in orgnanized groups without overwhelming the viewer with too much information at once. It's simple to set up and with a little effort, it is easy to organise your own images.

Example

Click the up and down arrows or press arrow up or down to view the groups. Click the left and right arrows along the right to view all the thumbs of a slide. Mouse over the question mark icon to read a description of the slide group. Note the arrows are "smart". They know how many images or slides to move and turn on and off when you have reached the beginning or end.

Getting Started:

Download Thumbox.zip
Place each directory from the zip file in the root folder of your website. /CSS , /js , /images , /xml

add the following code to the <head> tag of your web page:

<script src="js/lytebox.js" type="text/javascript"></script>
<script src="js/thumbox.js" type="text/javascript"></script>
<link href="css/lytebox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/thumbox.css" rel="stylesheet" type="text/css" media="screen" />

Add this line of code to the web page where you want ThumBox to appear:
```
<div id="thumbox"></div>
```
The page should be working with the sample thumbnails supplied in the download.

Customizing ThumBox with your own thumbnails:

Thumbnails and images

It is assumed that you have the image editing software of some kind to create thumbnails. If you do not, try here.

Make all thumbnails no larger than 150 pixels wide and 110 pixels tall. Any larger and unexpected results may occur.
Name each thumbnail with the prefix, "thumb_" in each name. Make sure each reference image (the image the thumbnail will retreive) has the same name without the prefix. Example:
thumb_kid.jpg should have a reference image of kid.jpg
Save all thumbnails and reference images you want to view together in one strip inside a directory in the "/images/thumbnails" directory in the root level of your website.

Editing the thumbox.xml XML File.

ThumbBox displays image infromation through XML. To customize the file you can edit it in any text editor. There are also many free XML editors out there which I have never tried. A little HTML experience is probably helpful. I'll walk you through it best I can...

open thumbox.xml. It's located in the xml folder you placed in the website root. Edit the sample information that is in there.
All strip information is entered in between the <strips></strips> tags

All information for each strip is contained in between <strip></strip> tags. This is where you will be editing.
A stript is structured like this: You can cut and paste this into the xml file.

<strip>
    <title>Put the strip title in here</title>
    <directory>directoryName</directory>
    <description>Enter the description of the strip. 
    This will display when the info icon  is moused over. </description>
    <images>
    </images>
</strip>

For each thumbnail, you must add the following xml inside the <images></images> tags in the strip node. Again, cut and paste:
```
<img> 
    <title>Image Title Here</title>
    <src>thumb_whateverTheNameIs.gif</src>
</img>
```
The <title> text will describe the image when the reference images is displayed. The <src> is the thumbnail name. That is all the script needs to know to display the thumbnail AND the reference image.
OPTIONAL: You can also add links to other pages that will display in an iframe by adding link information inside the <img> tags.
```
<img>
    <title>Image Title Here</title>
    <src>thumb_whateverTheNameIs.gif</src>
    <link>
        <linkpath>http://www.thehungersite.com</linkpath>
        <width>640</width>
        <height>480</height>
    </link>
</img>
```
If you do this, clicking the thumbnail will open an iframe in the same way as an images is loaded. The iframe will link to the supplied linkpath and the size will be the width and height supplied.

Further Customizations

You can alter the amount of sliders that display (the sample here is set to two sliders). you can either add the following code to your head tag or alter the stripMax variable in the thumbox.js

<script language="javascript">
    stripMax = 2
</script>

Also, you can vary the xml file to display different galleries by indicating a new xml file via a querystring named tb.
Example

You are welcome to use Thumbox under the terms of the Creative Commons Attribution 3.0 License. It is very satisfying to offer the world at large this code project and see where and how its used. If you use it and are satisfied, I am requesting a small donation of $10 to show your support. Any amount is accepted through this button to PayPal. Thank you.

Notes

First off thanks Lokesh Dhakar for making LightBox and to Markus Hay For adapting it. They saved me hours and hours of work creating image display code I planned to design. Their execution is interface at its best and I see their code used everywhere. I hope that ThumBox is a valuable companion to their work. Further acknowledgements must go to W3Schools and quirksmode where I found more than answers but great explanations.

Secondly, all web projects are never completed, they are abandoned. At a certain point, you just have to put it out there. ThumBox1.0 is in its infantcy. There are many complications I wish to simplify, features I want to add and options I wish to offer. For now I want to see the response I get and I will take it from there. ThumBox has been tested in IE 6, IE7 and Firefox 1.0.7.

I am an information designer, I have made a career in user-centered web development. For me, ThumBox not just a way to display my work but an opportunity to express my practice in user interface. Feedback is critical to good design. Please contact me with your experiences with ThumBox.

Use it in good health!