Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to Create a Photo Gallery in Dreamweaver

With the Extend Studio jQuery XPOSE Gallery extension you can create beautiful jQuery photo galleries in Dreamweaver. Here is the example that we will use for the following tutorial.

Install and locate the jQuery XPOSE Gallery in Dreamweaver

You can download the jQuery XPOSE Gallery for Dreamweaver from here: http://www.extendstudio.com/product/jquery-gallery-dreamweaver.html

For Dreamweaver CS5, CS5.5, CS6, CC:
– open the “jQuery_XPOSEGallery_PRO_version.zip” file using Adobe Extension Manager;
– restart Dreamweaver.

For Dreamweaver CS4:
– open the “jQuery_XPOSEGallery_PRO_version.zip.mxp” file using Adobe Extension Manager CS4;
– restart Dreamweaver.

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

The Extend Studio products are available in the “Insert” window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.

If the “Insert” window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

If the “Insert” window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the “Common” drop-down – marked with a down arrow.

The Extend Studio products should appear in the pop-up list.

Install The Design Editor AIR Application

The extension uses an additional AIR application for image editing and resizing. You will find the “XPOSEGalleryImageManager.air” installer file inside the extension package. You should install it in order for the extension to function properly.

Insert a jQuery XPOSE Gallery into a page

In order to add a jQuery XPOSE Gallery to a page, you need to create a html page inside a site. If you don’t know how to define a site in Dreamweaver, check this page for help:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

1. Put the mouse cursor into the element where you want the gallery to be added.

Add a photo gallery to your page in Dreamweaver

2. Click the “insert gallery” button from the Dreamweaver “Insert” window.

Insert Photo Gallery in Dreamweaver

3. The jQuery XPOSE Gallery for Dreamweaver Editor will appear.

- change the gallery name;

- change the width to 1000 px;

- change the height to 500 px;

- the pictures and text can be chosen from here, or later, from the Property Inspector.

When you’re done, click the “Insert” button.

Photo Gallery Editor in Dreamweaver

Change the Photo Gallery settings

After inserting the gallery into the page the jQuery XPOSE Gallery Property Inspector will appear.
We will make some edits here, to get to a simpler design, by keeping only the preloader, the image area and the thumbnails bar – that will be sliding from bottom at mouseover.

Change Photo Gallery Settings in Dreamweaver

1. From the Property Inspector go to the Photo Gallery and align the gallery to center.

Align Photo Gallery to Center

2. Select the “Controls bar” from the Property Inspector:
- remove it, by pressing the “Delete” button from your keyboard.

Photo Gallery Controls Bar

3. From the Property Inspector select the Thumbs bar:
- Set the “Offset X” property value to 0;
- After adding the changes, click the “Apply changes” green button;

Photo Gallery Thumbs Bar

4. Select the Image Area:
- Change its height to 500px;
- After adding the changes, click the “Apply changes” green button;
- Whenever you change the “Image Area” dimensions the images need to be resized to that they fit in. The “Regenerate Images” button will appear.

Photo Gallery Image Area

Preview the page in browser

Here is how the photo gallery will look like.

Facebook comments:



Leave a Reply