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) | MBX Home | User Guide | Batch Processing Images | Displaying Video

Magic Box User GuideThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

Forget Lightbox. Forget Fancy Box. Mag Box is the ultimate modal window popup tool for Dreamweaver. Magic Box by PVII redefines what a modal lightbox can be. In fact, it is the most advanced widget of its kind. Mobile-friendly, responsive, and loaded with advanced features—nothing else comes close. What can you do with it? You can create a thumbnail-driven gallery capable of displaying images, videos, and content slides. You can even launch a Magic Box slide from a text link or image already on your page.

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.

Dreamweaver CC 2015 Extension Installation Information

The latest Dreamweaver release contains some rather serious bugs in terms of extension management.

If you are doing a clean install—that is, if your computer does not already have a prior CC-series version installed, then it is a simple solution. Before installing Dreamweaver CC 2015, install Extension Manager CC. After Extension Manager CC is installed, you may then install Dreamweaver CC 2015 and you will be able to install your extensions.

If you already have a CC-series version installed, we recommend that you disable auto updating by Adobe and retain your previous version of Dreamweaver. If the update has already occurred, use Adobe's desktop Cloud application to roll back versions:

See Article by Adobe

PVII Extension Manager for Dreamweaver CC 2015 Windows only

http://www.projectseven.com/products/em-test.htm

Double-click to install. You will get a security alert because we have not yet digitally signed it, but simply click "Install Anyway" (or similar). After installation, make sure you restart Dreamweaver CC 2015. To access the EM, open Dreamweaver CC 2015 and you will find it on the Commands menu. The EM is launch-able only via CC 2015, but when you install an extension (or uninstall) it will effect CC and CC 2014 as well. Only those extensions installed via our EM will appear in the listing. If you have an extension previously installed through Adobe's EM, simply re-install it using ours and it will appear in the listing.

Mac users may use this open source ZXP installer:

http://zxpinstaller.com/

As we continue to monitor Adobe Creative Cloud versions for bugs, we will post additional information on this page:

http://www.projectseven.com/products/cloud-install.htm

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.

Using Magic Box

Establish the Insertion Point:

-Click at the location on your page where you wish to add the Magic Box.

Open the MBX user interface

-Click the MBX icon Icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel.

Classic Dreamweaver Insert Bar

The Insert Bar

Dreamweaver Insert Panel

CS4 Insert Panel

Note: The interface is sensitive to the insertion point. If your cursor is anywhere inside an existing MBX system the Modify interface will open instead.

The MBX interface will open in the Create New Magic Box mode.

The Create Interface

You can create more than one Magic Box on your page. Add as many as you like.

Asset Folders

When you create a Magic Box, the system creates an assets folder named p7mbx at the same level as the page that contains your Magic Box. This folder will contain the MBX JavaScript file and the relevant Magic Box style sheet, as well as an img sub-folder that contains the toolbar control background images used by the CSS.

PMM file folder

When you publish your site, make sure you upload the entire p7mbx folder.

Modifying an Existing Magic Box

You can modify any of the existing MBX systems on your page at any time.

-Click anywhere inside the existing Magic Box or Magic Box Trigger

-Click the MBX icon The icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel

The MBX user interface will open in the Modify Existing Magic Box mode.

The Modify Interface

Configure your Magic Box items and options and then click OK.

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the Magic Box being modified will also be displayed.

Caption

The Caption can be displayed at the top of the slide or at the bottom of the slide, adjacent to the slide or overlaid. Select None if you do not want to display the Caption.

Auto Caption

The MBX system includes the ability to produce automated captions based on a pre-defined format. The default format is * \ **, where star is the slide number and ** is the total number of slide. The default format for the 4th slide of an MBX system with 22 slides would look like this: 4/22

Additional pre-defined formats are available in the p7MBXscripts.js file, at line 27:

autoCaptionFormat: ['* \\ **', 'Slide * of **', 'Image * of **', '* of **', 'Slide# *'],
autoCaption: 0,

The autoCaptionFormat line contains the pre-defined formats, separated by commas. The caption format that the MBX system will use is determined by the value of the autoCaption line. Zero (0) is the first format, 1 would be the second format, 2 would be the third format, and so on. For example, if you wish to have an auto caption that will display Slide 3 of 22 then set the autoCaption value to 1.

autoCaption: 1,

Description

The Description can be displayed at the top or bottom of the slide, or overlaid inside the slide. If there is no entry in the Description box for a particular slide, a Description will not display.

Show Thumbnails

Enable this box if you wish to have a thumbnail matrix displayed on the page. If you turn this feature on, then later turn it off, any thumbnails you have assigned, either manually, or via the Import system, will be removed.

Slides

This box displays each slide in the Magic Box—one line for each slide. Select (click) the line you wish to act on.

Add Image Slide

Click the Add Image Slide button to add a new image slide. A new line will be created with the default text "New Image". The new line will be created immediately after the currently selected line. Click the Image Path Browse button to assign an actual image.

Add Content Slide

Click the Add Content Slide button to add a new content slide. The system will create a new content DIV, which will appear in Dreamweaver Design View. This DIV will contain placeholder content ready for you to replace with your own. You can edit the content directly in Design View, using Dreamweaver's normal editing features.

Delete Slide

Click the Delete button to remove the selected slide.

Up

The Up button will move the selected line in the Slides list up one row. Successive clicks will keep moving the line up, one row per click, until the line is at the top of the list.

Down

The Down button will move the selected line in the Slides list down one row. Successive clicks will keep moving the line down, one row per click, until the line is at the bottom of the list.

Import Images

Use the Import system if you have more than a few images to add. The Import system will allow you to quickly select and add multiple images from any folder. See the Import Images topic for complete details on using the Import system. The imported image(s) will be inserted immediately after the currently selected image in the Image list.

Note: We have also included a short tutorial that will show you how to batch process images (full-size and thumbnails) in Fireworks.
See Batch Processing Image in Fireworks now...

Image Path / Browse...

Enter the path to your image, or use the Browse button to open the Select the Magic Box Image dialog box. You can change the image at any time by selecting the image in the Images list and clicking the "Browse..." button. Valid image types are: .gif, .jpg, and .png.

Fit

The Fit option is available for image slides only. Check this option if you want your images to be displayed no taller than the browser or device window. Images will be scaled in their proper aspect ratio, and in exact proportion to their natural size, so that the entire image fits within the available browser screen. When this option is active, the top offset setting is ignored and the image slide will be vertically centered.

Tip: If you use the Fit mode and you have a description set to show below the image, the description might be partially off-screen. To mitigate this, set your Description to render mode: Overlay Bottom.

Max Height

The Max Height box allows you to set the maximum rendered height for the current image. This feature is very useful when you have very tall images. Do not use this option if you are using the Fit option.

Thumbnail Path / Browse...

If you are using thumbnails, enter a path to the thumbnail image in the Thumbnail Path box. You can also use the Browse button to the right of the box to browse to your thumbnail image in a dialog box. Note that if the Show Thumbnails box is unchecked, the Thumbnail Path box will be grayed out (inactive).

Included Special Icons

If you are going to be displaying thumbnails, and your MBX slide show contains one or more content slides, you can use one of two specially designed thumbnails included in the p7mbx/img folder:

content-thumb.png

video-thumb.png

Image Link Path / Browse...

The Image Link Path box allows you to set a hyperlink on the full-size image inside an image slide. When the image is clicked the system will launch the linked page. Click the Browse button to open the Select the File to Link dialog box and choose the html page that you wish to link to. The 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.

Link Title

This box allows you to add a title attribute to the Image Link, which will display as a small pop up near the cursor when the user mouses over the image. Enter a short description in plain text.

Target

You can enter a target attribute for the image link if you want to open the linked page in a new tab or browser window, or you would like to target a specific <iframe> or frames-based page.

Caption

This box will become active if you've chosen to show a Caption. By default, the system will use the image file name to pre-supply a caption for you. You can edit the pre-supplied caption as you wish. Note that the Caption element supports plain text only. You cannot enter HTML markup in the Caption box. You can add captions for some or all of your images. Note that if you select the Auto Caption option, it will override any entry made directly into the Caption box.

Content Width

Each content slide can be set to a custom width to meet your design needs. The width option is specified as a percentage in order to maintain the responsive/adaptive nature of the widget.

Max-Width

Each content slide can also be assigned a max-width. The max-width setting will ensure that your content slide never exceeds a certain width, no matter how wide the screen might be.

Description

Enter an optional description for the currently selected image. 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 MBX Description box.

Leave this box blank if you do not want a description box to display.

Options

These settings are applied to the MBX system you are currently editing. Other MBX systems on the same page will not be affected and will retain their unique options.

Startup

Start with Slide...

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

Top Offset

This allows you specify a top position, in pixels, for the MBX display box. The MBX display box top edge will always start at this point from the top of the browser window and allows you to coordinate the MBX box position with your page content position.

Overlay

This option, enabled by default, allows you to choose whether to employ a page-dimming overlay.

Launch on Page Load

Enable this option to have your Magic Box run automatically when the page first loads.

Controls

Show Toolbar

Enable this box to show a persistent toolbar fixed to the top of the browser window.

Show Previous/Next Arrows

Enable this option to display large arrows that appear on the left and right edges of your slide.

Close Button on Slide

Enable this option to display a Close icon (X) at the top right corner of the slide.

Enable Close on Click

This option is checked (enabled) by default, and means that clicking off the slide will close the Magic Box popup. Un-check this option to make users to use the close button or the Escape key.

Toolbar

Display previous and next icons on the toolbar.

Pause/Play

Display pause and play icons on the toolbar.

Close

Display a close icon on the toolbar.

Pause on Mouse Over

Select the Pause on Mouse Over option if you want the Auto Play to pause when the user's mouse is over the slide. The Auto Play will automatically resume once the mouse is moved away from the image.

Play Mode

Auto Play

Enable this option if you want the Auto Play to start when the MBX box opens.

Display Time

This controls the amount of time each image is displayed during the rotation, in seconds. The default is 8 seconds.

Pause on Control Action

With this box checked (the default) any click on the controls buttons will shift the Auto Play into Pause mode. The Auto Play will not resume until the Play button is clicked.

Play Continually

This option allows the show to play through all of the slides indefinitely. It will not stop unless the user clicks the pause button.

Number of Cycles

Enter the number of times the show will cycle through all Slides.

End Cycle On

This allows you to choose the ending image for the cycle. When the assigned number of cycles has completed, the system will stop on:

Animation

Set the animation method, choosing from:

Duration

Set the animation duration. The default 600ms (6/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.

Style

MMX comes with two pre-defined themes.

Light

The light theme uses white icons and controls over a dark background, and a light overlay.

Dark

The dark theme uses black icons and controls over a light (nearly white) background, and a dark-shaded overlay.

Choose the one that best matches the design of your page.

Matting

Add matting (white-space) to the MBX structure.

Rounded

Add rounded corners to the MBX structure.

Shadow

Add a shadow to the the outer MBX structure.

Border

Add a border to the the outer MBX structure.

Command Buttons

OK

When you are done, click the OK button to build the Magic Box or execute your edits.

Remove

Click the Remove button to remove the current MBX widget from your page.

What will be Removed

The system will remove the html markup of the selected widget from your page. If you are removing the only MBX widget on your page, the linked CSS and JavaScript files will also be removed.

What will Not be Removed

The system will not remove the p7mbx folder, which contains the widget-related assets (images, JavaScript file, and CSS file). 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.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working in the MBX interface.

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 slide in an MBX widget on that page. The opener will look for the MBX widget number, an underscore, and the MBX slide number.

There are 2 methods available:

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 Magic Box from links on the SAME page use the included MBX Control Actions described in the next section.

MBX Control Actions

The system also includes control actions that can be used to create Magic Box actions on links located anywhere on your page. These actions can be used by other scripts to control MBX actions.

The control action function call will look like this:

P7_MBXctrl('p7MBX_1','play')

  1. The first argument is the ID of the MBX 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_MBXctrl('p7MBX_1','play')">Play</a>

The available Control Actions are:

Using the Behavior to create Control Actions

Creating a new Control Actions behavior

  1. Select (click) a text link or Slide to act as the behavior Control.
  2. Open your Dreamweaver Behaviors Panel (Shift + F4)
  3. Click the plus sign (+) on the Behavior Panel.
  4. Choose Studio VII > Magic Box > Control Actions to open the interface.
  5. Select the widget you wish to act on.
  6. Select the action.
  7. Click OK to apply the behavior.

Modifying an existing Control Actions behavior

  1. Select the element that contains an existing Magic Box Control behavior.
  2. Double-click the Magic Box- Control Actions behavior in the Behaviors Panel to open the interface.
  3. Select the widget you wish to act on.
  4. Select the action.
  5. Click OK to apply the revised behavior.

The Interface

The Magic Box -Control Actions interface allows you to select an action to apply.

The Interface

The Interface Items

Magic Box ID

The interface contains a listing of all of the Magic Box widgets on your page. The list will display the ID of each widget. Select the Magic Box you want to control.

Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with p7MBX. The opening DIV tag looks like this:

<div id="p7MBX_1" class="p7MBX-01 p7MBX p7MBXnoscript transparency rounded matting light">

Action

Select the action you want to apply.

Actions List

First Slide

This will display the First Slide.

Previous Slide

This will display the Slide that comes before the currently displayed Slide.

Play

This will Start or (resume) the Auto Play Mode.

Pause

This will Stop (or pause) the running Auto Play mode.

Next Slide

This will display the Slide that comes after the currently displayed Slide.

Last Slide

This will display the last Slide.

Close

This will close the Magic Box presentation.

Open Slide Number...

This allows you to select the exact Slide to be displayed by entering the Slide Number.

Slide Number

This box is active only when the Open Slide Number action is selected. Enter the number of the Slide you wish to display.

PVII Magic Box -Convert Lightshow Magic

The Magic Box system is designed to automatically convert (Upgrade) an existing Lightshow Magic widget to the Magic Box widget. Converting is as easy as clicking inside the existing Lightshow Magic widget and clicking the Magic Box icon.

The Magic Box user interface is designed to open to the correct mode based on your current insertion point in the document:

Whenever your current insertion point is inside of an existing Lightshow Magic, the Convert from Lightshow Magic interface will open.

The Conversion interface

Choose an Action

Convert to MBX

Click this button to launch the Convert (Upgrade) process. The system will open the Magic Box Modify interface populated with the existing LSM image, thumbnail, content slide, caption, description and image link data from the Lightshow Magic system. The user options will be not be transferred, they will be set to default MBX state.

When the Magic Box interface opens make any additional changes. Be sure to set each of these options as you require, then Click OK to finish the Convert process.

The Conversion Process:

Keep Original LSM

Click this button abort the conversion process. The existing Lightshow Magic widget will not be altered.

PVII Magic Box -Trigger

A Magic Box Trigger can easily be attached to existing page links. The MBX system can even create the link for you.

There are four ways to use the tool:

  1. Select an existing text or image link on your page
  2. Place your cursor where you would like to insert a new MBX Trigger link
  3. Select a string of text
  4. Select an image

Before you begin, be sure that you have already created a Magic Box system on your page.

Editing Triggers

Once an MBX Trigger is created, you can edit the associated Magic Box instance by selecting the trigger and then launching the main MBX UI, which will open in Modify Mode.

Removing Links

To remove an MBX Trigger link, use the Remove button in the Modify Trigger interface.

Inserting a New MBX Trigger Link

Establish the Insertion Point:

--Click inside an existing page link, or click on the page where you want to add the MBX Trigger link, or select the text which you want to turn into an MBX Trigger link, or click on the image to which you want to apply the MBX Trigger link action.

Open the MBX Trigger Link user interface

-Click the MBX icon Icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel.

Classic Dreamweaver Insert Bar

The Insert Bar

Dreamweaver Insert Panel

CS4 Insert Panel

The MBX Trigger interface will open.

The Create Interface

You can create more multiple Magic Box Triggers on your page. Add as many as you like.

Modifying an Existing Magic Box Trigger

You can modify any of the existing MBX systems on your page at any time.

-Click inside the MBX Trigger link that you wish to modify.

-Click the MBX icon The icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel

The MBX Trigger user interface will open in the Modify Existing Magic Box Trigger mode.

The Modify Interface

Configure your options and then click OK.

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the Magic Box being modified will also be displayed.

Magic Box System ID

The interface contains a listing of all of the Magic Box widgets on your page. The list will display the ID of each widget. Select the MBX widget you want to control.

Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with p7MBX. The opening DIV tag looks something like this:

<div id="p7MBX_1" class="p7MBX-01 ... >

Trigger Text

If you are using an insertion point that is not inside an existing link, the default MBX Trigger text will appear in the box. If, on the other hand, you have opened the UI with an existing link having been selected, the Link Text will be the text of your existing link.

Trigger Slide Number

Enter the slide number that you wish to show in the Magic Box display.

Command Buttons

OK

When you are done setting your desired options, click the OK.

Remove

Click the Remove button to remove the current MBX Trigger from your page.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working in the MBX Trigger interface.

Importing Images

Use the Import Images system to quickly import images from a folder on your hard drive or any drive connected to your computer. All images in the folder you select will be returned to the MBX interface, allowing you to quickly select one or more images from the listing. If the images are stored in a location outside of your currently defined Dreamweaver Site, you will be prompted to copy those images into your site.

Open the Magic Box Import Images interface

The Import Images interface will open whenever you click on the Import button in the main Magic Box interface.

Click the Import button to open the Import Images interface.

The MBX Import Images window will open:

The Import Images interface.

1. Set Import Session Options

Image File Types -Before browsing to your image folders you can opt to set a filter for specific Image File Types. The Image File Type list can be handy if you've got many different types of image files in your folder but you only want to import one specific type, such as JPG images.

Fullsize Images Only -You can choose to import only your full size image or your fullsize images and their corresponding thumbnails. Leave this box unchecked if you have selected the Show Thumbnails option in the main MBX interface.

2. Select Image folders

-In the Full Size Images Folder box use the handy Browse button to locate the folder.

The Choose Folder dialog

-Browse to the folder where your full-size images are and select any image. Then click OK. All the images in that folder will appear in the Full Size Images column:

3. (Optional) Point to your Thumbnail Images Folder

If you wish to use the "Show Thumbnails" feature of the MBX system you can add the corresponding thumbnail images in this step. Browse to the folder where your thumbnail images are and select any image. Then click OK. All the images in that folder will appear in the Thumbnail Images column:

In many cases, the internal logic used by the MBX Import utility will establish a matching criteria automatically. In the above example, the thumbnail image names are the same as the fullsize names, and they are in separate folders. Note that the Full Size Image and Thumbnail Image Previews match.

Using the Full Size Image Filename Filter Criteria

The thumbnail filename filter system works by looking at each full-size image, in the folder you specify, and then finding a matching thumbnail image in the thumbnail folder you specify. The matching system can use a simple one-to-one file name match, or it can use search parameters to define the matching thumbnail file name. In addition to automated matching, the system allows you to manually select the thumbnail for any full-size image.

Matching Search Parmaeters

If, for example, your full-size images all ended with "-large" and you entered -large in the Filter Out Character(s) at End of Filename box, the system would find a match between a full-size image named pinkflower-large.jpg and a file named pinkflower-small.jpg in your thumbnail images folder.

If you are processing new images for your show, the most efficient workflow is to store your full-size and thumbnail images in separate folders, with identical file names.

4. Selection/Action Buttons

You need to select one, several, or all of the images in the listing. You can CTRL Click to select (or deselect) images individually or Shift Click to select a group of images. If you want to select all of the images in the listing you can click the Select All button.

To deselect all images click the De-Select All button.

To assign (or re-assign) thumbnails individually to a full-size image, click the Assign Individual Thumbnail Image button. A browse dialog will open to help you locate your image and select it.

To remove images from the listing, click the Remove Image(s) from Listing button. All images selected at the time you click the button will be removed from the listing.

5. Complete the Import

Click the OK button to complete the import and return your selected images to the main MBX UI.

The Interface Control Buttons

OK

Once you have selected the images you wish to add to the Magic Box, click the OK button. The system will verify your selections and alert you to any problems that need your attention. If there are no problems the images will be imported. The Import interface will close and return you to the main Magic Box interface, with the newly imported images in the Slides list.

Whenever you choose an image folder that is outside of your currently defined Dreamweaver Site the MBX system will display this option box:

The Site Warning dialog box

The system can conveniently copy the selected images to a folder within your currently defined Site. Click the OK button and the system will copy the images to a newly created folder inside the same folder as your current page. The folder is named: /mbx_images, fullsize images will be added to a /fullsize sub folder and thumbnails will be in the /thumbs sub folder

If you do not want the system to copy the images then click the Cancel button. The system will abort the Import process and return you to the main MBX interface since these images cannot be linked to when the page is placed on your web server.

Note: Be sure to upload this folder to your web server when publishing your MBX page(s).

Cancel

Click the Cancel button to completely abort the current Magic Box Import operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working with the Magic Box interface.

CSS

In the vast majority of cases, you will not need to edit MBX CSS at all. If you do have a need, and cannot determine the CSS needed to achieve that need, then please do contact us. See our main support page for the accepted ways to access PVII support.

Support

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