BloomImage Viewer Macromedia Dreamweaver Extension

Main |
Interface Operation |
Images

BloomImage Viewer

Introduction
The Interface explained
The Thumb and Bloom images
The Scroller Button images
The Scroller
Borders and Spacing
Download PDF documentation

Introduction

Welcome to the Bloom Image Viewer help documentation.

These documents contains all of the instructions needed for the use of the extension. Screenshots are provided as a visual guide to the selections and their respective actions.

Some of the items are editable from within the extension interface. These are marked in the interface with an asterisk *. All other items must and can be edited easily from within the DW design views tools.

If an option isn't editable from within the interface it will be "disabled" and not allowing a user specified entry.

The default positioning of the full size images is next to its respective thumb. There is an option to place these full size images at a user specified location. (All Blooms same Location) in the UI. You may also drag them to any spot you wish in the Dreamweaver design view.

the package contents

The following items are Included in the Bloom Image Viewer kit.

Extension and documentation

1 BloomImageViewer.mxp Dreamweaver extension.
1 Complete user guide with instructions in printable PDF format.
4 sets of scroller control buttons in editable .png format with instructions.

Tutorial Files

1 html test page.
1 css file.
7 Thumb images.
7 Bloom images.
4 Scroller control buttons in .gif format

Accessing the Interface

Access the Interface from the Commands Menu> BloomImageViewer option.

The Interface Explained

Roll over and click each option for an explanation of its use. There is a quick return to the interface screenshot next to each description below.

Options

Add Remove Buttons

These control buttons add or remove entries in the Bloom image list below. You may add or remove pairs of thumb/bloom images at any time by making your desired quantity selection and pressing the Add Script button.

The Bloom List

This area indicates how many blooms you wish to insert, remove, or currently exist on the page.

zindex:

Sets the layer z-index for all of the Blooms layers. By default all Blooms and Thumbs are set to a z-index of 1. If the scroller is used the scroller controls layer is set to 2.

Horizontal - Vertical:

Determines whether the Thumbs will be inserted horizontally or vertically onto the page. Once this is set on your first insertion you will not be able to switch between a horizontal or vertical layout within the interface itself, however you may drag the layers to anyplace you want within the Dreamweaver interface at any time.

Scroller

If this is checked all of the Thumbs will be inserted into a single container layer which is nested inside of a parent layer with the clipping preset depending on the amount of thumbs you wish to appear in the scroller window.

You may return to the interface to delete or add more thumbs and bloom images as well as change the window and speed controls.

The scroller controls layer is also inserted containing image based scroller controls or images depending on your selection. It's position is calculated automatically however you may drag it around in the Dreamweaver interface to wherever you wish. You may use your own images or the ones included.
a) Window = How many thumbs are visible in the scroller window.
b) Speed = The scrolling speed.

Thumb Setup

Pos Top / PosLeft

This is the position of the first Thumb in the collection will be inserted onto the page. The default is "0" for both which will place it at the upper left and top of the window. The rest of the thumbs positions will be placed automatically according to your choice of a horizontal or vertical presentation.

The corresponding bloom images will position next to each thumb unless otherwise specified in the Bloom Setup portion of the interface which allows you to place the blooms in a single location anywhere in the document.

You may also drag all the images to your own preferred locations at any time after insertion. If you add more images to the collection at a later time they will be placed after the last thumb in the series to where you have dragged them to.

Width / Height

This is size of the Thumbnail images. You must enter these values manually. If you do not enter a value the default of 50px will be used. Once these dimensions have been set they can not be changed in the interface.

You can change the dimensions of the thumbs in the Dreamweaver Property Inspector later if you wish. If you add more thumbs at a later time the extension will read the dimensions of the first thumb and insert the new ones to these dimensions.

Spacing

Allows for spacing between the Thumbnails. This feature is not available when the scroller or the All Blooms in Same Location is selected.

Border

Inserts a border around the Thumbnails. The color picker is to set the color of the border. Edibility of the border size and color are only available from the interface when the scroller or the All Blooms in Same Location is selected.

All Thumbs in single layer

If this option is selected all of the thumbnail images are placed in the document inside of a single container layer. This can be useful if you wish to move the entire set of thumbs around in design view by dragging them.

Another advantage of this option is that since they are all in a single layer you may make use of other DHTML scrollers which incorporate more options that you may desire. You would simply use this single layer as the nested or child layer.

Bloom Setup

All Blooms Same Location

This is an optional setting allowing for the positioning of all fullsize "Bloomed" images to a user specified location on the page. All Blooms Same Location will "self check" if values are entered here indicating they will be inserted in the same location.

The Left and Top fields are the pixel positioning for the bloom images. The default positioning is to the side of the 1st thumb image in the set. Once this choice is selected it is fully editable from within the interface. You may return to enter new values into the Top / Left fields to reposition the blooms. You may also drag them to the location of your choice within the Dreamweaver interface.

Direction

Three editable bloom directions are available from this option.

Top to Bottom - Bloom images expand from top to bottom.
Left to Right - Bloom images expand from left to right.
Both Options - Bloom images start expanding from the top left corner in both directions.

Bloom Out on

By default the extension inserts the proper code to give a reverse blooming effect when the mouse is rolled off the thumbnail. If you uncheck this option the bloom images will hide instantly instead of the blooming effect.

Note that this option doesn't apply for Netscape 4 browsers as the bloom effect isn't supported in this early browser. It degrades gracefully for this set of browsers by showing and hiding the bloom images when the thumb images are moused over and out.

URL fields

There are 2 URL fields available in the interface. One is used to browse to the 1st thumbnail in the collection and the other is for the 1st bloom that will be used.

When returning to the Bloom interface the image Browse To fields will be disabled. This is because once the images have been selected the extension will "remember" where they are and properly insert the rest of the following images provided they follow the correct naming convention as described in the image naming section. It is not possible to change the path to the images once the first set has been inserted.

Page 2