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.
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
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:
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.
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.
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
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.
Step 12 : Now select the thumbnail image. Repeat the “Step 11” and name the ID as “g1“.
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
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)
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.
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)
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
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
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
Please do share your feedback in the comment box!