eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo Themes Tutorial

Note: In the eZeeGallery version 1 the gallery page will have an .asp extension, in version 2 the gallery page will have an .htm extension.

Version 1: gallery.asp
Version 2: gallery.htm

The User Guide will refer to the gallery page as gallery.asp/htm

Preface

In this tutorial we will go through step by step to create a Gallery. In this Gallery we will use only one folder of full images and the Dual Style Theme will be used.

Firtst things first

The full size images

You can use your own images or the included set of images that came in your package in the "Tutorial" folder. If you choose to use the included images, locate the Package folder you unzipped from the eZeeGallery.zip and be ready to copy the flowers folder into your site.

eZeeGallery Package Contents

Note: Once you have your full size images in your site it is easy work from here. When making your own galleries do this step first. Prepare your full size images in the graphics program of your choice and export them to a folder in your site dedicated to your full size images.

The full image folder

When making your own galleries, it doesn't matter where in your site your full image folder(s) reside or what they are named. This is your choice and makes no difference to the eZeeGallery. This folder however, should be clean of other images that you do not intend to use, or any other files for that matter, that you do not wish to use for your gallery. If there are images in the folder, the eZeeGallery will see them and attempt to make a thumbnail of them. The eZeeGallery was designed to work only with JPG images so you should not place any other type of image in your images folder.

For the tutorial, create a folder in the root of your site and name it "". Then copy the entire flowers folder inside of the "" folder. For simplicity sake we will show only the files we are dealing with in the screenshot examples below. You site may contain many other files and folders. The " index.htm" indicates the home page of your site.

The relevant ezeeGallery folders and files

eZee gallery folder structure

The Gallery Page Folder

For this tutorial we will use the "" folder for the location of our actual Gallery page. This is where the actual Gallery page will be transferred to when running the extension. The Gallery page will be named " gallery.asp/htm". It does not yet exist as we have not yet run the eZeeGallery interface.

Before we build the actual gallery, upload the "" folder with the full size images to your server. Next we will set the permissions for the image folder.

Launching the Interface

Note: In order to run the eZeeGallery Interface we must have an open document from your site. It doesn't matter what or where the page is. When using a selected Theme, nothing will be written or changed in this page, it simply allows us access to the Interface.

Open any page in your site now.

Launch the eZeeGallery Interface from the eZeeGallery icon in the InsertBar "MX/MX2004" - Objects Panel "DW4" . By default one Gallery will populate the list. Press the "Select Image Folder" button and browse to the folder containing your images.

eZeeGallery Images Folder List

Once you have selected the folder for the selected gallery entry, the folder will be appended to the list selections text. After creating a gallery you may return to the interface at any time to add more galleries or change the folder for your current gallery. The interface "remembers" your settings and will populate the fields with your previous selections.

eZeeGallery Images Folder List

Setting the Gallery Title

You can type in here whatever you want or leave it blank if you wish. You can always set or change the Title after the gallery has been created.

Selecting a Theme

The eZeeGallery comes with 7 predefined Theme packages. Each package is complete with all of the files needed and are placed in your " " folder when you press the OK button in the Main eZeeGallery Interface. There is also a "No Theme" option which will insert the gallery components into any page you choose.

For the tutorial we will use the Dual Theme package. Select "Dual" from the Theme list options.

No Theme Selected

Note: The other options in this section of the interface will be dimmed when a Theme is chosen. These options only apply to the "No Theme" selection.

The Gallery Page

The next step in creating our gallery is to browse to the folder where you want the actual gallery page to reside. We are using the "" folder as the location of our Gallery page. Remember, you do not need to create the gallery page, the eZeeGallery Interface will create it for you. All you need to do is click the Browse button to point to the folder where you want it to be. The eZeeGallery will create and place your gallery page in this folder.

After you have selected the folder, the path will appear in the Gallery Folder field.

The Thumbnails dimensions

Next, we will determine the size that the thumbnails will be. Enter the Height and Width into the corresponding fields. The numbers are in pixels. For our tutorial we are using 70 pixels for the thumbnails width and 40 pixels for the thumbnails height.

Thumbs Displayed

This setting determines the number of thumbnail images that will appear in your gallery page when viewed. This number constitutes a "group" of thumbnails. If you have a total of 20 images in your gallery and have the Thumbs Displayed at 5, then you have 4 "groups" of 5. Enter into the Thumb Group Links field the number of links you wish to have.

Setting the Thumb Group Links

With this setting you can determine how many thumb group links will appear. If the number of actual thumb groups exceeds the number of thumb group links, a forward or back arrow will appear allowing access to the additional groups. The arrow images are included for each style and will automatically be placed in your "" folder.

The Image Transitions

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. For the tutorial you can choose any effect you like, or No Effect.

Speed

The speed selection determines the speed in which the ecceft will display. The lower the number the slower the effect will display. We will leave this at 0.3

Preload Full Images

Most web designers know the target weight size for a web document is between 40 - 60k. This is a bit forgiving when it comes to an image gallery. Most visitors know they will be viewing a document that may take a bit to load the images. That said, it is still nice when there isn't a wait for the images to load. This is where the Preload Full Images comes in.

If this option is selected, the eZeeGallery scripts will begin preloading all of the full images you have defined for that particular gallery. This action starts as soon as the page loads. It starts preloading them in the order that the smaller thumbnail versions appear. The visitor does not have to wait until all of the full images preload before he starts viewing the full images. Simply, if the full image hasn't preloaded yet, it will load when the visitor clicks on the corresponding thumbnail. We will check this option for the tutorial.

Section 2 of the Tutorial