eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo Main Interface

The Image folders List

eZeeGallery Images Folder List

The first thing that needs to be done when creating your gallery is to determine how many image folders you will have to display. You can have only one or several to create an album. Then create and optimize the full size images and export them to your folder(s).

When you are ready to create your gallery, you will launch the eZeeGallery Main Interface. Pressing the "Add Folder" button adds an entry to the Full Image folders list. Each entry in the list represents a folder of images for your gallery. For each entry in the list you must select a folder containing the full size images by pressing the "Select Image Folder" button and browsing to the folder containing these images. The Rem Folder button removes an entry from the list.

The Image folders List with multiple full image folders

eZeeGallery Images Folder List - Multiple Galleries

The Gallery Title

For any folder of images you have associated with your gallery, you can set a Title for that folder of images to display in the gallery page when viewed. The Title is optional and if left blank, no Title will be displayed in the actual gallery page when viewed.

This is ideal if you are creating an album and would like each folder of images to display a unique Title in the gallery page when viewing each folders images.

The Gallery Page Location

The Gallery Folder field is where you want your actual gallery page to reside. There will be only one gallery page. Even if you have multiple folders of images, they will all display inside of the same gallery page.

Clicking on the browse button will allow you to select the folder where your gallery page will be placed. The gallery page will be named gallery.asp and will be automatically placed in the folder that you choose when you press the OK button in the eZeeGallery interface.

If the NoTheme is selected the Gallery Folder field and Browse button will be dimmed and unacessible as there will be no need to create a gallery page. The gallery elements will be inserted into the open page where the cursors lies.

The Thumbnail Dimensions

These fields determine the desired width and height of your thumbnails. These values are passed onto Fireworks to create and export your thumbnails if the "Run Fireworks" checkbox is checked.

Thumbs Displayed / Thumb Rows

Thumbs Displayed

This value determines the number of thumbnails that will display on your gallery page. This number constitutes a thumbnail group.

Thumbs Rows

This value determines how many rows (left to right) of thumbnails you will have.

Note: If you have the Thumbs Displayed set to 5 and the Thumb Rows set to 2, 10 thumbnails will appear on the page. 2 Rows of 5 thumbnail images.

Note: For a vertical stack of thumbnails you would set the Thumbs Displayed to 1 and the Thumb Rows to however many you want stacked on top of each other. This method is used in the Dual and Olive Window Themes.

Thumb Group Links

Your thumbnail images are automatically placed into groups by the options above ( Thumbs Displayed/ Thumb Rows ). If you have 20 images and the Thumbs Displayed is set to 5, there will be 4 groups of thumbnails. 4 Links will appear, each indicating a "Thumb Group" of 5 thumbnails on your page to select between the groups.

If you have a very large number of images, the number of groups will substantially increase. If you do not wish for all of the Thumb Group Links to appear you can set an amount that will display on your page. Forward and Back arrows will appear automatically to access the additional groups if the number of groups exceeds the number of Links chosen in this option.

The Preload the full Images / Overwrite the Gallery Page Option

The Preload the full Images

The eZeeGallery automatically preloads all of the thumbnail images. You also have the option to preload the full images when the page first loads. This will allow your visitors to access the full images much faster than having to wait until each full image is viewed when its thumbnail is clicked. This option is recommended.

If you check this option to preload the Full Images your gallery page will start preloading all of the full size images you have in your images folder when it is viewed. The visitor can begin clicking on the thumbs and viewing the full images, even if all of the full images haven't yet been preloaded. If a full image is accessed and it hasn't yet been preloaded by the script, it will still display, just a little slower .. depending on the speed of the visitors ISP.

The Themes

eZeeGallery Theme List

The eZeeGallery comes with 7 individual themes from which to select. There is also a No Theme selection which inserts the gallery divs into your document at the location of your cursor.

The Themes with No Theme Selected

eZeeGallery No Theme Options

You may want to place a gallery into an existing page instead of using a separate gallery document. This is what the NoTheme option does for you. If the NoTheme option is selected, all of the necessary elements for the gallery are inserted into the open page where your cursor is placed. No gallery.asp page will be created or placed into your site.

Full Image as Popup ( NoTheme only )

When using the NoTheme option another option becomes available. You have the option to have the full image display inline in your pages layout, or have the full image display in a div "popup". If the popup option is selected, only the thumbnail divs will be inserted into your page. This popup is actually a layer, or "absolutely positioned div". When each thumbnail is clicked the full image will open up in a separate div window.

This popup window will be positioned centered in the browser viewport and is closed by clicking on the full image itself.

Popup Mask ( NoTheme with Popup only )

Checking the "Mask" feature will insert a div into your gallery page that will cover 100% of the entire viewable portion of the screen. The Mask div is set to "hidden" by default and the background color is set by default to #FFF ( white ). The Mask feature is optional and was incorporated to give your full image a clean canvas background in which to display itself.

How the Mask works...

When a thumbnail is clicked, the Mask div will display covering up everything else in the page except the full image. When the full image is clicked, the full image as well as the Mask div disappear allowing the thumbnails and any other content on the page to become visible once again.

This div is positioned "absolute" and the default is at top= 0, left= -2. You can change any of the properties of the Mask div in the Dreamweaver Property Inspector. You can change its background color or give it a background image to suit your design goal.

You should not change the size of the Mask div. Doing so will have no effect as the ezeegallery script will always resize it to cover the viewable area of the page.

The Themes with a Theme Selected

eZeeGallery Theme Selection

If a Theme Style is used the Popup and Mask options become disabled as all of the Themes use an inline full image only.

When selecting any of the Themes, including the NoTheme, all of the necessary files and documents are placed into a folder in your defined site. This folder is named "" and resides in the root of your site.

Effects / Speed

Effects

The eZeeGallery contains an option to apply one of 43 transition effects for the full images. If an effect is chosen, the full image will display with this effect. The available effects will only display in IE ( Internet Explorer ) browsers. For all other browsers the full image will display normally as with no effect applied.

Speed

The speed selection determines the speed in which the effect will display. The lower the number the slower the effect will display.

Creating the Thumbnails

If this option is selected, when the OK button is clicked, Dreamweaver will open the eZeeThumb Creator Interface. Clicking OK in this interface will launch Fireworks to begin the process of creating, optimizing and exporting the thumbnail images to your Full Images folder.

Upload your Files!

Note: As stated throughout the User Manual, It is recommended to upload the entire " " folder after making any changes to the gallery. This will assure that any changes you have made will be updated completely.