Using a Web Widget to Create a Photo Gallery in Adobe Dreamweaver CS5

As you may already know,  Adobe Dreamweaver provides some very useful functionality through the Spry JavaScript Framework, such as the Spry Menu Bar.  However, there are many other popular JavaScript Frameworks which have additional Widgets. Of course, if you know JavaScript adequately well, you may write your own JavaScript.  What if you do not know JavaScript, though?

Here is where Web Widgets can save you! Widgets are objects you may easily add to your web page to provide additional functionality not native to Dreamweaver or the Spry Framework. You can install widgets through the Adobe Extension Manager and add icons and menu items to Dreamweaver. Once installed, you can use these objects just like any other object natively built-in to Dreamweaver.

Using the Widget Browser to search for Web Widgets

To begin searching for web widgets, look for the small gear-like icon in Dreamweaver. (Depending on your chosen Workspace layout, it might be in a different location. This is how it appears in the default “Designer” view.)  When you select “Widget Browser…” it will open a browser and take you to the Adobe Exchange Website.

Widget Browser

The Adobe Exchange has many Extensions for Adobe products.  Many are free, but some do have a cost.

Installing a Web Widget

When you select an item on the Adobe Exchange, you will download it onto your computer as a .mxp file and execute it. The Extension Manager will then ask you to agree to the terms (as shown below).

Adobe Extension Manager CS5

You must now restart Dreamweaver in order to use the newly installed Widget.  Once you have restarted, your Widget will be added somewhere to the menus and toolbars; the widget’s documentation should tell you exactly where.  Our slideshow Widget, for example, is added to a new category in the Insert panel named “Web Widgets,” as shown below:

Insert Web Widgets

You’re now finally ready to insert the photo gallery! In Design or Code View, simply place your cursor in the spot you would like the gallery to appear and click the new icon.  The next time you try to save the document, it will ask you whether you want to save the necessary supporting files for the gallery. Dreamweaver will add them to your site and they must eventually be uploaded to your web server.

Copy Dependent Files

This Web Widget provides you with four sample images and the thumbnails for the bottom.  A caption appears on the bottom of the image and the gallery automatically plays.  If you hover over the image, controls appear to stop, advance and rewind the show.

Photo Gallery

You surely want to replace these sample images with your own, however. To do so, you must edit the code directly.  But, don’t worry; you can just mimic the example that they provided.

Customizing the Photo Gallery

Below you will find the code for the entire page in which the photo gallery has been added to. Notice the <script>, <link>, <div> tags, and the “var” variables:





The portion of the code which defines the location of the photo gallery is in a single div. The id and the class of the div must remain the same so that the JavaScript and CSS properties will be applied properly:

<div id="show1" class="slideshow"> </div>

The names of the images and their corresponding captions are stored in an JavaScript Object called data. You must replace the names of the sample images (1.jpg, 2.jpg, etc.) with the names of your images. The captions follow the word caption in single quotes. Be sure to leave the rest of the punctuation as is. Notice one important detail: Each line ends with a comma except the very last one. Be sure that each of yours end with commas except the last one.

var data = {
'1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' }
};

The last important section defines some of the slideshow details, such as duration (the length of time each picture is displayed in milliseconds).

var myShow = new Slideshow.KenBurns('show1', data, { captions: true, controller: true, delay: 4000, duration: 1000, height: 300, hu: 'images/', thumbnails: true, width: 400 });

One more important note. In order to show thumbnails, your thumbnail images must have the same name as the main image, but with a “t” on the end.

If you want to learn more, check out our Introduction to Dreamweaver CS5 Training classes. Hear about our latest Adobe blogs, classes, and webinars by signing up for our newsletter. Best of luck!

Searching for Web Widgets

W

Searching for Web Widgets

idgets are objects you may easily add to your web page to provide additional functionality not native to Dreamweaver or the Spry Framework.  They are installed through the Adobe Extension Manager and add icons and menu items to Dreamweaver.Widgets are objects you may easily add to your web page to provide additional functionality not native to Dreamweaver or the Spry Framework.  They are installed through the Adobe Extension Manager and add icons and menu items to Dreamweaver. Of course, if you are a JavaScript expert, you may write your own JavaScript.  But, what if you do not know JavaScript?

Of course, if you are a JavaScript expert, you may write your own JavaScript. But, what if you do not know JavaScript?

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


One thought on “Using a Web Widget to Create a Photo Gallery in Adobe Dreamweaver CS5”