Free code

Creating an image gallery in Adobe Dreamweaver CS6 Part 1/2

In this article, we'll look at creating an image gallery in your Dreamweaver project by using something called a 'Behaviour'. Behaviours are a way of inserting special features onto a website without using overly complex Javascript or Jquery code. In this example, we need to create a simple gallery for a classic car festival:

gal1

In the gallery above, you can see there is a one main image in the center and some smaller thumbnails in the squares below. We want our users to be able to hover over one of the smaller thumbnails and then have the larger image show up in the main display window. The trick to starting this is that you'll need two versions for each image you wish to include in your gallery: One larger image and one smaller image that will act as a thumbnail.

An easy way to organize galleries on your webpage is to use a table. To insert a table, go to Insert> Table on the top of Dreamweaver which will open up a screen like the one below:

gal2

In here you must specify the amount of columns and tables required to create the table. For ours, we used a width of 600 pixels, adjusted the cell padding to 1 pixel to give some added space between the photos and used an 8 row and 3 column format. We used 8 rows because we're going to merge some of the top cells together to contain the larger image. 3 columns worked for this gallery because we have 12 smaller images we need to accommodate and these will fit well into 12 columns. After pressing OK the table is inserted into our page:

gal3

To merge the upper rows, we'll highlight all of the ones we want to merge and in the bottom panel select the merge option (highlighted in red below) to merge these rows together. In the large space now created, we'll then insert the large image of a car:

gal4

gal5

Then in the smaller table boxes below, we'll place a thumbnail in each box:

gal6

Now that all of our images are in place, we need to code the Behaviour. But before doing this, it's important to give each image an ID tag so that when we begin coding the Behaviour, we'll be able to find each image. To give an image an ID tag, look for the ID space in the Properties panel at the bottom of Dreamweaver:

gal7

Right now the large image has an ID of "Main" because we selected our main large image and then labelled this as Main to separate it from the smaller images. Similarly our thumbnails have ID's of "T1, T2, etc" to denote these as thumbnails. This ID isn't the same thing as the image name however; it's just the ID we name it in Dreamweaver. Our images still retain the same names we gave them when we saved them in our images site folder.

In our next article we'll look at how to program this behaviour so that hovering over one of the smaller thumbnails will pull up the larger image in the larger display area.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image