Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS5, CS5.5, CS6, CC
- open the "Flexi_Lightbox_[version-no].zxp" file using Adobe Extension Manager
- restart Dreamweaver

For Dreamweaver CS4 - open the "Flexi_Lightbox_[version-no].mxp" file using Adobe Extension Manager CS4 - restart Dreamweaver

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the Insert Window in Dreamweaver. Press CTRL+F2 (Command+F2) to display the Insert Window.
If the Insert Window is displayed as Tabs below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.
If the Insert Window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow and the Extend Studio products should appear in the pop-up list.

A.3 Registration

A.3.1 How to register the extension
When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days (only skin 1 is available in trial mode).

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Insert a Flexi Lightbox into the page

We recommend that you use a Dreamweaver standard page to insert a lightbox to. The Flexi Lightbox may not be compatible with a DW grid based page. In order to insert a Flexi Lightbox into the page you need to select the HTML code where you want the lightbox to appear. This code could be a paragraph or an image or any other type of html content.
Important - Please note that you cannot add a lightbox on an anchor <a> tag.
After selecting the element, click on the "Insert Lightbox" button. The Lightbox interface will appear.

Flexi Menus 2 for Dreamweaver insert window

B.1 Flexi LightBox interface

Flexi Menus 2 for Dreamweaver insert window

B.1.a Skins

In order to add a Flexi Lightbox into the page, that page needs to be saved inside a DW site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

There are 11 skins available for insert. When you browse through skins, you'll see a preview on the left side of the interface. Easch skin has different components and style - shadow, rounded corners - that can be enabled or disabled from the right sidebar.

B.1.b New Lightbox

This option can be used if you don't already have an existing lightbox on the page.
Name
Add a name to the lightbox that you want to insert. The name should not contain spaces or special characters. The lightbox name can include only letters and numbers, with no space or other characters. The lightbox name cannot begin with a number, only with a letter.

B.1.c Combine two or more lightboxes for continuous scroll (Use existing)


Flexi Menus 2 for Dreamweaver insert window

This option helps you add a lightbox when you have more images on the page and you want to link them in the same lightbox to have continuous scroll - click here to see an example.
In order to use the lightbox with the continuous scroll you need to select an image from the page and add a single image lightbox on it.
After that, click on the other images and choose the "Use existing" option. From the dropdown selection list choose the lightbox added on the first image. Add the image source and insert it.
Now the 2 images are linked in the same lightbox. Once you click on an image, the ligtbox will display the image source that corresponds to that image. (example)

B.1.d Content

Single image
Allows you to choose one image that opens inside a lightbox. - click here to see an example. Flexi Menus 2 for Dreamweaver insert window

Multiple images
Allows you to choose more images linked to one lightbox that is related to a single HTML element - click here to see an example.
Flexi Menus 2 for Dreamweaver insert window

Page
Allows you to open a html page inside a lightbox. You need to add the page source - the link/ url of that page. (example) You can choose the dimensions of the lightbox that includes the page - click here to see an example. Flexi Menus 2 for Dreamweaver insert window

Code
You can add an embed Google map or a Youtube video or any other html element - click here to see an example. Flexi Menus 2 for Dreamweaver insert window

B.1.e Design

Here you can customize the LightBox design, enable/ disable buttons, shadow, rounded corners, set the overlay color and the overay transparency and much more.

Flexi Menus 2 for Dreamweaver insert window

Lightbox components - back/ next, close, image no
You can enable or disable the display of the lightbox components.

Effect
The available effects are: Super Scaled, 3D Rotate In (Left), 3D Rotate In (Bottom), Slide In (Left), Slide In (Bottom), 3D Flip (Horizontal), 3D Flip (Vertical), 3D Sign, Slide Fall, Fade in & Scale, Newspaper, 3D Fall, Fade In.

Effect duration (ms)
Choose the duration of the effect.

Shadow
You can enable or disable the shadow of the lightbox.

Rounded corners
You can enable or disable the rounded corners css property. The rounded corners style depends on the skin you choose.

Overlay Color
The overlay represents the darkened area behind the lightbox. You can choose the color of the overlay from the color pallete or you can insert a hex code inside the color input.

Overlay Alpha
Allows you to set the overlay transparency in percents.

Container Color
Allows you to set the color of the lightbox container.

Container Alpha
Allows you to set the transparency of the lightbox container.

Border and border color
You can add a border to the lightbox container and set a border color.

Shadow Color and alpha
Click the "More Settings" button to display the shadow settings. You can enable or disable the lightbox shadow

C. Edit Flexi LightBox

This function allows you to edit the image source, the image caption and the design of one existing lightbox.
Important - Please note that after you had insterted a lightbox into the page, its name cannot be edited. Also, you cannot change the lightbox type - for example, if you had chosen a single image lightbox, you cannot change it to multiple images or page lightbox.

Edit Flexi Lightboc for Dreamweaver

D. Delete Flexi Lightbox

The Delete option deletes the lightbox code from your page.

E. FAQ

1. Can I use the license to add lightboxes for an unlimited number of websites/ pages?
Yes. This is a single user unlimited license and this means that you can use it to build layouts for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support[at]extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install in on the new computer. Before registering, you will have have to reactivate the serial number by pressing the correspondent "Reset license" button from your account.

4. Can I use the FLexi Lightbox on a page that is based on Dreamweaver Grid?
We recommend that you use a Dreamweaver standard page to insert a lightbox to. The Flexi Lightbox may not be compatible with a DW grid based pages.