Lightshow Magic: by Pvii

Lightshow Magic
By PVII
Make your pages come to life

Lightshow Magic 2
LIGHTSHOW MAGIC
By PVII
Lightshow Magic is a fully automated presentational framework that works inside Dreamweaver. With it, you can
create beautifully styled slide presentations that consist of images, content, or a mix of images AND content.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII
PVII | Lightshow Magic 2

Lightshow Magic 3
TABLE OF CONTENTS
Lightshow Magic ........................................................................................................................................................... 2
Install the extension ................................................................................................................................................... 6
Work in a Defined Dreamweaver Web Site .............................................................................................................. 6
Lightshow Magic assets folder .................................................................................................................................. 6
PVII Lightshow Magic .............................................................................................................................................. 7
Overview ............................................................................................................................................................... 7
Inserting a new Lightshow..................................................................................................................................... 9
Modifying an Existing Lightshow ....................................................................................................................... 10
Adding a new Slide.............................................................................................................................................. 11
Managing the Images in the Lightshow ............................................................................................................... 11
Managing the Lightshow Options........................................................................................................................ 15
The Interface Control Buttons ............................................................................................................................. 20
PVII Lightshow Magic - Auto Fireworks Mode...................................................................................................... 20
Overview ............................................................................................................................................................. 20
Selecting the Source Images ................................................................................................................................ 21
Output Options .................................................................................................................................................... 24
PVII Lightshow Magic -Import Mode ..................................................................................................................... 27
Overview ............................................................................................................................................................. 27
Open the Lightshow Magic Import Mode interface............................................................................................. 27
Selecting the Image Source Folders..................................................................................................................... 28
Fullsize to Thumbnail Matching Search Parameters ........................................................................................... 29
Import Images ...................................................................................................................................................... 31

Lightshow Magic 4
PVII Lightshow Magic -Remove............................................................................................................................. 33
Overview ............................................................................................................................................................. 34
Open the Remove PVII Lightshow Magic interface ............................................................................................ 34
PVII Lightshow Magic -Control Behavior .............................................................................................................. 36
Overview ............................................................................................................................................................. 36
Creating a new Control Actions behavior ............................................................................................................ 36
Modifying an existing Control Actions behavior ................................................................................................ 37
The Interface ........................................................................................................................................................ 37
PVII Lightshow Magic -Control Help Box ............................................................................................................. 39
Overview ............................................................................................................................................................. 39
Creating a new Help Box Actions behavior ........................................................................................................ 39
Modifying an existing Help Box Actions behavior ............................................................................................. 39
The Interface ........................................................................................................................................................ 40
PVII Lightshow Magic -Control Table of Contents ................................................................................................ 41
Overview ............................................................................................................................................................. 41
Creating a new Table of Contents Actions behavior ........................................................................................... 41
Modifying an existing Table of Contents Actions behavior ................................................................................ 41
The Interface ........................................................................................................................................................ 42
Lightshow CSS ........................................................................................................................................................ 44
Lightshow CSS Glossary ..................................................................................................................................... 45

Lightshow Magic 5
Lightshow Magic Themes ....................................................................................................................................... 58
The Ivory Toolbar PNG: lsm01.png .................................................................................................................... 59
The Ivory Help/TOC Box PNG: p7LSM01_tocHelpbox.png ............................................................................. 60
Exporting images from Fireworks ....................................................................................................................... 61
Questions and Answers ........................................................................................................................................... 63
How do I use or manage Lightshows in different folders? .................................................................................. 63
Can I Revert back to a default Style Theme CSS file? ........................................................................................ 64
How do I set a font family for my entire Lightshow? .......................................................................................... 64
can I make my thumbnails display vertically? ..................................................................................................... 64
Can I insert a Lightshow inside an Accordion, Glide Panel, Elevator Panel or Tab Panel widget? .................... 65
Can I insert a Lightshow inside a Horizontal or Vertical Scroller widget? ......................................................... 65
My question is not listed here. Is there an answer for me somewhere? ............................................................... 65
There is a gap on the right edge of my window in IE6 where the transparent overlay does not seem to extend
the full width. What can I do?.............................................................................................................................. 65
Support and Contact info ......................................................................................................................................... 66
PVII Knowledge Base ......................................................................................................................................... 66
Newsgroup forum communities........................................................................................................................... 66
RSS News Feeds .................................................................................................................................................. 67
Before you Contact us ......................................................................................................................................... 67
Snail mail ............................................................................................................................................................. 67

Lightshow Magic 6
INSTALL THE EXTENSION
Look for the extension installer file p7_LSM_125.mxp (or higher) in the root of the zip archive you downloaded.
Double-click the file to install the extension. Dreamweaver's Extension Manager will open and you will be
prompted to complete the installation. Restart Dreamweaver once the installation is complete.
OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file
association issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.
WORK IN A DEFINED DREAMWEAVER WEB SITE
Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that
Dreamweaver knows how to link assets required by Lightshow Magic to your page. If you are new to Dreamweaver
or need to learn how to define a web site, please see this tutorial: Defining a Dreamweaver Web Site.
LIGHTSHOW MAGIC ASSETS FOLDER
When you publish your page, you need to upload the entire p7lsm folder.

Lightshow Magic 7
PVII LIGHTSHOW MAGIC
OVERVIEW
The Lightshow Magic system will insert a fully functional Lightshow into your page, at the insertion point you
select. The Lightshow system allows you to create Image slides or Content slides:
1. Image Slides:
 Automatically (using Fireworks) - Select the source images and the system will automatically create the
web optimized thumbnails and full-size images for you.
 Import Existing Images - You can quickly add existing images from another Lightshow or use images
that were processed in Photoshop, Paint Shop Pro, or other applications.
2. Content Slides:
 Content slides are actual html portions of your page that can be presented in the Lightshow. Once added to
your page the content slides can be edited directly in Dreamweaver Design View and can contain anything
you like—you have full control over the content.
Lightshows can be created that display just images, just content slides, or a mixture of both. You can set up as many
slides as you like in each Lightshow and you can add as many different Lightshows on a page as you like—styled
the same or differently.

Lightshow Magic 8
ABOUT THE LIGHTSHOW MAGIC FILES
When your Lightshow is built the system will create a folder named p7lsm in the same folder that your page is in.
The P7LSM folder contains the Lightshow Magic JavaScript file and related CSS (style sheet) file. If your
Lightshow contains image slides then the system will also create an img folder inside the P7LSM folder. The IMG
folder contains the progress bar image and images used for that particular Lightshow style theme.
The system will also create a destination folder that will contain the full-size and thumbnail images for your
Lightshow. The default name for this folder is p7lsm_img_1, but you can choose a different name and location from
within the user interface. Inside this folder the system will create a sub-folder named full-size which will contain all
of your full-size images, and a sub-folder named thumbs which will contain all of your thumbnail images.
Note: The system will always create the p7lsm folder in the same folder as your current page.
FILES TO UPLOAD WHEN PUBLISHING YOUR LIGHTSHOW
When you publish your Lightshow to the Web make sure you upload the p7lsm folder and all image folders. The
images folders are the ones that begin with p7lsm_img. Be sure to upload the /fullsize and /thumbs sub-folders.
DO NOT DEPEND ON DREAMWEAVER TO UPLOAD THEM AUTOMATICALLY.

Lightshow Magic 9
INSERTING A NEW LIGHTSHOW
-Establish the insertion point for your new Lightshow by clicking in the area of the page where you would like the
Lightshow to be created.
Note: The interface is sensitive to the insertion point. If your cursor is currently inside an existing Lightshow then the
Modify interface will open instead.
-Click the LIGHTSHOW MAGIC icon in the COMMON Section of Dreamweaver's Insert Bar or choose
Insert > Studio VII > Lightshow Magic by PVII.
The Lightshow Magic user interface will open in the Create New Lightshow mode.
You can create more than one Lightshow on your page. Add as many as you like.

Lightshow Magic 10
MODIFYING AN EXISTING LIGHTSHOW
You can modify any of the existing Lightshows on your page at any time.
-Click inside the Lightshow that you wish to modify.
-Click the LIGHTSHOW MAGIC icon in the COMMON Section of Dreamweaver's Insert Bar or choose
Modify > Studio VII > Modify Lightshow Magic by PVII
The Lightshow Magic User Interface will open in the Modify Existing Lightshow mode.
The interface is divided into two sections. The top section is where you manage the images and content slides in
your Lightshow. The bottom section allows you to set various options that control the Lightshow's appearance and
functionality.
Note: Some items in the interface will initially appear "grayed" out. These items will become enabled when you add one
or more slides, and will become enabled based on the slide type currently selected.

Lightshow Magic 11
ADDING A NEW SLIDE
To add new content slides simply click the Add Content button.
To add one or more new image slides, select the Image Build Mode and then click the Add Image(s) button.
MANAGING THE IMAGES IN THE LIGHTSHOW
DESTINATION FOLDER
The Destination Folder is where Lightshow Magic will store your processed images. Each time you create a new
Lightshow, the system will create a new folder in your defined Dreamweaver site, ending with an underscore and a
number which designates its associated Lightshow page, such as p7lsm_img_1, p7lsm_img_2, and etcetera. While
you can change the name of this folder we recommend that you let the system manage it for you.
Inside this destination folder the system will create two sub-folders:
 fullsize -Contains all of the optimized full-size Lightshow images.

 thumbs - Contains all of the thumbnail Lightshow images.
The Browse... button opens a SELECT OR CREATE A DESTINATION FOLDER dialog box that allows you to
select a different folder location or to create your own destination folder.
Note: The Destination Folder is active only when creating a new Lightshow. Once you have added images to the
Lightshow, both the Destination Folder box and the Browse button will be grayed out and locked from further change.
This is to assure that all of your Lightshow images are maintained within the same destination folder.
BUILD MODE
The system allows you to add new images to the Lightshow in two different ways:
IMPORT EXISTING IMAGES
The Import Mode allows you to quickly import existing full-size images and their corresponding thumbnails. The
system will neither optimize nor make any other changes to your images. If you do not have Fireworks installed, this
will be your only available Build option.
AUTOMATIC USING FIREWORKS
The Automatic Mode allows you to quickly select a set of raw source images and then automatically creates
optimized full-size and thumbnail images for you. This Build Mode will be unavailable if Fireworks is not installed.

Lightshow Magic 12
SLIDE LIST
The Slide List contains all of the image and/or content slides that will appear in the show. Each slide line is
numbered for easy reference. A preview of the image that is currently selected will appear to the left of the list. If a
content slide is selected the preview will be blank.
ADD CONTENT
Click the Add Content button to add a new content slide. The system will create a new content DIV which will
appear in Dreamweaver Design View, with some place holder content inside. You can edit the content directly in
Dreamweaver Design View and can use all of Dreamweaver's editing features.
ADD IMAGES(S)
Click the Add Images(s) button to add images to the show. The system will open either the IMPORT or
AUTOMATIC USING FIREWORKS interface depending on which Build Mode option is selected. The newly
added images will be inserted in the SLIDE LIST immediately after the currently selected image.
DELETE
Click the Delete button to remove the selected image or content slide from your Lightshow.
UP
The Up button will move the selected slide in the SLIDE LIST up one row. Successive clicks will keep moving the
slide up one row per click until the slide is at the top of the list.
DOWN
The Down button will move the selected slide in the SLIDE LIST down one row. Successive clicks will keep
moving the slide down one row per click until the slide is at the bottom of the list.

Lightshow Magic 13
SLIDE PROPERTIES
IMAGE FILE NAME
The Image File Name box is provided as a handy reference to allow you to view the actual file name of the image
that is currently selected in the SLIDE LIST. This box will always appear grayed out and is not editable. The box
will be blank if a content slide is currently selected.
ALT OR LINK TEXT
This text is used to provide required alt text for each slide, and, in the absence of a Caption, will also be used to
provide the text in the Caption section of the Lightshow box and also in the Table of Contents. This dual purpose
feature allows for quick show creation without requiring any data entry.
Content Slide -This serves as the text for the trigger link that corresponds to the content slide. This box cannot be
left empty and is populated by default with placeholder text: TRIGGER LINK TEXT.
Image Slide -This text is used to provide the Alt text for the corresponding thumbnail image and also for the full-
size image when not using the full-size image link option. You can enter anything you like or accept the system
default image file name. This box cannot be left empty.
CAPTION
This optional field allows you to enter more meaningful text to serve as the Caption in the Lightshow box and also
the Table of Contents box. The Caption box is not required. The Alt or Link Text box will be used if the Caption
box is empty.

Lightshow Magic 14
DESCRIPTION
The Description box allows you to supply additional text that will display underneath the full-size image or content
slide in the Lightshow. You can enter normal text or you can enter actual html markup into this box. When entering
html markup you can create paragraphs, headings, and even links, as shown in the screen capture above. Leave this
box blank if you do not wish to show any descriptive text to appear under a particular image.
FULL-SIZE IMAGE LINK
The full-size Image Link box allows you to set a hyperlink on the full-size image. When the full-size image is
clicked the system will launch the linked page. Click the Browse button to open the SELECT THE FILE TO LINK
dialog box and choose the html page that you wish to link to. The full-size Image Link functionality is optional and
is blank by default. Supplying a link in this box enables the image link for the currently selected image. No other
images are affected.
FULL-SIZE IMAGE ALT TEXT
This text is used to provide the Alt text for the full-size image when the full-size IMAGE LINK option is used. This
allows a more descriptive or specialized Alt text for the FULL-SIZE IMAGE LINK option. This box is normally
grayed out and disabled. It becomes active only after setting the FULL-SIZE IMAGE LINK box using the
BROWSE button.
IMAGE EDITING
The system allows you to quickly edit any image in the show without having to close down the interface. You can
select to edit EITHER the full-size Image or the Thumbnail Image. These buttons are disabled when a content slide
is currently selected.
EDIT...
Click the Edit button to launch your primary image editor with the current image already loaded and ready for edits.
The system will use the program that is defined as your Primary Image Editor for the image file type (.gif, .jpg, .jpeg
or .png) in Dreamweaver Preferences. The Lightshow interface remains open while you are editing the image.
Note: When using Fireworks in Edit Mode always save your changes by choosing File-Save. Never use File-Export or the
Export button in the Fireworks Image Preview window because this will result in a re-compression of your already
optimized image.

Lightshow Magic 15
OPTIMIZE...
Click the Optimize button to launch a Fireworks Optimization session for the currently selected image. If the images
have been built using the Automatic Fireworks Mode then this button should not be used since the images have
already been optimized. This feature is useful for optimizing the selected image when the Import Mode has been
used to add the image to the slide show.
RE-GEN THUMB
Click the Re-Gen Thumb button to automatically regenerate the thumbnail for the selected image in the SLIDE
LIST. This handy feature allows you to quickly produce a new thumbnail if you have made any changes to the full-
size image. The system will use the thumbnail optimization settings from your last ADD session.
RE-PROCESS
This handy feature allows you to totally re-generate both the thumbnails and full-size images using new
optimization options without affecting any settings you have made in the Slide List. The re-process operation will
launch the Fireworks Automatic Mode interface in a special Mode that will allow you to reselect your source images
(one or as many as you like), change any of the optimization settings, and then fully reprocess the thumbnails and
full-size images directly from the original source images. Once completed, the interface will close and return to the
main interface. No changes will be made to any of the settings in the main interface.
MANAGING THE LIGHTSHOW OPTIONS
The options affect the current Lightshow only. Other Lightshows on the page will not share these options—instead
they will use the options that were defined when they were created.

Lightshow Magic 16
STYLE THEME
The Lightshow Magic system comes with 6 pre-defined style themes to choose from. The system does permit you to
change style themes for an existing Lightshow so you can experiment with all 6 themes to see which one you like
best. Themes are CSS-based and the CSS rules can be edited in Dreamweaver. The THEMES section of the User
Guide describes each theme and how they may be edited.
SLIDE DELAY
The Slide Delay controls the amount of time (in seconds) that the system will pause between each slide display
when the Lightshow is in auto-play mode. Choose from 2 to 25 seconds.
ANIMATION
The Lightshow Magic system allows you to select from one of four different slide animation effects:
 0-None -Choose this option if you do not wish to have any animated effects when the slide displays.
 1-Fade -The system will provide a pleasant fade effect when transitioning from one slide to the next.
 2 -Glide -The system will provide a gliding effect when first opening and when transitioning to slides of
different size.
 3 -Glide with Fade -The system will run the Glide option and then finish with a Fade (default).
START FROM EXISTING BOX SIZE
This option controls how the system will play the Glide animation when transitioning, and is only effective when the
3-Glide or 4-Glide with Fade options is selected. With this box unchecked the animation will start from a small
narrow bar and grow to the final size of the rendered slide. With this box checked the system will use the size of the
current slide as the starting point for the Glide animation—growing or shrinking to the size of the new slide.
SHOW TOOLBAR
The Toolbar at the top of the Lightshow presentation box can be hidden. Uncheck this box the hide the toolbar;
check the box to display the toolbar.
Note: When only one slide is used the system will automatically hide all of the toolbar buttons except the Close button.

Lightshow Magic 17
POSITION
You can control the position of the Lightshow display box:
 Auto Center - This is the default option and will automatically center the Lightshow display box in the
center of the browser window both horizontally and vertically.
 Fixed Top Position -This allows you specify a top position for the Lightshow display box. Enter the
position amount in the Fixed Top box. The Lightshow display box top edge will always start at this point
from the top of the browser window and allows you to coordinate the Lightshow box position with your
page content position. The Lightshow box will still automatically center the Lightshow display box
horizontally.
 Fixed Left Position -This allows you specify a left position for the Lightshow display box. Enter the
position amount in the Fixed Left box. The Lightshow display box left edge will always start at this point
from the left edge of the browser window and allows you to coordinate the Lightshow box position with
your page content position. The Lightshow box will still automatically center the Lightshow display box
vertically.
 Fixed Left and Top -This allows you to set a fixed top and left position for the Lightshow display box.
The box will not auto-center and will always appear at the positions defined by the Fixed Top and Fixed
Left box values.
DESCRIPTION IN POPUP BOX
The Description content is normally displayed underneath the slide content. Check this box if you want the
Description to display in a Popup box.
KEEP PERSISTENT
This option is only active if the Description in Popup Box is active. Check this box if you wish to have the
Description Popup Box always display, even on slides that do not have a Description defined. When checked, the
popup box will not animate—it will simply change size to accommodate each description.

Lightshow Magic 18
PLAY MODE
The Play Mode defines the action that the Lightshow system will take when it reaches the end of the current
Lightshow.
 Stop at End of Show: When the last Slide is reached, the Next button (or equivalent keyboard shortcut) is
disabled. When the first Slide is reached, the Previous button (or key) is disabled. This option runs in both
Auto Play and Normal modes.
 Loop Back to First Slide: The Lightshow does not stop at the last slide—it loops to the first slide.
Available in Auto Play and Normal modes. In Normal mode, looping is in either direction.
 Close at End of Show: Auto Play mode only. If this option is selected, the last slide will show for the
duration of the Slide Delay setting and then the Lightshow will automatically close.
 Play All Shows on Page: Works in both Auto Play and Normal modes. If your current Lightshow is set
with this option, the Next button (or key) for the last Slide will open the next Lightshow on your page and
the Previous button (or key) for the first Slide will open the previous Lightshow on your page. This cycle
will continue for all Lightshows on your page, stopping at the end of any Lightshow that is not set to
PLAY ALL SHOWS ON PAGE. Each Lightshow will retain its specific options and style settings.
AUTO PLAY ON OPEN
Check this box if you want to have the Lightshow shift into Play mode whenever the Lightshow is opened. The
Lightshow will then auto-play based on its options, starting with the thumbnail or content slide trigger that was
clicked.
PAUSE ON ACTION
The Lightshow is set to shift into Pause mode whenever one of the toolbar buttons or keyboard buttons is clicked
(except the Table of Contents and Help Box). Uncheck this box if you wish to continue in Play mode whenever a
toolbar or keyboard action is taken.
CONTENT BOX WIDTH
This defines the width of the Lightshow display box when content slides are showing. You can assign any width you
like although there is a minimum width that is assigned to assure that the Toolbar buttons will all display properly (if
the toolbar is displaying). The default width is 500px, and the value cannot be left blank and must be greater than
zero.

Lightshow Magic 19
FIXED TOP
This works in conjunction with the Position option. Enter the amount (in pixels) you wish the Lightshow display
box to start from the top edge of the browser window. This box is only enabled when the FIXED TOP or FIXED
LEFT AND TOP Position options are selected.
FIXED LEFT
This works in conjunction with the Position option. Enter the amount (in pixels) you wish the Lightshow display
box to start from the left edge of the browser window. This box is only enabled when the FIXED LEFT or FIXED
LEFT AND TOP Position options are selected.
SHOW CAPTION
When this box is checked the system will display the Caption underneath the image or content slide. If there is no
Caption text defined for the current slide the system will use the Alt text of the image or the Link Text of the content
slide. Uncheck this box if you do not want to display the caption.
SHOW TOC ON OPEN
Check this box if you wish to have the Lightshow system automatically open and display the Table of Contents
whenever the Lightshow is started.
SHOW HELP ON OPEN
Check this box if you wish to have the Lightshow system automatically open and display the Help box whenever the
Lightshow is started.
SHOW SLIDE COUNTER
By default the system will automatically display a slide counter beneath the image or content slide: SLIDE X OF
XX. Uncheck this box to hide the slide counter.
PRELOAD NEXT IMAGE
This feature allows the system to automatically preload the next full-size image, in the background, while the slide
show is running. This is completely transparent to the user and assures that in most situations the next image is ready
for display when the Lightshow is ready to switch to the next slide.

Lightshow Magic 20
THUMBNAIL ROLLOVER
The Lightshow system will automatically display a larger thumbnail atop the smaller thumbnail whenever the user
mouses over the smaller one. Uncheck this box if you do not want this action. This option is only in effect for image
slides.
THE INTERFACE CONTROL BUTTONS
OK
When you are done adding images and setting your desired options click the OK button to build the Lightshow. The
system will verify your selections and alert you to any problems that need your attention. If there are no problems
the interface will close and the Lightshow will be added to your page. You can preview in a browser to operate the
Lightshow and check its functionality. To make further changes, you simply open the Lightshow Magic interface
and begin your modifications.
CANCEL
Click the Cancel button to completely abort the current Lightshow Magic operation. This will close the interface and
no changes will be made to your page.
HELP
Click the Help button to open the associated Help File in your browser. This page can remain open for easy
reference while you continue working with the Lightshow Magic interfaces.
PVII LIGHTSHOW MAGIC - AUTO FIREWORKS MODE
OVERVIEW
Web-ready images are automatically produced from your original images, which can be located on any drive
connected to your computer - including drives mounted by your digital camera. Lightshow Magic handles image
processing automatically, using the Fireworks graphics engine.
While Lightshow Magic makes quick work of existing images you've processed yourself in Photoshop, PSP, or any
other image editor, Fireworks users benefit from total and seamless interoperability. Simply point Lightshow Magic
at a folder of images anywhere on your system —or to your Digital Camera's mounted drive—and sit back and relax
as your images are automatically scaled and optimized to your specifications. Lightshow Magic will create your full-
size AND your thumbnail images automatically. The size of your originals does not matter. Once your images are
processed, and your Lightshow built, you can use the Edit buttons in the Lightshow Magic interface, at any time, to
load your images into Fireworks for further processing.

Lightshow Magic 21
OPEN THE LIGHTSHOW MAGIC AUTOMATIC MODE INTERFACE
The Automatic Fireworks Mode Image Selection interface will open whenever you click on the Add button with the
AUTOMATIC USING FIREWORKS radio button selected in the main Lightshow Magic interface.
The interface is divided in two sections. The top section is where you select the image source folder and the images
to be placed into the Lightshow. The bottom section allows you to set the various thumbnail and full-size image
optimization options.
MODE
The Mode text displays the operating mode of the interface, usually NORMAL. It will display RE-PROCESS
IMAGES ONLY if the interface was launched using the RE-PROCESS button in the main Lightshow Magic
interface.
SELECTING THE SOURCE IMAGES

Lightshow Magic 22
SOURCE IMAGE FOLDER
Use the BROWSE... button to navigate to the location of the source images for your Lightshow.
-Click on the folder name that contains your source images
-Click the OPEN button to choose that folder.
Note: This standard Dreamweaver Browse for Folder dialog box will only display the folder names, the images contained
inside will not show at this stage. This is a limitation of the types of dialog boxes Dreamweaver makes available.
-Click the SELECT button to close the dialog box.
You can navigate to any folder on your system, including any mounted or shared drives, or your digital camera.
When the dialog box closes, the interface will list all of the supported images that are contained in that folder.
SELECT ALL
Click the SELECT ALL button to select (highlight) all of the images that appear in the SELECT IMAGES TO
ADD TO THE LIGHTSHOW listing.

Lightshow Magic 23
DE-SELECT ALL
Click the DE-SELECT ALL button and all images that were selected in the SELECT IMAGES TO ADD TO
THE LIGHTSHOW listing will no longer be selected.
SELECT IMAGES TO ADD TO THE LIGHTSHOW
This box lists all of the images that were found in the SOURCE IMAGE FOLDER. You select the images that you
wish to add to the Lightshow by simply clicking on the image to highlight its row. A preview of the image is
presented in the panel to the right of this box. Only the images that are selected (highlighted) will be added to the
Lightshow.
To select multiple, consecutive, images: Select the first image then hold down the Shift key and click on the last
image that you want to select. All of the images between your first selection and last selection will be highlighted.
To select multiple, non-consecutive images: Select an image, then hold the CTRL key (for Apple use the
Command key) down while clicking on the other images you wish to select. Each image that you clicked on will be
highlighted.
IMAGE TYPE
The IMAGE TYPE selection allows you to filter the source images by image type. The default ALL SUPPORTED
TYPES accepts all of the supported image types. If you wish to filter the image listing to show only the .jpg images
in your source folder then select JPG in the drop down list. Supported file types for the source images are: GIF,
JPG,JPEG,JPE,PNG,BMP,TIF,TIFF,PSD,PIC,PCT,and PICT.
IGNORE FILES WITH LEADING UNDERSCORE
With this box checked (default) the system will bypass any image whose filename starts with the underscore (_)
character. This provides a convenient way to prevent these images from appearing in the listing.
PROMPT FOR FILE OVERWRITE
With this box checked (default) the system will show a confirmation prompt if the optimized image or thumbnail is
about to over-write an existing image.
Tip: Be sure to un-check this box if you are in the RE-PROCESS IMAGES ONLY mode in order to prevent an
overwrite warning box from appearing for each image

Lightshow Magic 24
OUTPUT OPTIONS
THUMBNAIL FORMAT
Choose the desired image format for the thumbnail image:
 GIF webSnap 128

 GIF webSnap 256
 JPEG -better quality (default)
 JPEG -smaller file
In most case the default JPEG -BETTER QUALITY format is the best choice for photographic quality images
while GIF webSnap 256 or 128 is appropriate for vector images with clearly defined colors.
THUMBNAIL SIZE
Enter the desired size, in pixels, for the thumbnails. The size you enter will be used to constrain the height or width
of the thumbnail. The aspect ratio of the original image will be preserved—there will never be any image stretching
or distorting. The Lightshow system is designed to accommodate different size thumbnails and different thumbnail
orientations seamlessly. The default is 100px, and is a perfect size for display in the thumbnail rollover preview.
Note: The thumbnails that are displayed on your page are sized according to the width and height settings contained in the
style sheet. The actual size of the thumbnail will display in the thumbnail rollover, if the Thumbnail Rollover option box is
checked in the main interface.

Lightshow Magic 25
FULL SIZE FORMAT
Choose the desired image format for the full-size image:
 GIF webSnap 128

 GIF webSnap 256
 JPEG -better quality (default)
 JPEG -smaller file
In most case the default JPEG -BETTER QUALITY format is the best choice for full-size images.
FULL SIZE IMAGE OPTIMIZATION OPTIONS
USE ORIGINAL IMAGE -NO OPTIMIZATION
Choose this option if you do not want the system to process your full-size image in any way. This option will copy
your full-size image into the Lightshow, while creating a corresponding optimized thumbnail.
SCALE TO FIT WITHIN
The SCALE TO FIT WITHIN option allows you to select the maximum width and height that you want for your
full-size images. This acts to constrain the image height or width (whichever is largest) to the value you set, without
stretching the image or affecting its aspect ratio in any way. Images that are already smaller than the dimensions
specified will not undergo any scaling or change in size.
Note: If you set SCALE TO FIT WITHIN to 400 x 400, a source image that is 640 x 480 will wind up being optimized
and scaled to a new dimension of 400 x 300. If the source image was 480 x 640, then the new size will be 300 x 400. In
other words, aspect ratios are always preserved.
SCALE IMAGE
The SCALE IMAGE option will reduce the full-size image by a percentage of the source image size. This will act
on all selected images, regardless of size. For example, entering 80 into the box will adjust full-size image
dimensions to be 80% of the corresponding source image.

Lightshow Magic 26
OK
When you are done selecting the images you wish to add to the Lightshow, click the OK button to build the
Lightshow. The system will verify your selections and open Fireworks to begin the optimization and import process.
The system will alert you to any problems that need your attention. If there are no problems the full-size images and
thumbnails will be imported into the Lightshow. The interface will close and return you to the main Lightshow
interface, which will reflect the additional images in the IMAGES LIST.
CANCEL
HELP

Lightshow Magic 27
PVII LIGHTSHOW MAGIC -IMPORT MODE
OVERVIEW
If you do not have Fireworks installed, or if you want to use images and thumbnails that are already prepared, the
IMPORT MODE interface is the mode you should use. You can use any image editor, such as Photoshop or Paint
Shop Pro, to process your thumbnails and full-size images. Once your images have been prepared, use Lightshow
Magic's Import interface to locate your full-size images and their associated thumbnails. Once you have imported
your images, the edit controls in the main Lightshow Magic interface will allow you to load your images into your
primary image editor for further processing if necessary.
The Import system works by looking at each full-size image, in the folder you specify, and then finding a matching
thumbnail image in the thumbnail folder you specify. The matching system can use a simple one-to-one file name
match, or it can use search parameters to define the matching thumbnail file name. In addition to automated
matching, the system allows you to manually select the thumbnail for any full-size image.
OPEN THE LIGHTSHOW MAGIC IMPORT MODE INTERFACE
The Import Mode Image Selection interface will open whenever you click on the Add Images(s) button with the
IMPORT EXISTING IMAGES radio button selected in the main Lightshow Magic interface.

Lightshow Magic 28
SELECTING THE IMAGE SOURCE FOLDERS
You can navigate to any folder on your system, including any mounted or shared drives. Be sure that you are
selecting optimized images—THE SYSTEM WILL NOT PERFORM ANY OPTIMIZATION OR RE-SIZING.
Note: This standard Dreamweaver BROWSE FOR FOLDER dialog box will only display the folder names—not the
images inside the folders. This is a limitation of Dreamweaver. You will see the images once you are returned to the main
Lightshow Magic interface.
FULL SIZE IMAGE SOURCE FOLDER
Use the Browse... button to navigate to the location of the full-size images for your Lightshow.
 -Click on the folder name that contains your source images.

 -Click the Open button to choose that folder.
 -Click the Select button to close the dialog box.

Lightshow Magic 29
THUMBNAIL IMAGE SOURCE FOLDER
Use the Browse... button to navigate to the location of the thumbnail images for your Lightshow.
 -Click on the folder name that contains your source images.

 -Click the Open button to choose that folder.
 -Click the Select button to close the dialog box.
FULLSIZE TO THUMBNAIL MATCHING SEARCH PARAMETERS
The system will look at each image contained in the FULL SIZE IMAGE SOURCE FOLDER and attempt to find
a thumbnail image whose file name matches the full-size image file name, with any additional matching parameters
applied, in the THUMBNAIL IMAGE SOURCE FOLDER.
If no matching parameters are specified (all parameter boxes are empty) the system will match full-size and
thumbnail images only when their file names are EXACTLY the same.

Lightshow Magic 30
USE PREFIX
If the existing thumbnail images are named by using the full-size image file name and adding some text at the
beginning of the name, then use this matching option. For example, if the full-size image file name is
ʺMyImage.jpgʺ, and the thumbnail image is named ʺtmbMyImage.jpgʺ, then enter tmb into the USE PREFIX box.
The system will look at each full-size image file name and then look in the THUMBNAIL IMAGE SOURCE
FOLDER for matching names prefaced with tmb.
USE SUFFIX
If the existing thumbnail images are named by using the full-size image file name and adding some text to the end of
the name, then use this matching option. For example, if the full-size image file name is ʺMyImage.jpgʺ, and the
thumbnail image is named ʺMyImage_tmb.jpgʺ, then enter _tmb into the USE SUFFIX box. The system will look
at each full-size image file name and then look in the THUMBNAIL IMAGE SOURCE FOLDER for matching
names that end with _tmb.
MATCH WITH
If the existing images use a naming convention that is applied to both the full-size image and the thumbnail image
(like our Image Gallery Magic, Slide Show Magic and Lightshow Magic systems) then use this matching option. For
example, if the full-size image file name is ʺMyImage_fs.jpgʺ, and the corresponding thumbnail image file name is
ʺMyImage_tmb.jpgʺ, then enter _fs into the MATCH box and enter _tmb into the WITH box. The system will take
each full-size image file name, replace the _fs with _tmb, and then look for the resulting file name in the
THUMBNAIL IMAGE SOURCE FOLDER.

Lightshow Magic 31
IMPORT IMAGES
When you are done entering the file name matching parameters click the Import button to start the matching
process. The system will display each full-size image file name that it finds in the FULL SIZE IMAGE SOURCE
FOLDER in the Full Size Images column. A corresponding thumbnail image file name will be displayed in the
listing.
All full-size images that have a matching thumbnail image will be added to the Lightshow when you click the OK
button. Images that do not have a matching thumbnail image will be ignored. In the above screen capture,
ICE0404_FS.JPG and ICE07_FS.JPG did not have a matching thumbnail so there is no entry in the second
column.
You can repeat the Import process as many times as you like during the same session. Just make your desired
changes to the Matching parameters and click the Import button. The listing will be rebuilt using the current
matching parameters.

Lightshow Magic 32
ASSIGN THUMBNAIL IMAGE
There may be occasions when the file names are such that you cannot use the matching system, or you just want to
quickly assign a thumbnail image that is located in a different folder. In this event, select the full-size image and
click the ASSIGN THUMBNAIL IMAGE button.
-Navigate to the folder that contains the thumbnail image, select the image and click OK. The dialog box will close
and the interface will now display the selected thumbnail in the right half of the panel, on the same line as its
corresponding full-size image.

Lightshow Magic 33
DELETE
You can remove any image from the listing at any time. Click the Delete button and the full-size image, and its
corresponding thumbnail image (if any) is removed from the listing. There is no affect on the actual images.
Note: It is not necessary to delete any images that do not have a corresponding thumbnail image since these images will
never be added to the Lightshow.
PROMPT FOR FILE OVERWRITES
With this box checked (default) the system will show a confirmation prompt if the optimized image or thumbnail is
about to overwrite an existing image.
OK
When you are done assigning the thumbnail for each image that you wish to add to the Lightshow, click the OK
button to build the Lightshow for these images. The system will verify your selections and alert you to any problems
that need your attention. If there are no problems the full-size images and corresponding thumbnails will be
imported into the Lightshow. The original images will remain unaffected. The interface will close and return you to
the main Lightshow interface, which will reflect the additional images in the SLIDE LIST.
CANCEL
HELP
PVII LIGHTSHOW MAGIC -REMOVE

Lightshow Magic 34
OVERVIEW
The Lightshow Magic system includes a Remove feature that allows you to quickly remove an existing Lightshow
from your page. This feature allows for easy removal when simply prototyping pages or when a total redesign is
necessary.
OPEN THE REMOVE PVII LIGHTSHOW MAGIC INTERFACE
-Open a page that contains one or more Lightshows.
-Choose Commands > Studio VII > Remove Lightshow Magic... to open the Remove interface.
The Remove option will be unavailable (grayed out) in the menu if there are no Lightshows on the page.

Lightshow Magic 35
The Remove Lightshow Magic interface will open.
The interface will provide a listing of all of the Lightshows on your page. The list will display the ID of each
Lightshow.
-Select the Lightshow that you wish to remove from the listing. You can only remove one Lightshow at a time.
Tip: If you are unsure about which Lightshow relates to which ID, click the Cancel button and switch to Code View. In
Code View, locate all IDs that begin with p7LSM. The opening DIV tag for a Lightshow looks like this: <div
id="p7LSM_1" class="p7LSM03">
WHAT WILL BE REMOVED
The system will completely remove the html markup for the selected Lightshow from your page. If there are other
Lightshows on the page they will not be affected. The system will also remove the link to the Lightshow CSS file if
NO OTHER LIGHTSHOW on the page is using the same style theme.
If there are no remaining Lightshows on your page, the system will also remove the link to the Lightshow
JavaScript file.
WHAT WILL NOT BE REMOVED
The system will not remove the p7lsm folder, which contains the Lightshow-related assets (images, JavaScript file,
and CSS files). This ensures that you will not lose any assets you may have modified and any other pages that
depend on those modified assets will continue to look and behave as expected.
The system will not remove any Lightshow Destination folders and their related FULLSIZE and THUMBS sub-
folders. These can be used to quickly re-build a new Lightshow using the Import function at any time.

Lightshow Magic 36
REMOVE
Click the Remove button. The selected Lightshow will be removed from the page
CANCEL
Click the Cancel button to completely abort the current Remove Lightshow Magic operation. This will close the
interface and no changes will be made to your page.
HELP
reference while you continue working with the Lightshow Magic interface.
PVII LIGHTSHOW MAGIC -CONTROL BEHAVIOR
OVERVIEW
The Lightshow Magic system includes a set of Behaviors that can be used to trigger actions within the Lightshow.
These behaviors can be applied to any link on your page, including text or image links.
The included Lightshow Magic Behaviors:
1. Lightshow Control Actions

2. Control Table of Contents
3. Control Help Box
The Control Behavior is designed to allow you to control the operation of the Lightshow from links external to the
Lightshow. The actions emulate a user click on one of the buttons in the Lightshow Toolbar.
CREATING A NEW CONTROL ACTIONS BEHAVIOR
1. Select (click) an element to act as the behavior trigger, such as a text link or image.
2. Click the plus sign (+) on the Behaviors panel.
3. Choose Studio VII > Lightshow Magic > Control Actions to open the interface.
4. Select the action you wish to trigger.
5. Click OK to apply the behavior.

Lightshow Magic 37
MODIFYING AN EXISTING CONTROL ACTIONS BEHAVIOR
1. Select the element that contains an existing Lightshow Magic behavior.

2. Double-click the Lightshow Magic- Control Actions behavior in the Behaviors panel to open the
interface.
3. Select the action that you wish to trigger.
4. Click OK to apply the revised behavior.
THE INTERFACE
The Lightshow Magic -Control Actions interface allows you to select one of eight Lightshow actions.
LIGHTSHOW
The interface allows you to choose the specific Lightshow component to which the action will be applied, or to any
Lightshow that is active. Select the Lightshow to which you want the action applied or select ANY OPEN SHOW
to affect the Lightshow which is currently open.
The Lightshows are listed by their ID, which follow a unique naming convention, beginning with "p7LSM"
followed by the Lightshow component number. For example, "p7LSM_1" would be the first Lightshow you inserted
on the page, while "p7LSM_2" would be the second Lightshow you inserted on the page.

Lightshow Magic 38
ACTION
Select one of the eight Control Actions for the Lightshow.
SLIDE NUMBER
The Slide Number box is grayed out (disabled) unless you choose the Go to Slide Number... action. Enter the
number of the slide that you want the Lightshow to show.
OK
When you have made your selection, click the OK button to apply the behavior. By default the behavior will be
applied to the "onClick" event of the text link or image. You can change the event by selecting the desired event in
the Behaviors panel.
CANCEL
Click the Cancel button to completely abort the current operation. This will close the interface and no changes will
be made to your page.
HELP

Lightshow Magic 39
PVII LIGHTSHOW MAGIC -CONTROL HELP BOX
OVERVIEW
The Control Help Box Behavior is designed to allow you to Hide or Show the Help Box from links external to the
Lightshow. The actions emulate a user click on the Help Box button in the Lightshow Toolbar.
CREATING A NEW HELP BOX ACTIONS BEHAVIOR
3. Choose Studio VII > Lightshow Magic > Control Help Box to open the interface.
MODIFYING AN EXISTING HELP BOX ACTIONS BEHAVIOR
1. Select the element that contains an existing Lightshow Magic Control Help Box behavior.
2. Double-click the Lightshow Magic- Control Help Box behavior in the Behaviors panel to open the
interface.

Lightshow Magic 40
THE INTERFACE
The Lightshow Magic -Control Help Box Actions interface:
ACTION
SHOW HELP BOX
This will open the Help Box for the active Lightshow.
HIDE HELP BOX
This will close the Help Box for the active Lightshow.
OK
CANCEL
HELP

Lightshow Magic 41
PVII LIGHTSHOW MAGIC -CONTROL TABLE OF CONTENTS
OVERVIEW
The Control Table of Contents Behavior is designed to allow you to Hide or Show the Table of Contents box from
links external to the Lightshow. The actions emulate a user click on one of the Table of Contents button in the
Lightshow Toolbar.
CREATING A NEW TABLE OF CONTENTS ACTIONS BEHAVIOR
3. Choose Studio VII > Lightshow Magic > Control Table of Contents to open the interface.
MODIFYING AN EXISTING TABLE OF CONTENTS ACTIONS BEHAVIOR
1. Select the element that contains an existing Lightshow Magic Control Table of Contents behavior.
2. Double-click the Lightshow Magic- Control Table of Contents behavior in the Behaviors panel to open
the interface.

Lightshow Magic 42
THE INTERFACE
The Lightshow Magic -Control Table of Contents Actions interface:
LIGHTSHOW
The interface allows you to choose the specific Lightshow component to which the action will be applied, or to any
Lightshow that is active. Select the Lightshow to which you want the action applied or select ANY OPEN SHOW
to affect the Lightshow which is currently open.
The Lightshows are listed by their ID, which follow a unique naming convention, beginning with "p7LSM"
followed by the Lightshow component number. For example, "p7LSM_1" would be the first Lightshow on the page,
while "p7LSM_2" would be the second Lightshow on the page.
ACTION
SHOW TABLE OF CONTENTS
This will open the Table of Contents box for the selected Lightshow.
HIDE TABLE OF CONTENTS
This will hide the Table of Contents box for the selected Lightshow.

Lightshow Magic 43
OK
CANCEL
HELP

Lightshow Magic 44
LIGHTSHOW CSS
The following section will assist you in understanding your Lightshow Magic style sheet.
Each Lightshow on your page can be set to use a separate style theme. Each of the 6 available style themes uses a
dedicated style sheet. You can identify which theme a particular style sheet is associated with by looking at the
selector name for the second rule in each style sheet. The style sheet used for our glossary relates to Style Theme 01
(Ivory) because the second selector in the style sheet is named .p7LSM01.
Lightshow style sheets are very powerful and quite complex. If you are new to CSS it might be a good idea if you
stick with the default layout of the Lightshow Style Theme(s) you are using.
If you make an editing error that causes your Lightshow to malfunction, you can easily revert to a default style sheet
this way:
 Locate the p7lsm folder within the folder that contains your page.
 Open the folder and locate the CSS file that is linked to your page.
 Delete the CSS file. When Dreamweaver warns you that this file is in use and asks if you would like to
delete anyway, choose Yes.
 Return to your page, place your cursor inside your Lightshow, and open the Lightshow user interface as if
you were going to modify your show.
 Make no changes in the UI, but simply click OK
The LSM system will create a new style sheet for you.

Lightshow Magic 45
LIGHTSHOW CSS GLOSSARY
Use this glossary to familiarize yourself with the many CSS rules that control the look of your Lightshow. Print this
section out to keep handy as a desktop reference.
Note: The CSS displayed below is from the Ivory Style Theme. The CSS for all style themes is structurally the same.
html, body {height: 100.1%;}

Force Vertical Scrollbar in non-IE browsers
.p7LSM01 {
font-family: Arial, Helvetica, sans-serif;
}
Font-Family for entire Lightshow
#p7LSM_box.p7LSM01 #p7LSM_cnt {
background-color: #000000;
color: #CCCCCC;
padding: 1.25em;
font-size: 0.8em;
line-height: 1.5em;
border: 1px solid #000000;
}
Content area for Text Content Slides
#p7LSM_box.p7LSM01 #p7LSM_cnt a,
#p7LSM_box.p7LSM01 #p7LSM_cnt a:visited {
color: #CCCCCC;
}
#p7LSM_box.p7LSM01 #p7LSM_cnt a:hover {

color: #3399FF;
}
Links in Text Content Slides

Lightshow Magic 46
.p7LSM01 #p7LSM_container {
padding: 0 15px 15px 15px;
background-image: url(img/p7LSM01_gradient.jpg);
background-repeat: repeat-x;
background-color: #FFFFFF;
overflow: hidden;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #FFFFFF;
}
Popup Slide Container
.p7LSM01 #p7LSM_container.hideToolbar {
padding: 15px;
background-image: none !important;
}
This class is programmatically assigned to the toolbar if you set it to be hidden in the LSM UI. The padding value
must match the right, bottom, and left padding values on the .p7LSM01 #p7LSM_container rule
#p7lsm_abox.p7LSM01 {
background-color:#FFFFFF;
background-image: url(img/p7LSM01_abox.jpg);
}
The Animation box. This is the box that glides. Set background properties only.
#p7lsm_overlay.p7LSM01 {
opacity: .80;
filter: alpha(opacity=80);
}
The page overlay - Edit existing properties ONLY
.p7lsm_link, .p7lsm_description {
display: none;
}
Hide Description and Links in Dreamweaver Design View. Do not edit.

Lightshow Magic 47
#p7LSM_box.p7LSM01 #p7LSM_info {
padding: 0;
font-size: 0.7em;
color: #000000;
}
Wrapper for Description, Caption, and Counter
#p7LSM_box.p7LSM01 #p7LSM_desc {
padding: 3px 0 6px 0;
zoom: 1;
font-size: .9em;
}
Description area below full-size image
#p7LSM_box.p7LSM01 #p7LSM_desc p {
margin: 6px 0 12px 0;
}
Description paragraphs
#p7LSM_box.p7LSM01 #p7LSM_desc a,
#p7LSM_box.p7LSM01 #p7LSM_desc a:visited,
#p7LSM_descboxW.p7LSM01 a,
#p7LSM_descboxW.p7LSM01 a:visited {
color: #0099FF;
}
#p7LSM_box.p7LSM01 #p7LSM_desc a:hover,
#p7LSM_descboxW.p7LSM01 a:hover {
color: #CCCCCC;
text-decoration: none;
}
Links in Description. Applies to normally positioned Description and to optional popup Description
#p7LSM_descboxW.p7LSM01 {
top: 90px !important;
}
Description box when Popup Description option is selected. This special rule sets the top position. Set top: auto if
you want the Popup Description box to appear at the bottom right edge of the window

Lightshow Magic 48
#p7LSM_descboxW.p7LSM01 #p7LSM_descboxInner {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
width: 220px;
}
Set width and borders for Popup Description box wrapper
#p7LSM_descboxW.p7LSM01 #p7LSM_descbox {
color: #999999;
padding: 20px;
font-size: 0.75em;
line-height: 1.5em;
border: 10px solid #FFFFFF;
}
Set properties for content area of Popup Description box
.p7LSM01 #p7LSM_caption {
font-size: 1em;
font-weight:bold;
color: #000000;
padding: 8px 0 0 0;
zoom: 1;
}
Caption area
#p7LSM_box.p7LSM01 #p7LSM_counter {
font-size: 0.9em;
padding: 3px 0 0 0;
zoom: 1;
}
Counter area
#p7LSMfsim {
}
Full-Size Image Container

Lightshow Magic 49
#p7LSM_loading {
display:none;
width:78px;
height:8px;
background-image: url(img/p7lsm_loading.gif);
}
Loading Image
.p7lsm_clearfloat {
clear: both;
height: 0;
line-height: 0;
font-size: 0px;
}
Clear Floats
#p7LSM_tocbox.p7LSM01, #p7LSM_helpbox.p7LSM01 {
width:240px;
overflow:auto;
font-size: 0.75em;
color: #000000;
padding: 0;
background-image: url(img/p7LSM01_tocHelpbox.png);
border: 4px solid #FFFFFF;
}
Table of Contents and Help Popup Boxes
#p7LSM_tocbox.p7LSM01 a, #p7LSM_helpbox.p7LSM01 a {
display: block;
padding: 3px 6px;
color: #000000;
font-weight: bold;
}
#p7LSM_tocbox.p7LSM01 a:hover, #p7LSM_helpbox.p7LSM01 a:hover {

color: #FFFFFF;
}
Link Styles for Close Icons along top edges of TOC and Help popup boxes

Lightshow Magic 50
#p7LSM_helpbox.p7LSM01 {
width:300px;
}
Help Popup Box
#p7LSM_helpbox.p7LSM01 ul {
margin: 8px 18px 18px 18px;
padding: 0;
list-style-type: none;
}
Help Popup Box UL
#p7LSM_helpbox.p7LSM01 p {
font-size: 1.2em;
font-weight: bold;
margin: 0 0 14px 0;
color: #000000;
letter-spacing: 0.2em;
padding: 8px 18px;
}
Help Popup Box paragraphs
#p7LSM_helpbox.p7LSM01 li {
margin: 0 16px 6px 16px;
}
Help Popup Box LI
#p7LSM_tocbox.p7LSM01 ol {
margin-left: 1.2em;
padding-left: 1.2em;
}
TOC Popup OL
#p7LSM_tocbox.p7LSM01 li {
margin: 0 16px 0px 16px;
}
TOC Popup LI

Lightshow Magic 51
#p7LSM_tocbox.p7LSM01 p {
font-size: 1em;
font-weight: bold;
letter-spacing: 0.15em;
margin: 0;
padding: 6px 18px;
}
TOC Popup paragraphs
#p7LSM_tocbox.p7LSM01 ol a {
color: #000000;
padding: 3px 6px;
display: block;
background-color: transparent;
}
#p7LSM_tocbox.p7LSM01 ol a:hover {
color: #FFFFFF;
}
TOC Link Styles
#p7LSM_tocbox.p7LSM01 ol a.down {
color: #999999;
}
TOC Selected State
.p7LSM01 #p7LSM_toolbar {
position: relative;
overflow:hidden;
padding: 0;
height: 30px;
}
Toolbar Container

Lightshow Magic 52
.p7LSM01 #p7LSM_toolbar img {

border: 0;
}
Disable borders on toolbar images. Do Not Edit
.p7LSM01 #p7LSM_toolbar a {
background-repeat: no-repeat;
height: 30px;
display: block;
}
Toolbar icon. Edit only Height and only if you edit the toolbar theme images to make them taller or shorter
.p7LSM01 #p7LSM_toolbartoc {
position: absolute;
top: 0;
left: 0px;
}
TOC Toolbar Icon Container
.p7LSM01 #p7LSM_toc {
background-image: url(img/p7LSM01_toc.jpg);
width: 30px;
}
TOC Toolbar Icon Link
.p7LSM01 #p7LSM_vcr {
margin: 0 auto;
width: 100px;
}
VCR Icons Container

Lightshow Magic 53
.p7LSM01 #p7LSM_vcr ul {
margin: 0;
padding: 0;
display: block;
}
.p7LSM01 #p7LSM_vcr ul li {
float: left;
display: block;
}
VCR UL and List Items. Do Not Edit
.p7LSM01 #p7LSM_first {
background-image: url(img/p7LSM01_first.jpg);
width: 20px;
}
First Icon link style
.p7LSM01 #p7LSM_prev {
background-image: url(img/p7LSM01_prev.jpg);
width: 20px;
}
Previous Icon link style
.p7LSM01 #p7LSM_toolbar .p7LSM_pause {

background-image: url(img/p7LSM01_pauseplay.jpg);
width: 20px;
background-position: 0px -60px;
}
Pause Icon link style
.p7LSM01 #p7LSM_toolbar .p7LSM_play {

background-image: url(img/p7LSM01_pauseplay.jpg);
width: 20px;
}
Play Icon link style

Lightshow Magic 54
.p7LSM01 #p7LSM_next {
background-image: url(img/p7LSM01_next.jpg);
width: 20px;
}
Next Icon link style
.p7LSM01 #p7LSM_last {
background-image: url(img/p7LSM01_last.jpg);
width: 20px;
}
Last Icon link style
.p7LSM01 #p7LSM_toolbarhelp {
position: absolute;
top: 0px;
right: 26px;
}
HELP Icon Container
.p7LSM01 #p7LSM_help {
background-image: url(img/p7LSM01_help.jpg);
width: 25px;
}
Help Icon link style
.p7LSM01 #p7LSM_toolbarclose {
position: absolute;
right: 0px;
top: 0px;
}
Close Icon Container
.p7LSM01 #p7LSM_close {
background-image: url(img/p7LSM01_close.jpg);
width: 29px;
}
Close Icon link style

Lightshow Magic 55
/*Toolbar Hovers and Utilities*/

.p7LSM01 #p7LSM_toolbar a:hover, .p7LSM01 #p7LSM_toolbar a:focus, .p7LSM01
#p7LSM_toolbar a.down {
}
Toolbar Icons global hover
.p7LSM01 #p7LSM_toolbar .p7LSM_pause:hover,

.p7LSM01 #p7LSM_toolbar .p7LSM_pause:focus {
}
Pause Icon Specific Hover
.p7LSM01 #p7LSM_toolbar .p7LSM_play:hover,

.p7LSM01 #p7LSM_toolbar .p7LSM_play:focus {
}
Play Icon Specific Hover
#p7LSM_toolbar i {
display: none;
}
Do Not Edit
.p7LSM01 .p7LSM_trigs {
padding: 0px;
}
Slide Trigger Links Container
.p7LSM01 .p7LSM_trigs img {

border: 0;
height: 50px;
width: 60px;
}
Slide Trigger Links - Small Thumbnail Size

Lightshow Magic 56
.p7LSM01 .p7LSM_trigs ul {
margin: 0px;
padding: 0px;
}
Slide Trigger Links UL. Do Not Edit
.p7LSM01 .p7LSM_trigs li {
float:left;
padding: 3px;
margin-right:6px;
margin-bottom:6px;
}
Slide Trigger Links List Items
.p7LSM01 .p7LSM_trigs li.over {

border-color: #444444;
}
Slide Trigger Links Special Over State on LI
.p7LSM01 .p7LSM_trigs a {
display:block;
float:left;
z-index:1;
font-size: 0.9em;
}
.p7LSM01 .p7LSM_trigs a:hover {

border-color: #FFFFFF;
}
Slide Trigger Links - Link Styles
#p7LSM_ovr {
padding:4px;
background-color:#333333;
}
Slide Trigger Links - Styles for larger Rollover Thumbnail

Lightshow Magic 57
.p7LSM01 .p7LSM_trigs .p7lsm_type_cnt {

width: 100px !important;
background-color: #1A1A1A;
line-height: normal;
color: #999999 !important;
border-top: 1px solid #333333;
border-left: 1px solid #333333;
height: 45px;
overflow: hidden;
padding: 5px;
padding-bottom: 0;
}
.p7LSM01 .p7LSM_trigs .p7lsm_type_cnt:hover {

color: #000000 !important;
background-color: #CCCCCC;
border-color: #F0F0F0 #999999 #999999 #F0F0F0;
}
Trigger Links Specific for Text Content Slide Triggers

Lightshow Magic 58
LIGHTSHOW MAGIC THEMES
Lightshow Magic comes with 6 Style Themes:
1. Ivory
2. Carbon
3. Dijon
4. Greystone
5. Wood
6. Teal
A Theme gets its distinctive look from the CSS values used in its associated style sheet and the background images
used for its toolbar, which can be edited in the included Fireworks PNGs. Here is the list of themes showing their
associated CSS and Fireworks files:
01: Ivory
p7LSM01.css | lsm01.png | p7LSM01_tocHelpbox.png
02: Carbon
03: Dijon
04: Greystone
05: Wood
06: Teal
There is one CSS file per Theme and two Fireworks files:
lsm0X.png: This is the main Theme file and contains all of the toolbar images. p7LSM0X_tocHelpbox.png: This
contains a single image, the partially transparent background used for the Help and TOC boxes.
Let's look at these images. We'll use the ones from the 01: Ivory theme for this discussion.

Lightshow Magic 59
THE IVORY TOOLBAR PNG: LSM01.PNG
The image below shows LSM01.PNG with the Web Layer visible. The Web Layer shows the slices in the
Fireworks file that become your Web images when you export the Fireworks slices to the img folder inside your
p7lsm folder. The slices are denoted by GREEN OVERLAYS atop portions of the canvas. The slice names listed in
the Layers panel are the file names of your Web images.
If you are not an experienced Fireworks user, you should be careful when editing this image. Try to work within the
dimensions of the existing image, making sure that your underlying Web graphics remain within the boundaries of
their respective slices.
If you are an experienced Fireworks user, and you do change graphic sizes, and slice sizes accordingly, you must
also change the dimensions of your toolbar and toolbar link rules in your Lightshow style sheet. It is recommended,
therefore, that you restrict edits to the default dimensions of the Fireworks slices.

Lightshow Magic 60
THE IVORY HELP/TOC BOX PNG: P7LSM01_TOCHELPBOX.PNG
The TOCHELPBOX PNG consists of a rectangle. With the rectangle selected, we can see all of its important
properties in the Layers panel and the Optimize panel.
It is optimized as a PNG32 file with a transparent Matte and its opacity value (in the Layers panel) is set to 83,
making it 17% transparent.
You can alter the fill color of the rectangle and/or the opacity level to change the effect in your Lightshow for the
Help and TOC popup boxes.
Note: IE6 does not support transparent PNGs so the Help and TOC boxes will be fully opaque. We do not recommend
trying to hack IE6 as we consider this a case of progressive enhancement that does not take away from the beauty of the
overall Lightshow experience in that particular browser. All other modern browsers, including IE7, support PNG
transparency.

Lightshow Magic 61
EXPORTING IMAGES FROM FIREWORKS
Once you've edited your images in Fireworks, you will need to export them to the relevant folder inside
Dreamweaver. As we are working with THEME 01: IVORY, the relevant folder would be:
p7lsm\p7lsm01\img
Tip: Remember that Lightshow Magic creates a p7lsm folder inside the folder that contains the page in which you've
created your Lightshow.
To export your images:
 In Fireworks, choose File > Export

 Browse to the p7lsm\p7lsm01\img folder
Click Save

Lightshow Magic 62
You will get an overwrite warning
Click OK
Save and close your Fireworks file.

Lightshow Magic 63
QUESTIONS AND ANSWERS
The following questions and answers should prove helpful as you build your Lightshows.
HOW DO I USE OR MANAGE LIGHTSHOWS IN DIFFERENT FOLDERS?
When you create a Lightshow, the system writes a folder named p7lsm in the folder that contains the page you are
working on - and uses that folder to store style sheets and scripts. This allows for easy and safe prototyping. If you
create a Lightshow on page1.htm, in a folder named tutorials, and edit the CSS for that Lightshow, your changes are
restricted to that folder. Make another page in that folder and create a Lightshow using the same Style Theme and it
will use the same style sheet you edited while working on page1. If you create a Lightshow on a page in a new
folder, the system will create a P7LSM folder and populate it with default style sheets and scripts. This allows you
to test and prototype with complete freedom - without affecting finalized pages in other folders.
There may, however, be times when you want Lightshows in different folders to use the same Style Sheets. To do
that, create your Lightshows first. Then decide which p7lsm assets folder you want to use for all your pages. You'll
need to set the paths for all Lightshow CSS files, and the JavaScript file, to point to the p7lsm assets folder you want
to use. The CSS and script links look like this:
<script type="text/javascript" src="p7lsm/p7LSMscripts.js"></script>

<link href="p7lsm/p7lsm01/p7LSM01.css" rel="stylesheet" type="text/css" media="all" />
You can change the path to CSS or script files visually in Dreamweaver by displaying Head Content in a toolbar at
the top of your design window. To turn this feature on, choose View > Head Content.
Click the appropriate icon and your Property Inspector will change to reflect your choice, easily enabling you to
browse to the location of the assets folder you want to use.

Lightshow Magic 64
CAN I REVERT BACK TO A DEFAULT STYLE THEME CSS FILE?
Should you ever make a large error and need to revert back to a default and working CSS file, do this:
1. Delete the bad CSS file from your p7lsm/p7lsm0X folder (where X is a number from 1-6 corresponding
with your Style Theme choice).
2. Open a page in that folder that contains a Lightshow that uses that bad style sheet. Your Lightshow will
appear unstyled. Don't worry, that's expected, given the circumstances
3. Place your cursor inside the Lightshow triggers
4. Open the Lightshow interface as if you were going to edit your show
5. Make no changes in the UI - simply click the OK button
6. The system will create a new version of your CSS file
Depending on your DW version, you might not see the changes at first. If that be the case, save and close the file,
then re-open it.
HOW DO I SET A FONT FAMILY FOR MY ENTIRE LIGHTSHOW?
Set the global font-family on the .p7LSM0X rule. You can also use other rules to set font properties on specific
elements of your Lightshow. For example:
Styles for Text Content Slides: #p7LSM_box.p7LSM0X #p7LSM_cnt
Wrapper for Description, Caption, and Counter: #p7LSM_box.p7LSM0X #p7LSM_info
For additional rules you can use, please see the CSS Glossary earlier in this document.
CAN I MAKE MY THUMBNAILS DISPLAY VERTICALLY?
Yes. Note, however, that the default thumbnail styling creates a flexible matrix that conforms to the width of the
element in which you insert your Lightshow. In the event you must make your thumbnails display vertically, one to
a row, locate the following rules:
 .p7LSM01 .p7LSM_trigs li
 .p7LSM01 .p7LSM_trigs a
Edit them to remove the float property.

Lightshow Magic 65
CAN I INSERT A LIGHTSHOW INSIDE AN ACCORDION, GLIDE PANEL, ELEVATOR

PANEL OR TAB PANEL WIDGET?
Yes. Please see the main Lightshow Tweaks and Inspiration page for links to pages that will show you how.
CAN I INSERT A LIGHTSHOW INSIDE A HORIZONTAL OR VERTICAL SCROLLER

WIDGET?
Inserting inside a Horizontal scroller will not work. While you can insert a Lightshow inside a Vertical scroller it
would not present a very usable interface.
MY QUESTION IS NOT LISTED HERE. IS THERE AN ANSWER FOR ME

SOMEWHERE?
Yes. You have 3 places where you might seek a solution:
1. Lightshow Tweaks and Inspiration page

2. Lightshow Knowledge Base
3. Contact Support (see below)
THERE IS A GAP ON THE RIGHT EDGE OF MY WINDOW IN IE6 WHERE THE

TRANSPARENT OVERLAY DOES NOT SEEM TO EXTEND THE FULL WIDTH. WHAT
CAN I DO?
Unfortunately, this is an IE6 box model anomaly and the only fix is to explicitly set the left and right margins of
your body element to 0 (zero).
body {
margin-left: 0;
margin-right: 0;
}

Lightshow Magic 66
SUPPORT AND CONTACT INFO
PVII quality does not end with your purchase - it continues with the best customer support in the business.
PVII KNOWLEDGE BASE
The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and
techniques relating to our products, as well as to general web development issues…
Open the Lightshow Knowledge Base
NEWSGROUP FORUM COMMUNITIES
The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day. Choose from
the following newsgroups:
1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup
Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new
account and point it at the following server:
forums.projectseven.com
Setting up a new newsgroup account in Outlook Express
Setting up a new newsgroup account in Mozilla Thunderbird
Setting up a new newsgroup account in Entourage
If you have another newsgroup-capable program that you are using, please see its documentation to learn how to add
a new newsgroup account.
Note: PVII newsgroups are private and have nothing to do with usenet feeds that may be provided by your ISP. That is,
you will not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our
news server as a new account.

Lightshow Magic 67
RSS NEWS FEEDS
Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure how to
subscribe, please check this page:
PVII RSS Info
BEFORE YOU CONTACT US
Before making a support inquiry, please be certain to have read the documentation that came with your product.
Please include your Dreamweaver version, as well as your computer operating system type in all support
correspondence.
E-Mail:
support@projectseven.com
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.
SNAIL MAIL
Project Seven Development

339 Cristi Lane
Dobson, NC 27017

Lightshow Magic: by Pvii

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lightshow Magic: by Pvii

Uploaded by

Copyright:

Available Formats

Lightshow Magic

Make your pages come to life

Al Sparber & Gerry Jacobsen PVII

PVII | Lightshow Magic 2

Lightshow Magic ........................................................................................................................................................... 2

Install the extension ................................................................................................................................................... 6

Work in a Defined Dreamweaver Web Site .............................................................................................................. 6

Lightshow Magic assets folder .................................................................................................................................. 6

PVII Lightshow Magic .............................................................................................................................................. 7

Inserting a new Lightshow..................................................................................................................................... 9

Modifying an Existing Lightshow ....................................................................................................................... 10

Adding a new Slide.............................................................................................................................................. 11

Managing the Images in the Lightshow ............................................................................................................... 11

Managing the Lightshow Options........................................................................................................................ 15

The Interface Control Buttons ............................................................................................................................. 20

PVII Lightshow Magic - Auto Fireworks Mode...................................................................................................... 20

Selecting the Source Images ................................................................................................................................ 21

Output Options .................................................................................................................................................... 24

The Interface Control Buttons ............................................................................................................................. 26

PVII Lightshow Magic -Import Mode ..................................................................................................................... 27

Open the Lightshow Magic Import Mode interface............................................................................................. 27

Selecting the Image Source Folders..................................................................................................................... 28

Fullsize to Thumbnail Matching Search Parameters ........................................................................................... 29

Import Images ...................................................................................................................................................... 31

The Interface Control Buttons ............................................................................................................................. 33

PVII | Lightshow Magic 3

PVII Lightshow Magic -Remove............................................................................................................................. 33

Open the Remove PVII Lightshow Magic interface ............................................................................................ 34

The Interface Control Buttons ............................................................................................................................. 36

PVII Lightshow Magic -Control Behavior .............................................................................................................. 36

Creating a new Control Actions behavior ............................................................................................................ 36

Modifying an existing Control Actions behavior ................................................................................................ 37

The Interface ........................................................................................................................................................ 37

The Interface Control Buttons ............................................................................................................................. 38

PVII Lightshow Magic -Control Help Box ............................................................................................................. 39

Creating a new Help Box Actions behavior ........................................................................................................ 39

Modifying an existing Help Box Actions behavior ............................................................................................. 39

The Interface ........................................................................................................................................................ 40

The Interface Control Buttons ............................................................................................................................. 40

PVII Lightshow Magic -Control Table of Contents ................................................................................................ 41

Creating a new Table of Contents Actions behavior ........................................................................................... 41

Modifying an existing Table of Contents Actions behavior ................................................................................ 41

The Interface ........................................................................................................................................................ 42

The Interface Control Buttons ............................................................................................................................. 43

Lightshow CSS ........................................................................................................................................................ 44

Lightshow CSS Glossary ..................................................................................................................................... 45

PVII | Lightshow Magic 4

Lightshow Magic Themes ....................................................................................................................................... 58

The Ivory Toolbar PNG: lsm01.png .................................................................................................................... 59

The Ivory Help/TOC Box PNG: p7LSM01_tocHelpbox.png ............................................................................. 60

Exporting images from Fireworks ....................................................................................................................... 61

Questions and Answers ........................................................................................................................................... 63

How do I use or manage Lightshows in different folders? .................................................................................. 63

Can I Revert back to a default Style Theme CSS file? ........................................................................................ 64

How do I set a font family for my entire Lightshow? .......................................................................................... 64

can I make my thumbnails display vertically? ..................................................................................................... 64

Can I insert a Lightshow inside a Horizontal or Vertical Scroller widget? ......................................................... 65

My question is not listed here. Is there an answer for me somewhere? ............................................................... 65

Support and Contact info ......................................................................................................................................... 66

PVII Knowledge Base ......................................................................................................................................... 66

Newsgroup forum communities........................................................................................................................... 66

RSS News Feeds .................................................................................................................................................. 67

Before you Contact us ......................................................................................................................................... 67