nCubed Free Image Gallery - Documentation
The nCubed.com Free Image Gallery allows you to quickly create dynamic image galleries with the application of only two server behaviors on one page. A bit of pre-planning with your image organization is involved in order to get the most out of your gallery. By following the directions here, you should be able to have your dynamic image gallery up and running in no time at all.
Requirements
You must be hosted on a server that supports ASP/VBScript and the FileSystemObject object. Any standard Windows NT or Windows 2000 server will meet this requirement. The extension is for Dreamweaver MX; all other versions are not supported.
Remember to install the extension prior to starting up Dreamweaver and attempting to use the nCubed.com Free Image Gallery.
Terms Used
The following terms will be used throughout the documentation. Note, though we use singular terms such as "Image Gallery" and "Gallery Group" throughout the documentation, their respective plural terms can be substituted as the nCubed.com Free Image Gallery supports multiple galleries on a page:
| Term | Description |
|---|---|
| Root Gallery Folder | This is the folder containing your Image Gallery. All Gallery Images and Gallery Pages must be contained within this folder. |
| Gallery Page | This is the page displaying your actual Image Gallery; all Server Behaviors will be applied to this page. This page must be reside within the Root Gallery Folder; your Gallery Group will also be contained in the same location as your Gallery Page. You may name the Gallery Page anything you want. |
| Gallery Group1 | This is a folder containing one or more image galleries. For example, a folder named "Hats" which contains different Hat image galleries. There can be more than one Gallery Group containing different types of image galleries. |
| Gallery2 | This is the folder residing within the Gallery Group folder containing a specific image gallery. This folder contains the "Thumbs" and "Full" folders where the actual images reside. For example:
|
| Thumbs3 | This is the folder containing all of the Thumbnail Images. This folder must reside within its related Gallery folder and must be named "Thumbs". |
| Full4 | This is the folder containing all of the Full Sized Images. This folder must reside within its related Gallery folder and must be named "Full". |
| Thumbnail Image | This is the small image shown in the Gallery Images table. Clicking the thumbnail image will open the Full Size Image in the Popper.asp page. |
| Full Size Image | This is the large image displayed in the Popper.asp page when its matching Thumbnail Image is clicked. |
| Popper.asp | This is the page that displays the Full Size Image when a Thumbnail Image is clicked. This page is automatically created for you. |
| 1, 2, 3, 4 Indicates the matching term with the example layout in the Gallery Description. | |
Organizing Your Images and Files
The page displaying your Image Gallery must reside at the same level as the Gallery Group you want to display. In our example, default.asp will be displaying all of our images, while the folder Hats is the Gallery Group we want to display.
In order for the Gallery Page to properly find your images, each image must have a matching Thumbnail and Full Size Image in the appropriate folders. Each Gallery (Antique_Time, Basball_Caps, Berets, etc...) has two subfolders, one named Full which contains the Full Sized Images, and the other named Thumbs which contains the Thumbnail Sized Images. The Full Size and Thumbnail Images must have the same name, otherwise they will not be displayed on the page.
Naming Your Images and Folders
In order to give your users useful captions and names, some characters in folder and image names are automatically replaced. Underscores ("_") are replaced with spaces, hyphens ("-") are replaced with ampersands (" & ") and capitalization is maintained.
If you preface a Gallery Group folder or an individual Gallery folder with an underscore, the Gallery Group and/or Gallery will not be displayed in the Gallery Navigation. This allows you to quickly disable galleries that you don't want to display. Prefacing an image with an underscore will also disable that particular image; you only need to preface the thumbnail or full sized image with an underscore to disable both of them. However, if you preface both images, the script will still ignore them until you remove the underscores.
The script is smart enough that if it does not find matching thumbnail and full sized images, then neither will be displayed.
| Original Name | Displayed Name | Element Type |
|---|---|---|
| Antique_Time | Antique Time | Folder |
| Baseball-Golf_Hats | Baseball & Golf Hats | Folder |
| M-Ms_Taste_Great | M & Ms Taste Great | Folder |
| _Antique_Time | (Not Displayed) | Folder |
| Red-Blue_Sripped.jpg | Red & Blue Stripped | Image |
| Green_Eggs-Ham.jpg | Green Eggs & Ham | Image |
| nCubed.com.gif | nCubed.com | Image |
| _Red-Blue_Sripped.jpg | (Not Displayed) | Image |
Applying the Behaviors
Prior to applying any server behaviors you must save your page.
The Image Gallery extension adds a new flyout menu to the Server Behaviors panel (Window > Server Behaviors > nCubed), and 4 new server behaviors:
Gallery Images
The Gallery Images server behavior must be applied prior to using any of the other Server Behaviors. The Gallery Images Server Behavior should be applied where you want the actual gallery images to be displayed. Because the galleries are displayed inside a table, ensure that your cursor is within a tag that allows tables such as a <div>, <td> or not within a tag at all; a <p> tag can not contain a table.
The Gallery Images server behavior is allowed inside the following tags: blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td and th.
To apply the server behavior, place your cursor where you want the Gallery Images Table to be placed and then click the plus (+) button in the Server Behaviors panel and choose nCubed > Image Gallery > Free > Gallery Images. The Gallery Images dialog only takes one argument: The number of columns you want to display. The default is 3, but you can set the value to anything from 1 to 99. When you click the "OK" button, please be patient as the script may take a few seconds to process everything.
Once the Gallery Images Server Behavior has been applied, several things will have been added to your page:
- The required ASP code above the <html> tag
- Gallery Specific CSS styles (if selected)
- Gallery Specific JavaScript
Additionally, a file named Popper.asp will be added to the Root Gallery Folder. This file displays the popup images for your gallery. If there is already a Popper.asp file in the same folder and it is different than the default popper.asp file, you'll be prompted whether you want to overwrite the file or not.
You will see a rough representation of what your gallery will look like as soon as the Gallery Images Server Behavior has been applied. CSS styles will be displayed, but the behavior will always show 3 columns regardless of your server behavior settings. Not to worry, the proper number of columns will be displayed on the live page.
Gallery Navigation
After you've added the Gallery Images Server Behavior, you need to add the necessary navigation to display the images. Simply place your cursor where you want the gallery navigation displayed, click the plus (+) button in the Server Behaviors panel and choose nCubed > Image Gallery > Free > Gallery Navigation. The Gallery Navigation dialog will be displayed:
The only thing you have to do is click the browse icon to choose your Gallery Group's folder. You may only choose a folder from the directory that's first displayed since the Gallery Group folder has to be at the same folder level as the Gallery Page.
If you try to choose a folder other than those first presented to you, you'll receive the following error:
The folder name you selected does not exist at the same
level as the current document.
You may only select from the folders that are first presented to you
when the Choose Gallery Folder dialog appears.
You may add as many Gallery Navigation server behaviors as you want. In other words, you can display as many Gallery Groups on a page as needed. This is helpful whenever you need to group different types of galleries on the same page.
After the Gallery Images server behavior has been applied, you'll see an approximation of the navigation display in the Dreamweaver document.
Show If Gallery and Show If No Gallery
The two Show If server behaviors allow you to conditionally show or hide an area on the page depending on whether a link has been clicked in the Gallery Navigation. This is similar to the built in Dreamweaver Show Region Conditional Statements.
Show If Gallery: This server behavior will display a region on the page if a gallery link has been clicked.
Show If No Gallery: This server behavior will display a region on the page if no gallery has been chosen. This is usually the introduction text to the page the user will see before he selects a gallery to view.
To apply the server behaviors, simply highlight the region you want to "Show If" and click the plus (+) button in the Server Behaviors panel: nCubed > Image Gallery > Free > Show If Gallery or Show If No Gallery.
There is no dialog for these two server behaviors.
Gallery Specific CSS
When you apply the Gallery Images Server Behavior you have the option of adding Gallery Specific CSS to your page. You can choose to embed these styles directly into the current document; you can then cut/paste the styles into an external CSS file. If used, the styles will be added to the first <style> block on your page. If no <style> blocks are available, then a new style block will be added.
We recommend that you use the Gallery Specific CSS to allow you complete control over the <table> and image layout of the Thumbnails. Whether you leave the CSS embedded in the page or cut/paste it into an external style sheet is up to you.
| CSS | Description |
|---|---|
| #n3-galleryTable { border-collapse: collapse; border: 1px solid black; } |
This style adds a 1px solid black border around the table. The ID is assigned to the actual <table> tag of the gallery thumbnail images, i.e., <table id="n3-galleryTable"> . |
| #n3-galleryTable td { padding: 5px; border: 1px solid black; text-align:center; vertical-align: bottom; } |
This style adds a 1px solid black border around each table cell, adds padding to the cells, and aligns the images to the center and the bottom of the table cell. |
| #n3-galleryTable a img { border: 0px; } |
This style prevents borders from being added to images within links. |
| .n3-Error { color: red; border: 1px solid black; background-color: transparent; padding: 5px; } |
This style is applied to any error messages generated by the script. |