If you have some photo gallery, with many folders of your events and each folder give to user a list with all photos you probably want to display one large photo and the others are small (thumbnails) in some list bar. And when visitors clicks on the thumbnails, on the place of large image to appear large image of the clicked thumbnail.

Of course, you can do this with PHP by sending GET request with image name stored in the url, but this will reload entire webpage, visitor will get sad and more traffic will be generated from your photo gallery (If your photo gallery have many visitors and many photos, probably your internet hosting provider will tell yoo - Go to higher plan, you eat too bandwidth!).

With this tutorial I will show you how to make your photos to be loaded (and displayed) in large variant immediately after when responding thumbnails are clicked. To keep interactivity up we will use Java Script which is executed on visitors browser and for this, no page reloading needed.

First we have to prepare HTML page with some simple thumbnails bar and some place where large images will be loaded. Please note that on the each thumbnail we using handle onclick="showimg(picname);" which call the Java Script function. In this tutorial I will use even a free image hosting service for storing the images. Here is the sample html code:

Now we have to prepare Java Script function which will done the real job. Here is the ready function:

Now we will embed the Java Script function into photo gallery html file. Here is the complete html source.

And now lets see the result: