How To Create An Image Gallery In Dreamweaver

Adobe Dreamweaver CS6 includes some inbuilt facilities like Swap Image behavior. The Swap Image behavior swaps one image for another image, this technique is normally used in button rollovers and Photo Gallery. You can swap more than one image at a time with a single Swap Image behavior. This tutorial is designed to help you create a Photo Gallery using Swap Image Behavior & Appear/Fade effects in Adobe Dreamweaver CS6.

Create a Beautiful PhotoGallery Using Swap Image Behavior in Dreamweaver CS6

Check out the demo here!

Let's start the tutorial.

Step 1 : Open Adobe Dreamweaver CS6 and load your "gallery.html" page.

Step 2 : Using DIV tag and CSS style we can create a basic layout for the photo gallery. Here we will start by setting the page properties as below
background-color: #333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

Step 3 : In this gallery, I have used 8 big images and 8 thumbnail images (i.e, small image). You can crop & set the bigger images size as : width – 640px, height – 500px and the thumbnail image size : width – 76px, height – 57px.

Step 4 : Just make a rough sketch of the gallery structure that you are planning to create. Hence it will help you to specify exactly how page elements will be arranged. In this tutorial, I need a layout structure as shown below:

PhotoGallery Tutorial

Step 5 : First I need to create the DIV tag and then to create its corresponding style like its position, margin, color, appearance, padding & size for the photo gallery layout page.

Step 6 : Using DIV tag, I have created the areas for the title, gallery big image and thumbnail image on the "gallery.html" page.

Step 7 : Then code the CSS properties in "style.css" style sheets to retrieve the below structure.

PhotoGallery Tutorial

Step 8 : Load the first big image (i.e, p1.jpg), where you want to insert it. Also I have named all the bigger images as p1.jpg, p2.jpg to p8.jpg and all the thumbnail images as p1a.jpg, p2a.jpg to p8a.jpg.

Go to Insert > Image.

The Select Image Source dialog box appears. Select p1.jpg image and click Ok.

PhotoGallery Tutorial

Step 9 : Repeat the process of "Step 8" for each thumbnail image to place them in their appropriate places.

Step 10 : Now the structure of the gallery has formed as below

PhotoGallery Tutorial

Step 11 : Select the image "p1.jpg" (i.e, bigger image). Let's create an Image ID on the "Bottom-Left" on the Adobe Dreamweaver CS6.

Type the ID as "gallery_main" in the properties field.

PhotoGallery Tutorial

Step 12 : Now select the thumbnail image. Repeat the "Step 11" and name the ID as "g1".

PhotoGallery Tutorial

Step 13 : Repeat this process for rest of the thumbnail images and name their ID as "g2, g3 to g8".

Step 14 : When you apply a behavior to an image, Adobe Dreamweaver CS6 inserts the HTML source code into the area tag automatically. Let's create the swap image effect to the thumbnail images.

Select the first thumbnail image and go to the "Tag Inspector" on the Right side of the work space and choose the Swap Image action from the list of Behaviors.

Tag Inspector > Behavior > Swap Image

PhotoGallery Tutorial

Immediately there appears a "Swap Image" dialog box. Please ensure whether the below 4 points has been done before clicking "Ok" on the "Swap Image" dialog box.

1. Images – Here select the image id, which you need to swap.

2. Set source to – Select the image name, what you need to replace with the "gallery_main" image on clicking the thumbnail.

3. Always check the Preload images (i.e, to load the images when the page is loaded)

4. Make sure to uncheck the Restore images onMouseOut (i.e, original images will be replaced)

PhotoGallery Tutorial

Here while I click on the thumbnail image "p1a.jpg", I need "p1.jpg" image to be displayed. Hence I have selected "p1.jpg" image.

Step 15 : Now for the thumbnail image "p2a.jpg", I have clicked "p2.jpg" image to be displayed. Repeat this action for the other thumbnail images too.

PhotoGallery Tutorial

Step 16 : After we set the actions, we need to set the events for all the thumbnail images. Adobe Dreamweaver CS6 applies default event as "onMouseOver", change that into an event as "onClick". (i.e, On clicking the thumbnail image, the bigger image will change according to its action)

PhotoGallery Tutorial

Step 17 : Now we have completed the simple photo gallery without any effects.

Step 18 : Get ready and try some effects to the photo gallery. Select the thumbnail image and set the "Appear/Fade" effect as below

Tag Inspector > Behavior > Effects > Appear/Fade

PhotoGallery Tutorial

In this tutorial, I have set the "Appear" effect for the photo gallery. Always make sure to keep the "Target Element" as the bigger image ID.

Set the "Appear" effect values as below

PhotoGallery Tutorial

Step 19 : After the completion of setting the effects to photo gallery thumbnail images. While saving the "gallery.html" file, the Adobe Dreamweaver CS6 will generate the javascript and its depending files named "SpryEffects.js" under the folder "SpryAssets".

PhotoGallery Tutorial

Note : Spry effects are a relatively new addition to Dreamweaver's arsenal of behaviors.

Step 20 : That's it, we have created a beautiful Photo Gallery using Swap Image Behavior in Adobe Dreamweaver CS6. The final output of the Photo Gallery is as below

PhotoGallery Tutorial