I received requests from a number of visitors these last few days asking me how they could create a web page that displayed a thumbnail, or smaller version, of a picture, that when clicked will cause a larger resolution image to be shown. This tutorial describes how this can be done using Dreamweaver, a well known web editor for designing websites.
As with all tutorials, I have to make certain assumptions.
Since this is a tutorial about using Dreamweaver, you will (obviously) need to have Dreamweaver.
If you do not use Dreamweaver, the section below on alternative methods may still be useful to you, since it does not require you to use any specific web editor.
I will also assume that you have some basic knowledge on working with Dreamweaver. This tutorial only deals with the specific problem of creating a web page with a thumbnail that when clicked shows a larger picture. It does not take you through all the other aspects of using Dreamweaver or designing a website. If you are only just starting out, I recommend that you begin with the following two tutorials:
Those tutorials guide you through the steps of creating a fully functional website from scratch.
You need some sort of photo editing or image editing program. This program is needed to create thumbnails, or smaller resolution versions of your photographs. I will describe the procedure for using Photoshop CS3 (since that is what I have), but you are free to use any other photo editor if you wish. A number of free photo editing programs can be found on thefreecountry.com's Free Image and Photo Editing Programs page. Note, though, if you use a different one from me, the exact method to generate a thumbnail will be different. But since the basic principles are the same, you're not totally on your own.
The first thing you'll need to do is to create a thumbnail of your picture. A thumbnail, as you have probably surmised, is merely a smaller version of your picture. To create the thumbnail, we will use a photo editor to resize a copy of our image.
As mentioned earlier, the procedure below was performed using Photoshop. If you use a different program, just look at the main heading for each step and use the equivalent procedure in your software.
The first thing you should do is to make a copy of your photo and work on that copy. This is purely a precaution, in case you accidentally overwrite your original photo with your thumbnail. If you have many photos or pictures for which you want to create thumbnails, create a new folder and copy all the photos into that folder.
(If you use Windows, remember not to drag the photos from one folder to another. If both folders are on the same drive, you'll be moving the photo instead of copying it. Instead, select the photos, right click them and select "Copy". Go to the new folder, right click and select "Paste".)
To load the picture you are going to resize in Photoshop, click "File | Open" and select the image. Note that "File | Open" means click the "File" menu, followed by the "Open" item on the menu that appears. I shall use this same kind of shorthand to describe the procedure for clicking various menu items in the rest of this article.
Select "Image | Image Size". An "Image Size" dialog box will appear. The default width and height given in the window is the current dimensions of your image. Since you want to create a thumbnail of your picture, enter a smaller number into either the width or height box.
Notice I said to enter only one of the new dimensions, that is, either the width or the height. If the check box for "Constrain Proportions" (somewhere in the lower half of the same dialog box) is selected, Photoshop will automatically calculate the other dimension. This way, things depicted in your photo will remain proportionate. If you prefer to manually specify both the width and height, and don't mind a distorted picture (where a person or object in your picture may appear too fat or too tall) uncheck "Constrain Proportions".
For those who are not sure how big a thumbnail should be, let me assure you that there is no "standard" for thumbnail sizes. It's up to you. Basically, just apply the common sense rules of making sure that your thumbnail can fit into your current web design, as well as being small enough so that your page can load fast. Pictures that are very big will take a long time to download, slowing down the display of your web page.
Select "File | Save As" and save the image under a new name. Other than the name, accept the defaults provided by Photoshop for your image if you're prompted when trying to save the file, unless you have specific preferences.
Some notes about filenames:
Make sure you have a way to distinguish between your original photo and your thumbnail. Either save all your thumbnails in a folder specifically for thumbnails (for example, name it "thumbnails"), or add a little suffix to your filenames (for example, the thumbnail version of "photo.jpg" can be called "photo_small.jpg").
Of course there is nothing to stop you from naming your files whatever you like, or placing them anywhere you want. But you'll appreciate what I said about the naming conventions in the future, when you have hundreds of files to prune or maintain. By then, if you don't have a standard naming convention, you'll have forgotten which file is which, and will have to go through every single file just to find out which is the thumbnail and which is the original.
Do not put spaces in your filenames. And don't use capital letters (uppercase). Spaces and capital letters can cause problems for your site in the future. Even if you consistently and correctly encode all your spaces in your web addresses, and use the correct case, others linking to your site may not, leading to all sorts of problems. If you don't fully understand my previous sentence, you should definitely not put spaces in your filenames, nor use capital letters.
If you have more than one picture, do the same thing for the other photos.
Now that we have the thumbnail, we will use it to link to the full picture in Dreamweaver.
This step is very important. Before you can modify your web page to include the thumbnails and photos, you will need to copy both the set of full-sized photos and their thumbnails to a folder within your local copy of your website. For example, if all the files for your website are currently kept in "c:\Documents and Settings\thesitewizard\My Documents\My Website", create a new folder within "My Website" and copy all your images there.
Note that when I say "your local copy of your website", I mean the copy of your web pages that are currently saved on your own computer and not the one on your web host. It's the copy that you usually work on in Dreamweaver before you publish it to your site. Your pictures must be copied to a sub-folder somewhere within this local copy. Otherwise when you link to it in Dreamweaver, you will get errors. And when you upload your page to your website, you will find that the pictures are not automatically uploaded. The end result is that you will have a web page where none of the photos appear.
Once again, let me emphasize that this step is very important.
Load the page where you want to insert your thumbnail. If you're creating a new page and you want your photo gallery page to have the same basic layout and design as the rest of your site, make sure you create the new page from your site's template (assuming you're using one).
Move your cursor to the portion of the page where you want the thumbnail to be. Select "Insert | Image". In the "Select Image Source" dialog box that appears, find the thumbnail you created earlier, and click OK. When prompted, enter a brief description of your picture in the "Alternate text" field. This description is useful for accessibility purposes as well as to make your site more search engine friendly.
Move your mouse over the picture, and click your right mouse button. In the menu that appears, select "Make Link". In the dialog box that appears, select the full-sized picture that corresponds to your thumbnail. Click the OK button.
When you're through, save the publish the page in the usual way. Load your site with your web browser, and test that page by clicking the thumbnail. You should be able to see a bigger version of that picture.
Incidentally, if you get error messages from Dreamweaver telling you that "The file is outside the root folder of site 'Whatever-the-name-of-your-site-is' and may not be accessible when you publish the site" when you insert your thumbnail or make it into a clickable link, it means you did not follow my first step of copying the images into your website's folder.
If you use Photoshop CS3, there is a faster way of creating thumbnails for all your photos, especially if you have many photos to process. In fact, Photoshop will even create a basic photo gallery web page for you. Of course, you don't have to use the created web page if you don't want to — just grab all the thumbnails it generates and insert them in Dreamweaver as described above. Or, if you like the basic functionality of the Photoshop-generated web page but want to spruce it up, you can also load and edit it with Dreamweaver.
To use Photoshop's photo gallery feature, select "File | Automate | Web Photo Gallery". Select the source folder for your pictures — the folder where you placed all your full sized images. Select a destination folder for the photo gallery. You should create a new empty folder for this purpose beforehand. If you wish, you can also customize other things — for example, the size of the thumbnails can be changed in the Options section. When you are ready, click "OK" and Photoshop will create the entire photo gallery page, complete with thumbnails and copies of your original photos.
If you want a picture that pops up a larger version that overlays the existing page, possibly with options to scroll through a gallery of other pictures, you may want to use a JavaScript (a sort of mini-computer program that you can insert into your web page) to do the job. In such a case, take a look at the Free Image Pop-Up JavaScripts page, where you may be able to find something suitable.
With this tutorial, you have learnt the basics of how to create a photo gallery or photo album for your website, where your web page has thumbnails of pictures which when clicked will cause a larger version of the photo to be displayed.
Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create a Thumbnail that When Clicked Opens a Larger Version of the Picture in Dreamweaver
