eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo

The NoThemes "Standard" gallery 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

To build a standard gallery with the ezeeGallery you can use the NoTheme option. This tutorial will show you how to create a gallery similiar to the demo version of the standard gallery.

The nice thing about the eZeeGallery is that everything in your gallery will appear on one single page. There is no reloading, refreshing, or switching pages to view the additional thumbnail groups. You can place as many thumbnails in a group as you like and the additional groups will be accessible from text links.

You can style your gallery any way you like by adding background images, extra css styles and colors etc.. or you may just want to keep it simple. Whatever it is you are after you are limited only by your imagination and the bare bones gallery will be a snap.

The Gallery Page

We will start with a new blank page with no content. The first thing you will need to do is create a page to use as your gallery. Save this page anywhere in your defined site and name it whatever you wish.

Version 1

This page must however be an ASP document. To make it an ASP document simply save it with an .asp extension.

Example: [ mygallery.asp ] or [ gallery.asp ].

Version 2

This page can be a normal HTML document. You also may make it an ASP,PHP,CFM or other type as well if you wish.

Example: [ mygallery.htm ] or [ gallery.htm ].

As long as it has an .asp extension it will function properly.

Your images

Before you can start creating your gallery page you must first have your large full size images prepared and saved, or exported, into a folder in your site. The location of the images folder is not important as long as it does reside inside of the same defined site as your gallery page. When your images are completed and inside of a folder we can continue to insert the gallery components into the gallery page.

Inserting your gallery

With your images in place and the new gallery page saved and open in Dreamweaver you can now launch the interface.

Selecting the NoTheme option

Within the interface the first thing we will do is select the NoTheme option from the Themes List.

Theme Selection

Full Image as Popup

We are using the Popup feature for the full size image so we will have only thumbnails displayed in the actual gallery page.

Mask

We will also be using the Mask feature that will provide the full image a clean background when displayed.

Selecting the images folder

The next thing we will do is browse to the folder containing the full size images. For this tutorial we are using only one folder however you could create an entire album of image folders if you wish.

Full Image Folders

Note: If you are using multiple folders, the link to each of the folders that the user would click will refresh the page to access the additional image folders. For information on how to link to your gallery page, or multiple galleries refer to page 3 of the standard tutorial.

Tip: Depending on how your site is designed, if you are using multiple image folders you may want to create a separate page for the links to each folder of images. You can create a separate "album" page with a photo and description of each gallery in your album and apply the links to either the images or text links from that page.

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

The Thumbnail settings

In our demo we have 40 images. We will separate these 40 images into 3 groups.The first 2 groups group will have 3 rows of 5 thumbnails. 15 thumbnails per page. The last group will display the remaining thumbnails which will be 2 rows of 5, or 10 thumbnails.

So, in the interface we will set the Thumbs Displayes to 5 and the Thumb Rows to 3. Three rows of five images = 15 images per page. The eZeeGallery will compensate for the missing row in the last group and only display the 2 rows even though the Thumb Rows setting is set to 3.

We will also set the size of the thumbnails fairly large at a width of 70 and a height of 40.

Thumbnail Properties

The Effect

We have selected the Random Dissolve effect for this tutorial. You can choose whichever one you wish or opt to not use an effect at all.

Preload Full Images

Check the "Preload Full Images" checkbox. This allows the full size images to begin preloading when your gallery page loads. This allows for the full size images to appear immediately when clicked. The preloading process is depenent on the connection of the viewer and the size of your full size images as to how quickly they will all load. The gallery may be used while the preload is is process.

Insert the code

Click the OK button in the eZeeGallery Interface. All of the relevant files will be created and copied into your "" folder in the root of your site. The gallery page elements will also be inserted into your gallery page. Your gallery page should look like the example below.

Version 1

Version 1 will display "Placement" images.

Gallery in Dreamweaver Design View

Version 2

Version 2 will display your actual images.

Gallery in Dreamweaver Design View

Upload your files

You can now upload the "" folder, the images folder and finally, your gallery page.

Linking to your Gallery

At this point in the tutorial you should have all of your files created and placed into your defined site, and uploaded to your server. Now we will discuss how you will link to the Gallery.

You can link to your gallery from text or images and it is very simple...

Version 1

The path to the gallery page is quite long as it contains query information needed by the gallery files. You do not need to know the path or the items needed in the query string to be able to link to your gallery. The eZeeGalleryLinks extension that will do this for you.

Version 2

If only one folder is defined for the gallery you can simply link to the gallery.htm page. If you are using more than one folder of images you will need to add a little query to the end of the links to tell the Gallery which folder is to be displayed. The entire link with the query is as follows...

Folder1: gallery.htm?gallery=1 - ( If only one folder is used the query is optional )
Folder2: gallery.htm?gallery=2
Folder3: gallery.htm?gallery=3
etc...

The eZeeGalleryLinks extension will add the link and query for you.

For this tutorial we are using only one folder of images.

You simply select the text or image, open the eZeeGallerylinks Interface, select which image folder you are linking to from the list and press the OK button. The link will be applied to the text or image.

You can link to your gallery from any page in your site.

Some Alterations

Once you have uploaded your files, you can begin to make modifications to the gallery page, if you wish.

We will explore some simple changes you can do to your gallery pages CSS file to achieve some ordinary and desireable effects.

Continue to Section 2 - Making Simple Alteration

eZeeGallery Photo Dreamweaver Extension