Slide Show Magic Userguide

Slide Show Magic by PVII
PVII SLIDE SHOW MAGIC

a P V I I D r e a m w e a v e r E x t e n s i o n
PVII Dreamweaver Extensions enable you to create interactive applications on your

web page with a few mouse clicks. Once your image slideshow is created, you can
customize it by editing styles with Dreamweaver's CSS editor. Everything you need is
included.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII
© 2011 Project Seven Development. All Rights Reserved Page 1 of 64

PVII SLIDE SHOW MAGIC .............................................................................................................................................. 1
INSTALL THE EXTENSION .................................................................................................................................................... 5
WORK IN A DEFINED DREAMWEAVER WEB SITE ............................................................................................................... 5
PLAN AHEAD ...................................................................................................................................................................... 6
IN A DEDICATED BLANK PAGE OR IN AN EXISTING LAYOUT? ............................................................................................. 6
IN A TABLE OR IN A CSS LAYOUT? ...................................................................................................................................... 6
IMAGE SIZES ........................................................................................................................................................................ 6
STYLE THEMES ................................................................................................................................................................... 7
THEME 01: DARK TOOLBAR ................................................................................................................................................ 7
THEME 02: LIGHT TOOLBAR ............................................................................................................................................... 8
THEME 03: SHADOW BOX 400 WIDE ................................................................................................................................... 9
THEME 04: SHADOW BOX 480 WIDE ................................................................................................................................. 10
THEME 05: SHADOW BOX 640 WIDE ................................................................................................................................. 10
THEME 06: IMAGE ROTATOR ............................................................................................................................................ 10
USING SLIDE SHOW MAGIC ....................................................................................................................................... 11
SLIDE SHOW MAGIC FOLDERS AND FILES ......................................................................................................................... 11
ABOUT SETS AND IMAGES................................................................................................................................................. 12

THE SLIDE SHOW MAGIC INTERFACE .................................................................................................................... 13
MANAGING THE IMAGES IN THE SLIDE SHOW ................................................................................................................. 15
IMAGES .............................................................................................................................................................................. 18
MANAGING THE SLIDE SHOW OPTIONS........................................................................................................................... 21
THE INTERFACE CONTROL BUTTONS ............................................................................................................................... 23
BUILD MODE: AUTOMATIC USING FIREWORKS ................................................................................................ 24
OVERVIEW ......................................................................................................................................................................... 24
SELECTING THE SOURCE IMAGES...................................................................................................................................... 26
OUTPUT OPTIONS ............................................................................................................................................................. 29
BUILD MODE: IMPORT EXISTING IMAGES ........................................................................................................... 31
OVERVIEW ......................................................................................................................................................................... 31
OPEN THE SLIDE SHOW MAGIC IMPORT MODE INTERFACE ............................................................................................ 32
SELECTING THE IMAGE SOURCE FOLDERS........................................................................................................................ 32
FULL-SIZE TO THUMBNAIL MATCHING SEARCH PARAMETERS ...................................................................................... 34
IMPORT IMAGES ................................................................................................................................................................ 36
REMOVING A SLIDE SHOW ......................................................................................................................................... 39
OVERVIEW ......................................................................................................................................................................... 39
OPEN THE REMOVE PVII SLIDE SHOW MAGIC INTERFACE ............................................................................................. 39

SLIDE SHOW MAGIC BEHAVIORS ............................................................................................................................ 41
CONTROL ACTIONS BEHAVIOR ........................................................................................................................................ 42
TRIGGER PANEL BEHAVIOR .............................................................................................................................................. 44
OPEN PANEL BEHAVIOR ................................................................................................................................................... 46
CLOSE PANEL BEHAVIOR.................................................................................................................................................. 48
SET SLIDE SHOW TIMING BEHAVIOR ................................................................................................................................ 50
TRIGGER FROM EXTERNAL PAGE............................................................................................................................. 52
YES YOU CAN..................................................................................................................................................................... 52
QUESTIONS AND ANSWERS ....................................................................................................................................... 53
CSS GLOSSARY................................................................................................................................................................. 60
WHAT IF I MESS UP MY STYLE SHEET? ............................................................................................................................... 62
SUPPORT AND CONTACT INFO ................................................................................................................................. 63
PVII KNOWLEDGE BASE ................................................................................................................................................... 63

Install the extension

Look for the extension installer file p7_SSM_132.mxp 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. Once the
installation is complete, restart Dreamweaver.
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 create a slideshow, make sure you are working inside a defined
Dreamweaver web site - on a page that is saved within that site. This is necessary so
that Dreamweaver knows how to link required assets 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.

PLAN AHEAD
It always pays to be prepared.
In a dedicated blank page or in an existing layout?

Your slide show can be created on a blank page that contains only your slide show or
inside an existing page layout. If your slide show is to go inside a DIV or table cell,
make sure you optimize your images to a width that will fit inside. Allow a 30 pixel
buffer for a comfortable fit.
In a table or in a CSS layout?

Your slide show can be created inside a table or in a CSS layout. If you use a table, you
will need to move the slide show’s initializer outside of the table to work around a
quirk in the way MSIE browsers render tables. The initializer block looks like this:
<script type="text/javascript">

</script>
Create a new line just above your closing </body> tag and move the entire code
block there.
Image sizes
Know what size you want for your full-size images and your thumbnail preview (the
larger thumbnail at the top of the Thumbnail Panel) before you begin. If you make your
thumbnail larger than 100px you must edit the height value in the #p7ssm_preview td
CSS rule to be 6px greater than your thumbnail image height.

STYLE THEMES
Slide Show Magic includes 6 themes that you can select at any time. You can even
switch from one theme to another after your slide show is built. Slide Show Magic is an
application. Think of it in terms of being a slide show player, with the toolbars being
akin to the skins that come with Apple or Windows Media Players. As such, the toolbar
graphics should not be edited. They are the interfaces between your slide show and
your slide show's visitors. The stars of the show are, of course, your images. The
toolbars are meant to be simple, clean, and functional. That said, it is imperative that
you limit CSS edits to the rules we describe below and do not edit any other rule. If
you do, you risk breaking your skin.
Theme 01: Dark Toolbar

This theme is best used on a page that has a white background color. The toolbar will
span the entire width of the page - or of the container in which you insert the slide
show. There are no specific image width constraints for this theme — your full-size
images can be any width you choose. The CSS file for this theme is p7ssm_01.css.

Theme 02: Light Toolbar

This theme is best used on a page that has a black background color. The toolbar will
span the entire width of the page - or of the container in which you insert the slide
show. There are no specific image width constraints for this theme — your full-size
images can be any width you choose. The CSS file for this theme is p7ssm_02.css.

Theme 03: Shadow Box 400 wide

This theme is designed for use on a page that has its background color set to light gray
(#E4E4E4). The overall slide show width is fixed to accommodate images up to 400
pixel-wide. The CSS file for this theme is p7ssm_03.css


Shadow Box 480 is the same as Shadow Box 400 except that it's designed to
accommodate images up to 480 pixel-wide. The CSS file for this theme is p7ssm_04.css

Shadow Box 640 is the same as Shadow Box 400 except that it's designed to
accommodate images up to 640 pixel-wide. The CSS file for this theme is p7ssm_05.css
Theme 06: Image Rotator
This theme uses a more compact toolbar and is designed for insertion inside an existing
layout. The width will adapt to the width of its container. There are no specific
constraints on the width of your full-size images. The CSS file for this theme is
p7ssm_06.css

USING SLIDE SHOW MAGIC

You can create one slideshow per page. There is no limit to the number of slideshows
you can create within your Dreamweaver defined web sites. The Slide Show Magic
system will insert a fully functional slide show into your page, at the insertion point you
select. There are two ways to add images to the slide show:
Automatically (using Fireworks)
Import Existing Images - where you can quickly add existing full-size and thumbnail
images from another slide show or use images that were processed in Photoshop,
PaintShop Pro, or other applications.
Slide Show Magic folders and files

When your slide show is built the system will create a folder named p7ssm in the same
folder that your page is in. The p7ssm folder contains the Slide Show Magic JavaScript
file and related CSS (style sheet) file. The system will also create an images folder inside
the p7ssm folder. The images folder contains the progress bar image and slide show style
images.
The system will also create a destination folder that will contain the full size and
thumbnail images for your slide show, the default name for this folder is p7ssm_img_1.
Although you can choose a different name and location from within the user interface,
we recommend that you accept the default names and allow Slide Show Magic to
manage them for you. Inside this folder the system will create a sub-folder named
fullsize 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 p7ssm folder in the same folder as your current page.
Files to upload when publishing your slide show

When you publish your slide show to the web make sure you upload the p7ssm folder
and all image folders (the ones that begin with p7ssm_img). Do not depend on
Dreamweaver to upload them automatically.

About Sets and Images

The system allows you to categorize your images into Sets so you can organize your
images into groups.
This feature allows for easier navigation through all of the thumbnails, providing
intuitive navigation and logical hierarchy for the user to follow when looking for a
specific thumbnail image or when just browsing through all of the thumbnail images.
You can add as many sets as you like.
The interface allows multiple selections so that you can quickly move an entire group of
images from one set to another.
To select multiple consecutive images: Select the first image in the group you are
selecting, then hold down the Shift key and click on the last image in your group. All
the images between your first and last selections will be highlighted.
To select multiple non-consecutive images: Select an image, then hold the CTRL key
(Command key on Macs) down while clicking each of the other images you wish to
select. All the images that you clicked will be highlighted.

THE SLIDE SHOW MAGIC INTERFACE

-Click the PVII Slide Show Magic icon in the Common category of the Insert Toolbar.
The system will determine if there is an existing Slide Show on the page and
automatically open the appropriate interface mode: Create or Modify.
Alternatively, you can use the main Dreamweaver menu as follows:
To create a new Slide Show, choose Insert > Studio VII > Slide Show Magic by PVII...
To modify an existing Slide Show, choose Modify Studio VII > Slide Show Magic by
PVII...
The Slide Show Magic user interface will open.

The interface has two sections. The top section is where you manage the images in your
slide show. The bottom section allows you to set various options that control the slide
show's appearance and functionality.
Note: Some items in the interface will initially appear "grayed" out. These items will become enabled when you
select an image in the listing. You can Add images by selecting the Build Mode type and then clicking Add.

Managing the Images in the Slide Show
Destination Folder
The Destination Folder is where Slide Show Magic will store your processed images.
Each time you create a new slide show, the system will create a new folder in your
defined Dreamweaver site, ending with an underscore and a number which designates
its associated slide show page - like p7ssm_img_1, p7ssm_img_2, etc. 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 slide show images.

 thumbs - Contains all of the thumbnail slide show images.
The Browse... button opens a Select or Create a Destination Folder dialog box that allows
you to either select a different folder location or create your own destination folder.
Note: The Destination Folder is active only when creating a new slide show. Once you have added images to
the slide show 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 slide show images are maintained within the same destination folder.
Build Mode
The system allows you the add new images to the slide show in two different ways:
Import Existing Images

This Mode allows you to quickly import s set of existing full-size images and their
corresponding thumbnails. The system will perform no optimization, or any other
changes, to you images. For users that do not have Fireworks installed this will also be
the only Build option available. See the Import Mode section later in this user guide for
complete details on using the Manual Mode interface.

Automatic Using Fireworks Mode

This Mode allows you to quickly select a set of raw source images and will
automatically create the optimized full-size and thumbnail images for you. This Build
Mode will be unavailable if Fireworks is not installed. See the Automatic Build Mode
section later in this user guide for complete details on using the Automatic Mode
interface.
Image List
The Image list contains all of the sets and images that will appear in the slide show.
Each image line is numbered for easy reference. A preview of the image that is currently
selected will appear to the left of the Image List.
Tip: When multiple images are selected the preview for the last selected image will appear.
Add
Click the Add button to add images to the slide show. The system will open the Import
or Automatic Using Fireworks interface depending on which Build Mode option is
selected. The newly added images will be inserted in the Image List immediately after
the currently selected image.

Delete
Click the Delete button to remove the selected image(s) from the slide show. If multiple
images are selected all of the selected images will be removed. You can also remove
complete Sets by selecting a single Set and then clicking the Delete button. Sets will not
be removed if there are both individual images and Sets simultaneously selected.
Up
The Up button will move the selected image(s) in the Image List up one row. Successive
clicks will keep moving the image up one row per click until the image is at the top of
the list. If multiple images are selected each of the selected images will move up one
position. You can also move any of the Sets by selecting a single Set and clicking the Up
button. Sets will not be moved if there are both images and Sets simultaneously
selected.
Down
The Down button will move the selected image(s) in the Image List down one row.
Successive clicks will keep moving the image down one row per click until the image is
at the bottom of the list. If multiple images are selected each of the selected images will
move down one position. You can also move any of the Sets by selecting a single Set
and clicking the Down button. Sets will not be moved if there are both images and Sets
simultaneously selected.
Add Set
The Add Set button will create a new Set immediately after the currently selected Set, or
at the end of the Image List if no Set is currently selected.

Images
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 Image List. This box will
always appear grayed out and is never editable.
Thumbnail Alt Text

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.
Description
The Description box allows you to supply additional text that will display underneath
the full-size image in the slide show. 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 with the image.

Image Link
The 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 into a new browser
window, or new Tab, depending on how the user's browser is configured. 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 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.
Image Alt Text

This text is used to provide the Alt text for the full-size image when the Image Link
option is used. This allows a more descriptive or specialized Alt text for the Image Link
option. This box is normally grayed out and disabled. It becomes active only after
setting the Image Link box using the Browse button.
Image Editing
The system also allows you to quickly edit any image in the slide show without having
to close down the interface. You can select to edit either the full-size Image or the
Thumbnail Image from the drop down list.
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 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.

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 Images 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 Images 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 re-process 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 Slide Show Options
Theme
The Slide Show Magic system comes with 6 pre-defined style themes to choose from.
The system does permit you to change style themes for an existing slide show 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, later in this 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 in
between each full-size image display. Choose from 2 to 25 seconds. The Slide Delay can
be changed by the user during the actual Slide Show. This setting establishes the
starting (or default) timing for the Slide Show when the page first loads.
Image Animation
Choose Fade if you want the automated animation sequences to work whenever the
full-size image changes. If the next image size is the same as the previous one the
system will use a smooth cross-fading effect to transition the new image. If the next
image is a different size the system will first fade out the existing image, then glide to
the new image dimension, and finally fade-in the new image. Choose None if you do
not want any animation when the full-size image changes.
Note: The animation will work in all modern browsers including IE6, IE7, Firefox, Opera 7+ and Safari. The
animation sequences are turned off for older browsers.

Glide Panels
This setting controls the animated gliding effect when opening or closing the
Thumbnail panel, the Thumbnail Sets, and the Navigation panel. Un-check this box if
you wish to have no animation when these panels open and close.
Toggle Panel Sets

Check this box if you want to allow only one Thumbnail Set panel to be open at a time.
Whenever one Set is opened, any other open Set(s) will close. Un-check this box if you
want to allow any of the Set panels to be opened or closed without affecting any other
panels.
Show Image x on Page Load

You can set which full-size image is to be displayed when the Slide Show initially
opens. Enter the number for the image using the Number column of the Images List as a
reference. The default is always image number 1.
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 Slide
Show is ready to switch to the next image.
Start Slide Show on Load

Check this box if you wish to have the Slide Show start automatically when the page
loads into the browser. Uncheck this box if you wish to have the Slide Show in Paused
or Manual mode when the page first loads.

The Interface Control Buttons
OK
When you are done adding images and setting your desired options, click the OK
button to build the slide show. 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 slide show will be added to your page. You can preview in a browser to operate
the slide show and check its functionality. To make further changes, you simply re-open
the Slide Show Magic interface and make any modifications you wish to.
Cancel
Click the Cancel button to completely abort the current Slide Show 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. The Help page
can remain open for easy reference while you continue working with the Slide Show
Magic interfaces.

BUILD MODE: AUTOMATIC USING FIREWORKS
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. Slide Show Magic handles all image processing automatically, using the
Fireworks graphics engine.
While Slide Show 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 Slide Show 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 own
specifications - using the Fireworks engine. Slide Show Magic will create both your full-
size and your thumbnail images - automatically. The size of your originals does not
matter. Once your images are processed, and your slide show built, you can use the Edit
buttons in the Slide Show Magic interface, at any time, to load your images into
Fireworks for further processing.

Open the Automatic Fireworks Mode interface

The 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 Slide
Show Magic interface.
The interface is divided into two sections. The top section is where you select the image
source folder and the images to be placed into the slide show. 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 Slide Show Magic interface.

Selecting the Source Images
Source Image Folder

Use the Browse... button to navigate to the location of the source images for your slide
show.
-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 is limited to displaying the folder names only -
file contents (images) will not show.
-Click the Select button to close the dialog box.

You can navigate to any folder on your system, including any mounted or shared drives
and your digital camera.
When the dialog box closes the interface will automatically 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 Slide Show listing.
De-Select All
Click the De-Select All button to un-select all of the images that appear in the Select
Images to Add to the Slide Show listing.
Select Images to Add to the Slide Show

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 slide show 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 slide show.
To select multiple, consecutive, images - Select the first image then hold down the
Shift key and click on the last image that you wish 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
(Command key on Mac) down while clicking on the other images you wish to select.
Each of the images 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 is All Supported Types, which 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 GIF 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 file name
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.

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 cases the default JPEG -better quality format is the best choice. Choose a lower
quality format, like GIF webSnap 128 or 256 when thumbnail file size becomes an issue.
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 always be preserved - there will never be any image distortion. The system is
designed to accommodate different size thumbnails and different thumbnail
orientations seamlessly. The default is 100px, and is a perfect size for display of the
thumbnail Preview.
Note: The thumbnails that are displayed in the Sets panels are sized according to width and height settings in
the style sheet. The thumbnail will display in the Preview pane using the actual size that you set in this interface.

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 simply copy your full-size image into the slide show, but will still
create the 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 size to either height
or width, without stretching the image or affecting the aspect ratio in any way. This
guarantees that your full-size images will fit properly inside the html elements of your
page. Images that are already smaller than the dimensions specified will not undergo
any scaling or change in size. Smaller images will not be affected.
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 the size. For example,
entering 80 into the box will adjust full-size image dimensions to be 80% of the
corresponding source image.

BUILD MODE: IMPORT EXISTING IMAGES
Overview
If you do not have Fireworks installed, or you want to use images and thumbnails that
are already prepared, the Import Mode interface will allow you to quickly choose the
images and thumbnails to be used for the slide show. You can use any image editor,
such as Photoshop, to process your thumbnails and full-size images first, then use Slide
Show Magic's Import interface to locate your full-size images, associate them with their
related thumbnails, and build your slide show. Once you have selected the images and
thumbnails, the edit controls in the main Slide Show Magic interface will allow you to
load your images into your primary image editor for further processing if desired.
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 the automated
matching, the system also allows you to manually select the thumbnail for any full-size
image.

Open the Slide Show Magic Import Mode interface

The Import Mode Image Selection interface will open whenever you click on the Add
button with the Import Existing Images radio button selected in the main Slide Show
Magic interface.
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.

Full-size Image Source Folder

Use the Browse... button to navigate to the location of the full-size images for your slide
show.
 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.

Thumbnail Image Source Folder

Use the Browse... button to navigate to the location of the thumbnail images for your
slide show.
 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.
Full-size 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 the system
will match full-size and thumbnail images only when their file names are exactly the
same.

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 file 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 file 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 and Slide Show 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.

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 Image column. A
corresponding thumbnail image file name will be displayed in the second column.
All full-size images that have a matching thumbnail image will be added to the Slide
Show when you click the OK button. Images that do not have a matching thumbnail
image will be ignored. In above screen capture, pk_img04_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 re-built using the current matching parameters.

Assign Thumbnail Image

There may be occasions when the file names are such that you cannot use the matching
system, or when 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.

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 - they will remain untouched.
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 slide show.
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 over-write an existing image.

REMOVING A SLIDE SHOW
Overview
The Slide Show Magic system includes a Remove feature that allows you to quickly
remove an existing Slide Show Magic system from your page. This feature allows for
easy removal when simply prototyping pages or when a total redesign is necessary.
Open the Remove PVII Slide Show Magic interface

-Open a page that contains a Slide Show Magic system.
-Choose Commands > Studio VII > Remove Slide Show Magic... to open the Remove
interface.
Note: The Remove option will be unavailable (grayed out) in the menu if there is no Slide Show Magic
component on the page.
The Remove Slide Show Magic interface will open.

What will be Removed

The system will remove the following Slide Show markup and asset links from the
page:
1. The actual html markup for the slide show will be removed.
2. The link to the Slide Show Magic JavaScript file will be removed.
3. The link to the Slide Show Magic theme style sheet will be removed.
What will Not be Removed

The system will not remove the p7ssm folder, which contains the Slide Show 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 Slide Show Destination folders and their related fullsize
and thumbs sub-folders. These can be used to quickly re-build a new Slide Show using
the Import function at any time.

SLIDE SHOW MAGIC BEHAVIORS

The Slide Show Magic system includes a set of Behaviors that can be used to trigger
actions within the slide show. These behaviors can be applied to any link on your page,
including text or image links. In most cases, you will want to limit user control of the
slide show to the default toolbar controls - but in some cases you might need to control
one or more slide show actions from custom links on your page. These Behaviors will
help you accomplish that.
The included Slide Show Magic Behaviors
1. Control Actions
2. Trigger Panel
3. Open Panel
4. Close Panel
5. Set Slide Show Timing

Control Actions Behavior

The Control Behavior is designed to allow you to control the operation of the Slide
Show. The actions emulate a user click on one of the buttons in the Slide Show Control
Panel.
Creating a new Control Actions behavior

1. Select (click) an element (text link or image, e.g.) to act as the behavior trigger.
2. Open Dreamweaver's Behaviors Panel (Window -> Behaviors)
3. Click the plus sign (+) on the Behaviors panel.
4. Choose Studio VII > Slide Show Magic > Control Actions to open the interface.
5. Select the action you wish to trigger.
6. Click OK to apply the behavior.
Tip: When creating the trigger link, be it text or an image, set the link box in Dreamweaver's Property Inspector
to javascript:; (javascript followed by a colon and a semicolon) to prevent the browser from jumping to the top of
the page when it is clicked.
Modifying an existing Control Actions behavior

1. Select the element that contains an existing Slide Show Magic Open behavior.
2. Double-click the Slide Show 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 Slide Show Magic -Control Actions interface allows you to select one of seven Slide
Show actions.
Select Action
Select one of the seven control actions for the Slide Show.
Image Number
The Image Number box is grayed out (disabled) unless you choose the Go to Image
Number... action. Enter the number of the image that you want the Slide Show to show.
Pause
Check this box if you wish to have the Slide Show go into Pause mode when the
Behavior action starts. Leave this box un-checked if you do not want to interrupt the
slide show.

Trigger Panel Behavior

The Trigger Panel Behavior is designed to emulate a click on any one of the panels
used in the Slide Show: the Thumbnail Panel, Thumbnail Sets panels, and the Navigation
panel. Just as in the actual Slide Show, each successive click will open or close the
related panel. The system will use the settings established for the Glide Panels and
Toggle Panels options set in the main interface.
Creating a new Trigger Panel behavior

1. Select (click) an element to act as the behavior trigger, such as a text link or
image.
4. Choose Studio VII > Slide Show Magic > Trigger Panel to open the interface.
5. Select the panel that you wish to trigger.
Modifying an existing Trigger Panel behavior

1. Select the element that contains an existing Slide Show Magic Trigger behavior.
2. Double-click the Slide Show Magic- Trigger Panel behavior in the Behaviors
3. Select the panel that you wish to trigger.

The Interface
The Slide Show Magic -Trigger Panel interface allows you to select which panel to
trigger.
Select the Panel to Trigger

This contains a listing of the Slide Show panels that can be triggered.
Select the panel you wish to trigger: the Thumbnail panel, the Navigation panel, or one
of the Set panels. The Thumbnail Set panels follow a naming convention of p7SSMtp_x
where x is the number of the panel.
Pause
slide show.

Open Panel Behavior

The Open Panel Behavior is designed to Open any one of the panels used in the Slide
Show: the Thumbnail Panel, Thumbnail Sets panels, and the Navigation panel. If the
selected panel is closed, the behavior will open the panel. If the selected panel is
already open then the system will take no action. The system will use the settings
established for the Glide Panels and Toggle Panels options set in the main interface.
Creating a new Open Panel behavior

1. Select (click) an element to act as the behavior Open, a text link or image.
4. Choose Studio VII > Slide Show Magic > Open Panel to open the interface.
5. Select the panel that you wish to Open.
Modifying an existing Open Panel behavior

1. Select the element that contains an existing Slide Show Magic Open behavior.
2. Double-click the Slide Show Magic- Open Panel behavior in the Behaviors
3. Select the panel that you wish to Open.

The Interface
The Slide Show Magic -Open Panel interface allows you to select which panel to Open.
Select the Panel to Open

This contains a listing of the Slide Show panels that can be Opened.
Select the panel you wish to Open: the Thumbnail panel, the Navigation panel, or one
Pause
slide show.

Close Panel Behavior

The Close Panel Behavior is designed to close any one of the panels used in the Slide
Show, the Sets panels, the Thumbnail Panel and the Navigation panel. If the selected
panel is open, the behavior will close the panel. If the selected panel is already closed
then the system will take no action. The system will use the settings established for
Glide Panels and Toggle Panels options.
Creating a new Close Panel behavior

1. Select (click) an element to act as the behavior Close, such as a text link or image.
4. Choose Studio VII > Slide Show Magic > Close Panel to open the interface.
5. Select the panel that you wish to Close.
Modifying an existing Close Panel behavior

1. Select the element that contains an existing Slide Show Magic Close behavior.
2. Double-click the Slide Show Magic- Close Panel behavior in the Behaviors
3. Select the panel that you wish to Close.

The Interface
The Slide Show Magic -Close Panel interface allows you to select the which panel to
Close.
Select the Panel to Close

This contains a listing of the Slide Show panels that can be Closed.
Select the panel you wish to Close: the Thumbnail panel, the Navigation panel, or one
Pause
slide show.

Set Slide Show Timing Behavior

The Set Slide Show Timing behavior is designed to allow you to control the delay in
between slides number (in seconds). The action emulates a user setting the timing slider
bar in the Slide Show Control Panel.
Creating a new Slide Show Timing behavior

1. Select (click) an element to act as the behavior Open, such as a text link or image.
4. Choose Studio VII > Slide Show Magic > Set Slide Show Timing to open the
interface.
5. Select the delay in between slides number (in seconds).
Modifying an existing Slide Show Timing behavior

1. Select the element that contains an existing Set Slide Show Timing behavior.
2. Double-click the Slide Show Magic- Set Slide Show Timing behavior in the
Behaviors panel to open the interface.
3. Select the delay between slides number (in seconds).

The Interface
The Slide Show Magic -Set Slide Show Timing interface.
The Slide Delay controls the amount of time (in seconds) that the system will pause
between each full-size image. Choose from 2 to 25 seconds. The system will use this
new setting until another behavior changes it or the user changes the delay setting
using the slider bar in the web page control panel.

TRIGGER FROM EXTERNAL PAGE

Can I have a link that will open a page that contains a Slide Show Magic slide show and
trigger a specific full-size image to open when the page loads? Perhaps by using a
special URL parameter?
Yes you can

Slide Show Magic includes an opener detection system that will look for a special URL
parameter in the page's URL (address) and will show the image specified by the
parameter. Here' how to deploy it:
The system will look for ssm= in the URL parameter. A URL with this parameter,
pictures.htm?ssm=12, will load pictures.htm and show the 12th image in the slide show.

QUESTIONS AND ANSWERS

This section covers various issues and tweaks you can employ to alter aspects of your
slide show's appearance or functionality — or to work around browser quirks.
How do I edit links in the glide-down navigation bar?

The safest way to edit the links in the nav bar is to do it in Code View.
-Switch to Code View
-Locate the nav bar DIV: <div id="p7ssm_navList">
-Inside the DIV you'll find an unordered list of links:
<div id="p7ssm_navList">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</div>
Each <li> line contains one link. To delete a link, delete its entire line from <li> to </li>.
To edit a link, replace the link text and change the href attribute from the placeholder #
symbol to the page you want to link to. For instance, to change the first link from Home
to Horses, and to load a page named horses.htm, change this first <li> line to this:
<li><a href="horses.htm">Horses</a></li>
Dreamweaver's Property Inspector does work in Code View so you can use its link box
to browse to your new page. To do so, place your cursor inside the link text. You will
see the placeholder link in the Property Inspector's link box. Use the browse button to
open a browse dialog to find the page you want to link to. You can add as many links as
you need.

Can I edit the link styles in the navigation bar?

Sure. These are the style rules to edit:
#p7ssm #p7ssm_navList a
#p7ssm #p7ssm_navList a:hover
Can I remove the navigation bar?

You should not remove any slide show element. If you do not want to use the
navigation bar, you can hide it. To hide it, find the following style:
#p7ssm_nav_wrapper
Edit it to add a display property set to none:
#p7ssm_nav_wrapper {
position: relative;
display: none;
}
If you ever need to use the navigation bar in the future, simple remove the display
property from your style.
Can I hide the toolbar control that shows the thumbnails?

Yes. Find the CSS style #p7SSMthmb and add a display: none declaration with an
!important notation so the entire rule looks like this:
#p7SSMthmb {
background-image: url(img/p7ssm_tthumbs.jpg);
background-repeat: no-repeat;
height: 36px;
width: 23px;
display: none !important;
}

Can I set the Thumbnail Panel to automatically

show when the page loads?
Yes. To do so, find the thumbnail icon link in Code View. It looks like this:
<a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb">
Assign a class of down to the <a> tag so it looks like this:
<a href="#" title="Hide or Show Thumbnails" class="down" id="p7SSMthmb">
Why does my Preview Thumbnail jump around?

If you set your thumbnail size to larger than 100px, then you must make a CSS edit as
soon as you build your slide show to ensure there is sufficient room for the Thumbnail
Preview to properly display. The style you will edit is: #p7ssm_preview td, which has
its height set to 106px. Edit its height value to be 6px greater than the size you chose for
your thumbnail.
Can I hide the Preview Thumbnail?

Yes. Find the CSS style #p7ssm_preview and add a display: none declaration with an
!important notation so the entire rule looks like this:
#p7ssm_preview {
padding: 6px 0;
display: none !important;
}

Can I change the background color

behind the Shadow Box themes?
Yes. The background images that make up the Shadow Box theme's shadows are
optimized against a light gray canvas. We've provided you with editable Fireworks
PNGs for this purpose - one for each of the 3 Shadow Box themes. You'll find these files
in folder named Fireworks that came with your product download. If you are using the
Shadow Box 400 theme, open shadow-box-400.png in Fireworks.
-Choose Modify > Canvas > Canvas Color
-Click the color chip and change the color to suit - let's say to #999999
-Your canvas is now medium gray.
-Choose File > Export…

Browse to the folder in your Dreamweaver site that contains your slide show page.
Inside that folder locate the p7ssm folder and inside that one you will find the img
folder.
-With the img folder in your Save in box, click Export
-You will get an overwrite warning. Click OK
Back in Dreamweaver, find the #p7ssm CSS rule. It is the first one in your slide show
CSS file.

-Change its background color to #999999 so it looks like this:
#p7ssm {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
width: auto;
z-index: 100;
position: relative;
background-color: #999999;
padding: 16px;
}
Your Shadow Box layout is now optimized against a medium gray background.

Can I change the background color

or border of the full-size image animated box?
Yes. The animated box properties are managed in this CSS style rule #p7ssm_fsc
Let's assume you are using Theme 01. The animated box has no background color, a
dark gray border, and is padded by 4px all around. The rule looks like this:
#p7ssm_fsc {
margin: 0 auto;
border: 1px solid #222222;
padding: 4px;
}
Let's change this so that the box is black and has neither padding nor borders. The
edited rule would look like this:
#p7ssm_fsc {
margin: 0 auto;
border: 0;
padding: 0;
background-color: #000000;
}
Why does Firefox jump a pixel when it loads a new image?

In most cases your full-size images width will be an even number value. In the very rare
event that it is an odd number value, it will trigger a Firefox 2.x rounding bug and as
your full-size images transition from one to another there will be a 1-pixel jump. To
prevent this, add this new CSS style to your style sheet:
#p7ssm_fullsize td {padding: 0px 2px 0px 1px;}

Why won’t my slide show run in Internet Explorer?

If you inserted your slide show in a table, you will need to move the slide show’s
initializer outside of the table to work around a quirk in the way MSIE browsers render
tables. The initializer block looks like this (the numbers inside the parentheses will vary
with the options you’ve set):
<script type="text/javascript">

</script>
Create a new line just above your closing </body> tag and move the entire code block
there.
Which CSS styles are safe to edit?

Please refer to the following CSS Glossary before attempting any CSS edits not
discussed previously in this document.
CSS GLOSSARY
This section lists the CSS rules in a Slide Show Magic style sheet that are safe to edit. All
6 Themes use style sheets that contain the same basic rules. If you don't see a rule listed
below DO NOT EDIT IT. If you want to perform a task that you are not sure about,
please use our support options listed later in this document.
#p7ssm
Edit only Font-family, background color, and width.
#p7ssm_nav_wrapper
Edit only to add a display: none declaration if you want to hide the navigation bar.

#p7ssm_navList
Necessary for the script. The Script will hide this element before the page loads. Set
display value to none if you want to hide the nav bar in Dreamweaver Design View,
but it will also be hidden in browsers if script is disabled.
#p7ssm_navList ul
The Navigation Menu list. Edit only the font-size.
#p7ssm #p7ssm_navList a
The Navigation Bar Links. All properties are editable except for the display property,
which must always be set to block.
#p7ssm #p7ssm_navList a:hover

The Navigation Bar hover class. All properties are editable.
#p7ssm_preview td
The Thumbnail Preview container. Edit only the height property, which should always
be set to 6px more than the optimization size you selected for your thumbnails when
you created your slide show.
#p7ssm_preview img
The Thumbnail Preview image. Editable except for the display property.
.p7ssm_sectionTrigger
The container for the trigger links that control the Thumbnail Sets.
#p7ssm .p7ssm_sectionTrigger a
#p7ssm .p7ssm_sectionTrigger a:hover
The link styles for the Thumbnail Sets triggers.
#p7ssm_toolbar
Edit only if you want to hide the entire toolbar. To do so, add a display property and set
its value to none.

#p7SSMthmb
The Thumbnail toolbar icon. Edit only if you wish to remove the icon that hides and
shows the Thumbnail Panel by adding a display property and setting it to none.
#p7ssm_counter
The image counter (Image 1 of 24).
#p7ssm_fsc
The animating Box Wrapper for the full-size image. Edit only the border, padding, and
background-color properties.
#p7ssm_description
The description text. All properties are editable except the display property, which must
remain set to none
#p7ssm_description a
Links inside the description box. You can add a hover style if you wish.
What if I mess up my style sheet?

In the event that you break your style sheet beyond repair, you can revert back to a
default style sheet by deleting the broken one. To do so, find the style sheet that is
linked to the page you are working on. It will be inside the p7ssm folder. Delete the CSS
file .
Your slide show will now appear as unstyled text and images. Don't worry.
Open the Slide Show Magic interface as if you were going to edit the options or add
images.
Make no changes - just click OK.
The system will generate a fresh style sheet.
Depending on the version of Dreamweaver you are running, you might have to save,
close, and then re-open the page to see your styles restored.

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 Knowledge Base | View the 10 Most Recent Additions
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.

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

Slide Show Magic Userguide

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

Slide Show Magic Userguide

Uploaded by

Copyright:

Available Formats

Slide Show Magic by PVII

PVII SLIDE SHOW MAGIC

PVII Dreamweaver Extensions enable you to create interactive applications on your

Al Sparber & Gerry Jacobsen PVII

© 2011 Project Seven Development. All Rights Reserved Page 1 of 64

PVII SLIDE SHOW MAGIC .............................................................................................................................................. 1

INSTALL THE EXTENSION .................................................................................................................................................... 5

WORK IN A DEFINED DREAMWEAVER WEB SITE ............................................................................................................... 5

PLAN AHEAD ...................................................................................................................................................................... 6

IN A DEDICATED BLANK PAGE OR IN AN EXISTING LAYOUT? ............................................................................................. 6

IN A TABLE OR IN A CSS LAYOUT? ...................................................................................................................................... 6

IMAGE SIZES ........................................................................................................................................................................ 6

STYLE THEMES ................................................................................................................................................................... 7

THEME 01: DARK TOOLBAR ................................................................................................................................................ 7

THEME 02: LIGHT TOOLBAR ............................................................................................................................................... 8

THEME 03: SHADOW BOX 400 WIDE ................................................................................................................................... 9

THEME 04: SHADOW BOX 480 WIDE ................................................................................................................................. 10

THEME 05: SHADOW BOX 640 WIDE ................................................................................................................................. 10

THEME 06: IMAGE ROTATOR ............................................................................................................................................ 10

USING SLIDE SHOW MAGIC ....................................................................................................................................... 11

SLIDE SHOW MAGIC FOLDERS AND FILES ......................................................................................................................... 11

ABOUT SETS AND IMAGES................................................................................................................................................. 12

© 2011 Project Seven Development. All Rights Reserved Page 2 of 64

THE SLIDE SHOW MAGIC INTERFACE .................................................................................................................... 13

MANAGING THE IMAGES IN THE SLIDE SHOW ................................................................................................................. 15

MANAGING THE SLIDE SHOW OPTIONS........................................................................................................................... 21

THE INTERFACE CONTROL BUTTONS ............................................................................................................................... 23

BUILD MODE: AUTOMATIC USING FIREWORKS ................................................................................................ 24

SELECTING THE SOURCE IMAGES...................................................................................................................................... 26

OUTPUT OPTIONS ............................................................................................................................................................. 29

BUILD MODE: IMPORT EXISTING IMAGES ........................................................................................................... 31

OPEN THE SLIDE SHOW MAGIC IMPORT MODE INTERFACE ............................................................................................ 32

SELECTING THE IMAGE SOURCE FOLDERS........................................................................................................................ 32

FULL-SIZE TO THUMBNAIL MATCHING SEARCH PARAMETERS ...................................................................................... 34

IMPORT IMAGES ................................................................................................................................................................ 36

REMOVING A SLIDE SHOW ......................................................................................................................................... 39

OPEN THE REMOVE PVII SLIDE SHOW MAGIC INTERFACE ............................................................................................. 39

© 2011 Project Seven Development. All Rights Reserved Page 3 of 64

SLIDE SHOW MAGIC BEHAVIORS ............................................................................................................................ 41

CONTROL ACTIONS BEHAVIOR ........................................................................................................................................ 42

TRIGGER PANEL BEHAVIOR .............................................................................................................................................. 44

OPEN PANEL BEHAVIOR ................................................................................................................................................... 46

CLOSE PANEL BEHAVIOR.................................................................................................................................................. 48

SET SLIDE SHOW TIMING BEHAVIOR ................................................................................................................................ 50

TRIGGER FROM EXTERNAL PAGE............................................................................................................................. 52

YES YOU CAN..................................................................................................................................................................... 52

QUESTIONS AND ANSWERS ....................................................................................................................................... 53

WHAT IF I MESS UP MY STYLE SHEET? ............................................................................................................................... 62

SUPPORT AND CONTACT INFO ................................................................................................................................. 63

PVII KNOWLEDGE BASE ................................................................................................................................................... 63

© 2011 Project Seven Development. All Rights Reserved Page 4 of 64

Install the extension

Work in a Defined Dreamweaver Web Site

© 2011 Project Seven Development. All Rights Reserved Page 5 of 64

In a dedicated blank page or in an existing layout?

In a table or in a CSS layout?

© 2011 Project Seven Development. All Rights Reserved Page 6 of 64

Theme 01: Dark Toolbar

© 2011 Project Seven Development. All Rights Reserved Page 7 of 64

Theme 02: Light Toolbar

© 2011 Project Seven Development. All Rights Reserved Page 8 of 64

Theme 03: Shadow Box 400 wide

© 2011 Project Seven Development. All Rights Reserved Page 9 of 64