Free code

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

To begin programming the behaviours, we'll open up the behaviours panel under Window > Behaviours at the top of Dreamweaver. Depending on the type of workspace you're using in Dreamweaver, this should open up the behaviours panel on the far right-hand side.  We're using the 'Classic' workspace for our example. It may already be open as well, with a tab at the top of this panel:

gal8

Now we'll click the first thumbnail image below the large image, then click the "+" button in the behaviours panel to bring up a list of commands. In here is a plethora of various effects you can add to elements on your webpage. For the gallery we'll be using the 'Swap Image' command so select that one which opens up a screen like this:

gal9

In here we want to make sure our thumbnail image (remember we labelled it with an ID of "T1") will pull up its' larger image counterpart when a user hovers their mouse over the thumbnail. To do this we'll make sure we select the "Main"image under 'Images' and we'll also browse our folders to locate the larger image we want to be displayed.  This is telling Dreamweaver that the main image should display the large image we select when a user hovers over the smaller thumbnail. Also be sure to keep both options checked in the panel:

gal10

After doing this, some instructions will appear in the Behaviours panel telling Dreamweaver how to display this image. Currently the command is that when a user places their mouse over the image, it will show the larger image on the screen:

gal11

You can also click the arrows on these commands to change the effect if you wish. For our gallery though, the mouse over effect is what we want so we'll leave it as is. Again, we'll keep going and select the second thumbnail "T2", go into the Behaviours panel and select 'Swap Image' and in here we'll select the Image 'Main 2'. We'll then click browse again and find the large image that corresponds with the 2nd thumbnail. After we've completed going through each thumbnail we have our finished gallery which allows users to hover over an image to display it larger in the main display window:

gal12

 

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