Create Dynamic Image Thumbnail galleries using JavaScript

What this article will actually teach you Is how to develop a JavaScript gallery that is backed up by a PHP script – a very often used combination for when trying to build up a nice and useful gallery.

What is a thumbnail gallery?

Of course, before starting anything we need to know what exactly a thumbnail gallery is and what it is useful for (or in more popular terms – what does it do?). Remember when web browsers have just started supporting images and web connections speeds were so slow that we were measuring them in single kilobits? Of course you do. Now, the job of a thumbnail gallery was, and still is to display several smaller previews of the original images.

Smaller not only in dimensions but also in file size – this is even more important. This would mean that anyone who would visit the gallery would not be required to download all images, but only the one that he needs or wants. This saves you server traffic, and him, time. The problem occurs when most of these thumbnail galleries fail to do exactly this – avoid making the user download all the files. Even more, if you resize your images using CSS and JavaScript, or you simply use HTML attributes for resizing you will find yourself with a bunch of low-quality thumbnails.

In order to avoid this, and offer thumbnail galleries as they should like, you will need to create smaller pictures of the large images that you intend to put in your gallery. There are several ways to do this – through a batch process before you upload the gallery or simply using a script on the server.

Using Javascript to fake dynamic galleries

Nowadays static galleries are rather boring, so go for dynamic galleries. In order to create a dynamic gallery from a static thumbnail gallery you can use JavaScript. You will turn it into a dynamic gallery by simply applying to all thumbnails a series of event handlers. Still, you should keep the gallery even for users that do not use JavaScript. Use the script below:

 
<ul id=”thumbnails”>
<li>
                <a href=”gallery/temp/img1.jpg”>
                     <img src=”gallery/temp/img1_th.jpg” alt=”img1_th.jpg”/>
                 </a>
           </li>
<li>
                  <a href=”gallery/temp/img2.jpg”>
                     <img src=”gallery/temp/img2_th.jpg” alt=”img2_th.jpg”/>
                 </a>
           </li>
 
    [… and so on with the thumbnails …]
</ul>
 

Now you can start creating a dynamic gallery using JavaScript! Good luck!

Related Articles - Yahoo Library with PHP | Create Own Del.icio.us Clone | Build Site like Reddit or Digg

Javascript library

Popularity: 16% [?]

(8 votes, average: 1.88 out of 5)

 Loading ...

Subscribe in a reader |

Links you may find interesting -