eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo Themes Tutorial

Creating the Thumbnails

Check the Run Fireworks selection. 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.

The CreateThumb Settings

Browse to your folder of Full Sized Images. Shown here is an example of a folder named "flowers".

Set the Full Images Width to 500.

Leave the next 2 options unchecked. For this tutorial we are not changing the size or optimizing the Full Size Images.

Select the "Better Quality - Existing Format" for the Thumbnails. We do not need to be concerned with the Full Size images as we are not altering them in any way.

Set the Thumbnails Width and Height to 70 and 40.

With all of the setting selected we can now click the OK button. Fireworks will launch and begin the process of creating, optimizing, and exporting the thumbnails to our site. It will create a folder named "thumbs" inside of our Full Images folder and place the newly created thumbs inside of there.

Creating the Files

After Fireworks has completed, Dreamweaver will proceed with creating the files and exporting all of the necessary files place them neatly in your sites directory and then the eZeeGallery Main Interface will colse. You have now finished creating your Gallery. All you need to do now is upload all of the files. In next section we will take a closer look at the files created, where they are, and what they are for.

The Files Created and what to do with them

For any Gallery that you create, there are 3 things that need be uploaded to your server. The gallery page " gallery.asp/htm" page and the "" folder, both of which are created when running the extension interface, and the "Full images folder". For the tutorial, we have already uploaded and set the permissions for the full images folder.

Note: If the "" folder doesn't appear in your site window you may need to press the Refresh button in your site window.

Here is a list of all of the files that need to be uploaded to your server...

Your Full images - folder ( Located in the Images Folder you browsed to earlier in the Gallery List )
gallery.asp/htm - page ( Located in the Gallery Folder you browsed to earlier )
- folder ( Located in the root of your defined site )

If you are following along with this tutorial while building your gallery, upload these files now.

You have just completed creating your Gallery and it is ready for viewing. All you need to know now is how to link to your Gallery page. This is covered in the next section Linking To Your Gallery.

Tutorial Overview

For simplicity sake we will show only the files we are dealing with for the tutorial in the screenshot examples. You site may contain many other files and folders. The " index.htm" indicates the home page of your site.

We have added a new folder for the gallery page and the full images. We have named this folder "". Inside of this folder we placed the folder for the full images. The full image folder is named "".

The site structure now looks like the example below.

eZee gallery folder structure

After running the eZeeGallery Interface with all of your options selected, the actual gallery page to display your images " gallery.asp/htm" and the "" folder are created and placed into your site.

eZee gallery folder structure

There is only one page that displays the gallery. The " gallery.asp/htm" page. No matter how many image folders you have defined to your gallery it is this one page that will display all of the images from all of the folders.

You do not really need to know, and will not need to modify in any way, any of the newly created files in the "" folder with the exception of the " ezeegallery.css" file. We will cover this a little later in the Help Files.

What's in the "" folder?

The first folder you will find is the Theme Folder. In this example we have chosen the Dual Theme. For each Theme, including the NoTheme, this folder contains all images used for the selected Theme. That's all, very simple. Each Theme will have a different quantity and names for the images, depending on the Theme chosen.

Also in this folder is the .png file " assets.png" that the Theme images were created from. You can open this png file in Fireworks and change the color of the Themes images etc..

eZee Gallery Theme Assets

The "Do Not Touch" files

The rest of the files in the "" folder should not be edited, with the exception of the "" file. All of the other files contain scripts and code that power the eZeeGallery and should not be edited.

ezeegallery assets files

[ ezeegallery.css] - The stylesheet for the selected Theme. You may change this if desired. There are basic instructions inside the css file itself on the uses and purpose of each style.
[ ezeetrans.css] - This stylesheet contains the CSS style for the full image effect.
[ captions1.js] - This javascript file contains the array of captions that are displayed for the full image. Even if no captions are used this file will exist and should be uploaded.
[ ezeescripts.js] - Thisjavascript file is linked to from your gallery page and it contains various javascript functions that power and run the gallery features.This file should not be edited in any way.
[ captions1.txt] - A memory file. It contains information that servers as the memory for your previously set captions. It is used to populate the eZeeGalleryCaptions interface after captions have been previously set.
[ doNotEdit1.txt] - A memory file. This file contains information about your Gallery. The information stored here is used for memory and is used when you open the interface to populate the options you previously selected.
[ ezeemappaths.txt] - This file contains VBScript code and is used in a SSI ( Server Side Include ) include in your gallery page. It's purpose is to provide the correct path to your image folders. This file should not be edited in any way.