Overview

Insert one or more images with rollup, rolldown, or static content overlays. Content can also be set to appear as inline blocks below the image—a useful feature if you need to show a significant amount of content.

The image you insert will fill the width of its containing element. If you add multiple images inside the Peekaboo UI, the images will appear in a responsive grid.

The capture below shows the UI in Modify Mode. The image is inside a PKB instance, and since it's a single image inside a very wide row, the width basis is set to a pixel value equal to the natural width of the image + 10px, which allows the rollup information to match width with the image.

 

Since this PKB instance displays a single image inside a very wide row, the width basis is set to a pixel value equal to the natural width of the image + 10px, which allows the rollup information to match width with the image.

Installing Peekaboo

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.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Accessing Peekaboo

There are 3 ways to access Peekaboo. Choose the one most suitable to your workflow. When you open an interface, the system will detect the appropriate mode (Insert or Modify).

When you are Creating a new PKB instance, place your cursor on your page where you want to build the grid. If Modifying an existing PKB instance, place your cursor anywhere inside the grid and use one of the 3 methods below to open the UI. The system always open in the correct mode.

1. Insert Bar

Switch to the PVII category. Peekaboo is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. Peekaboo is the last one in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Peekaboo by PVII

Item Box Options

These options apply to the individual PKB boxes and, where relevant, will override similar Global settings.

Width Basis: Set the Width Basis for the selected image only. Choose pixels (px) or percent (%).

Vert. Align: If you have more than 1 image, and they are different heights, Set Vert. Align to Top, Middle, or Bottom to achieve your desired look.

Limit Image Zoom to Natural Size: Select this option, which is un-checked by default, to prevent your image from zooming larger than its natural size.

Box User Class: Assign a custom user class to the image box. Use the class to assign custom styling attributes. The class name must not include the text string "pkb".

Info Rollup Options

Info Rollup: By default, we insert a single line of placeholder text in the box. You can make quick edits in the UI, but keep in mind that you are actually editing/writing HTML markup. We suggest using this box for reference only, while editing your content directly in Dreamweaver Design View, where the Info Rollup content will always appear as an editable area just below your image.

Vert Align: This option aligns the vertical position of your rollup content. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing.

Horiz Align: This option aligns the horizontal position of your rollup content. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing.

Show as Overlay: This option is checked by default. If un-checked, your Info Rollup content will appear below the image, visible at all times, and will not roll up or down. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing.

Animate: This option works in concert with the Show as Overlay option. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing. Note: If Show as Overlay is un-checked, animation is always suppressed.

From Top: By default, your Info Rollup rolls up, from the bottom. Enabling the From Top option, will cause your info to roll down from the top. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing.

Style: Choose a color for your Info Rollup. Use the All button to assign your setting to all rollup content in the PKB instance you are currently editing.

Info User Class: Assign a custom user class to the Info Rollup. Use the class to assign custom styling attributes. The class name must not include the text string "pkb".

Global Options

Global options apply to the entire PKB instance you are currently editing. Where applicable, these setting can be overridden for individual images by using the options within the Item Box Options section.

Width Basis: Set the width basis for each image in your PKB instance, in pixels or percent. Hint: If you have 8 images and want to display 4 on a row, set the width basis to 25%. Your browser will then display 4 images to a row when your browser window is wider than 900 pixels. At lesser browser window widths, media queries will adjust your image box widths in an appropriately responsive manner.

Full Cover: Set by default, this option causes your info rollup, when in overlay mode, to fill the entire box height. Un-checking this option will cause the height of your info rollup to be based on the amount of content inside.

Arrow Style: Choose None, Dark or Light arrows.

Enable Mouse Actions: This option (enabled by default) sets your PKB rollups to be triggered on MouseOver on devices that use a mouse. If you disable this option, triggering on mouse-enabled devices will occur onClick. Touch devices will continue to work as expected on touch (tap).

Allow Only One Active: This option (enabled by default) ensures that on touch-enabled devices, triggering a rollup will cause the previously triggered rollup to hide. Note: If you disable this option, it will affect all touch devices, as well as mouse-enable devices if Enable Mouse Actions has also been disabled.

Root User Class: Assign a custom user class to the root PKB DIV. Use the class to assign custom styling attributes. The class name must not include the text string "pkb".

Matte: Optionally assign a colored matte around the entire PK instance.

Root Borders: Assigns a border around the entire PKB instance.

Section Borders: Assigns a border around each image box in PKB instance.

Rounded: Assigns rounded corners.

CSS Editing

Peekaboo links a single style sheet to your page: p7PKB-01.css

Given the options available in the user interface, there should never be a reason for you to edit the styles. Should you need help with CSS, and you cannot figure it out, please contact us via one of the methods listed below.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.