Scroll To Top
Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($95) | FSS Home | Documentation

Full Screen Slide ShowThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

A Responsive and Adaptive Full Screen Slide Show from PVII

Full Screen Slide Show (FSS) is an automated Dreamweaver widget that makes it easy to create engaging Full Screen Slide Shows with engaging animations, usable and powerful features, and efficient image caching.

Install the extension

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

For version CS6 and older:

Look for the extension installer file p7_FSS_121.mxp in the root of the zip archive you downloaded. Double-click the files to install the extensions. Dreamweaver's Extension Manager will open and you will be prompted to complete the installation.

For Creative Cloud versions:

Look for the extension installer file p7_FSS_121.zxp in the root of the zip archive you downloaded. Double-click the files to install the extensions. Dreamweaver's Extension Manager will open and you will be prompted to complete the installation.

Tip: If you get an error message when installing, it probably means that you do not have the correct version of Extension Manager installed. Adobe does not automate this process for you anymore. You need to log into the Adobe Cloud and then download and install the Extension Manager that matches your version of Dreamweaver.

Work in a defined Dreamweaver 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 required assets. If you are new to Dreamweaver or need to learn how to define a web site, follow these simple steps:

Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you can specify a remote folder on your remote server.

Site Name

The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.

Local Site Folder

The name of the folder on your local disk where you store site files, templates, and library items. Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-relative links, it does so relative to this folder.

Assets Folder

When you create a slide show, the FSS system creates an asset folder in your defined site called p7fss. When you publish your page, make sure you upload that folder to your server.

Using PVII Full Screen Slide Show

Before you create your slide show, you need to establish an insertion point for the trigger link.

Establish an Insertion Point

You will need a trigger link for your your show. You can use an existing link or an image on your page, or you can have the FSS system create a link. Choose one of the following methods:

1. Use an Existing Link

Click inside an existing text or image link.

2. Select Existing Text or Image

Select the existing text or image that you want to be your trigger link. FSS will wrap the text or image inside <a> tags. If you are working with existing text, make sure you select the text, rather than simply placing your cursor inside it (see screen capture below).

3. Have FSS Create a Trigger Link

Click at the location on your page where you wish to have the launch trigger created. FSS will create the text and the link for you.

Open the FSS UI

After establishing your insertion point, click the FSS icon in the PVII section of your Dreamweaver Insert Bar:

Or Insert Panel:

 

The interface will open..

Trigger Link

Enter or edit the text you wish to act as the trigger to launch your Slide Show. If you clicked on an image, the Trigger Link box will show the HTML markup for that image. If you selected existing text on your page, the system will know that and your page text will be pre-supplied in the box. If you selected an image on your page, the box will contain the HTML markup for that image.

Image Handling Buttons

There are five image handling buttons:

1. Add Image

Use this button to add one image, at a time, to your slide show. Clicking this button add a new image element to the Images List. To choose the image to use, select the image element in the Images list and then click the Browse... button at the end of the Image Path box.

2. Delete Image

This button will delete the selected image element in the Images list

3. Move Up

This button will move the selected image element in the Images list up.

4. Move Down

This button will move the selected image element in the Images list up.

5. Import Images

The Import Images button allows you to add multiple images to your slide show. When you click the button, the FSS Image Import screen will open:

Tip: Before browsing to your image folder, you can opt to set a filter for specific Image Type.

Click the Browse... button to browse to your image folder and select any image inside the folder. Then click OK.

All the images in that folder will appear in the Select Images to Add to the Slide Show box. Use shift-select, CTRL-select, or the Select All button to choose which images to import.

Click OK to complete the import.

Display Mode

Display Mode can be set independently for each image, and determines how that image will display in the browser window/viewport. There are three Display Mode Options:

1. Fill

Your image will be proportionally scaled to fill the entire viewport. Some image cropping will likely occur. To keep cropping to a minimum, on the most devices, you should choose landscape-oriented images in an HD aspect ratio.

2. Fit

The image will be proportionally scaled until either its height or width fills the viewport. No cropping will occur, and the image will be centered in the viewport. This mode is ideal for larger portrait images.

3. Center

The image will be displayed at its natural size. If the image does not fit the viewport, it will be scaled smaller, until it does. No cropping will occur, and the image will be centered in the viewport. This mode is ideal for smaller portrait images.

All Button

In the event you want to have a single setting apply to all images, click the All button next to the Display Mode drop-down list.

Description

Position the optional Description on your screen, in one of four locations:

1. Top Left
2. Top Right
3. Bottom Left
4. Bottom Right

All Button

In the event you want to have a single setting apply to all image descriptions, click the All button next to the Description drop-down list.

Transition

Choose from four options to set an animation mode for your image Description:

1. None
2. Slide from Left
3. Slide from Right
4. Pivot

All Button

In the event you want to have a single setting apply to all description transitions, click the All button next to the Transition drop-down list.

Description

Enter an optional description for one or more of your images. This box supports plain text, as well as HTML markup, making it easy to add a mix of text and links. If you are not proficient at writing simple code, we suggest that you create a temporary page in Dreamweaver, enter your content, copy the markup in Code View, and then paste it into the FSS Description box.

Controls

There are various control and toolbar permutations that you can opt to show.

Show Toolbar

Display a toolbar, which can display one or more icons, which you can select from the Toolbar options section, below.

Show Previous/Next Arrows

These are large arrows that appear to the left and right of your image slides.

Icons

Choose Light or Dark colored icons for your Toolbar and/or your Previous/Next arrows.

Transparent

Background colors for your toolbar are turned off by default. If you change this option, by un-checking the box, your toolbar will be rendered as a semi-transparent, colored bar that spans your viewport.

Toolbar

The following options control your toolbar placement and the icons you want it to display.

Top/Bottom (drop-down list)

Choose vertical position from the first drop-down.

Left/Center/Right (drop-down list)

Choose horizontal position from the second drop-down.

Prev/Next (check box)

Display previous and next icons on the toolbar.

Pause/Play (check box)

Display pause and play icons on the toolbar.

Close (check box)

Display a close icon on the toolbar.

Startup

Configure how your slide show starts.

Start with Image...

Choose which image to begin with. The images will sequence from there in subsequent order. In most cases, the default value of 1 is appropriate.

Random Image Order

Choose a random order. Each time the page loads, a random image order will be set and executed.

Z-Index

This option enables you to set a z-index value for you slide show. The default value is 999. This allows you to fine-tune your slide show and your page content. For instance, you might want your menu or your footer to remain visible while the slide show is displayed. In that case, you could simply set your menu or footer to position relative and assign them a z-index higher than that of your slide show.

Launch on Page Load

Enable this option if you wish to have your slide show open automatically when the page first loads into the browser. If your page contains multiple slide shows, only one should be set to this option.

Remember! Only one slide show per page can be set to Launch On Page Load.

Rotator

Rotator is how we describe a slide show that is running automatically.

Auto Play on Startup

Set you slide show to run automatically as soon as it appears.

Display Time

Set the time, in seconds, that each slide is shown.

Pause on Control Action

Trigger Pause mode if the previous or next controls are used.

Rotator Cycles

Set the number of cycles a slide show will play when it is set to run on startup or when the Play control is clicked or tapped.

Play Continually

The slide show will cycle over and over. It will not stop cycling so long as the show is visible, or until you click/tap the pause control, or close the slide show.

Number of Cycles

Set a specific number of cycles for the auto play mode to run.

End Cycle On...

Set your cycle to end on either the last or the first image.

Animation

Set the animation for your image slides. Choose from:

Experiment with the animations and choose the one that works best with your images.

Duration

Set the animation duration for your image animation. The default 800ms (8/10ths of a second) works well across a wide range of devices. To speed up the animation, enter a lower number. To slow down the animation, enter a higher number.

Editing/Modifying a Slide Show

You can edit the settings and options for any slide show on your page by opening the FSS interface for that slide show. There are two ways to do this, depending on the Launch Mode for the show. In either case, open the FSS UI the same way you did when you created your slide show.

On Page Load

This launch mode supports only one slide show per page, so all you need to do is open the FSS interface. The UI will open in the appropriate mode, with your slide show information ready for editing.

Trigger Link

This launch mode supports multiple slide shows per page, so before you open the FSS UI, select the trigger link of the slide show you wish to edit.

Removing a slide Show

To delete an existing slide show on the page, open the FSS UI, as if you were going to edit the show. The UI will open in Modify mode and a Remove button will be available in the column of command buttons along the right edge of the UI.

Click the Remove button to remove the show.

What will be Removed

The system will completely remove the html markup for the selected slide show from your page. The system will also remove the link to the relevant CSS file and the JavaScript file, but only if there are no other slide shows remaining on your page.

What will Not be Removed

The system will not remove the p7fss folder.

CSS

There is one style sheet that comes with Fullscreen Slide Show and it is automatically linked to your page when you create a slide show. Only the following rules should be edited:

.p7fss-description

Use this class to set specific font attributes for your description.

.p7fss-description.top-left
.p7fss-description.top-right
.p7fss-description.bottom-left
.p7fss-description.bottom-right

Use the above classes to fine tune the top, left, right, or bottom positions of your description.

.p7fss-fit img,
.p7fss-center img

Use this class to adjust the border attributes of images displayed in Fit or Center modes.

CSS "p7fss-running" Class

FSS assigns a special CSS class to the body tag of your page. This class is assigned programmtically, when a slide show is running. When the show is closed, the class is removed. This allows you to style page elements in a certain way while the slide show is running. As an example, you might take a menu of links and fix its position, while assigning a z-index that allows it to overlay the slide show. The possiblities are endless.

To use this class, simply make it the parent selector in a CSS class that you create. For example,:

.p7fss-running .top-navigation {
position: fixed;
top: 100px;
left: 100px;
}

External Linking and Bookmark Support

An opener detection system is included that allows you to set up links with special parameters that will load a page and also trigger a specific image in a FSS widget on that page. The opener will look for the FSS widget number, an underscore, and the FSS content slide number.

There are 2 methods available:

The opener detection system also includes the ability to open automatically when the page first loads into the browser.. The method is the same as above except the fss will change to fso:

Note: This feature is meant to be used on links to your page from external locations ONLY —not on links that are in your page. To control the Slide Show from links on the SAME page use the included FSS Control Actions.

FSS Control Actions

The system also includes control actions that can be used to create Fullscreen Slide Show actions on links located anywhere on your page, or that can be used in by other scripts to control FSS actions.

There are times when you may want to manually assigning a control action, either for use in external scripts or when building pages dynamically. The control action function call will look like this:

P7_FSSctrl('p7FSS_1','play')

  1. The first argument is the ID of the FSS root div.
  2. The second argument is the control action you wish to apply.

The HTML markup for a typical text link with a control action applied would look like this:

<a href="#" onclick="P7_FSSctrl('p7FSS_1','play')">Play</a>

The available Control Actions are:

Support

See our main support page for contact information. PVII support never ends.