Image Rotator Magic 2 (IRM2) is an automated Dreamweaver widget that makes it easy to create engaging Image Rotators with engaging animations, usable and powerful features, and efficient image caching.
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.
Look for the extension installer file p7_IRM2_215.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.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud.
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
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.
The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.
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.
When you create a Rotator, the IRM2 system creates an asset folder in your defined site called p7ir2. When you publish your page, make sure you upload that folder to your server.
Click on your page where you want the rotator to appear.
After establishing your insertion point, click the IRM2 icon in the PVII section of your Dreamweaver Insert Bar:
Or Insert Panel:
The interface will open..
You can create more than one rotator on your page. Add as many as you like.
There are five image handling buttons:
Use this button to add one image, at a time, to your Rotator. 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.
This button will delete the selected image element in the Images list
This button will move the selected image element in the Images list up.
This button will move the selected image element in the Images list up.
The Import Images button allows you to add multiple images to your Rotator. When you click the button, the IRM2 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 box:
Use shift-select, CTRL-select, or the Select All button to choose which images to import.
Click OK to complete the import.
Enter the path to your image
Use the Browse button to open the Select the Image Rotator 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.
The Image Link Path box allows you to set a hyperlink on the image. 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.
Note: 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.
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.
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.
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 IRM2 Description box.
Leave this box blank if you do not want a description box to display.
Position the optional Description on your screen, in one of five locations:
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.
Choose from four options to set an animation mode for your image Description:
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.
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.
Select this option if you wish to have the system select your images in random order. Each time the page loads into the browser a random image order will be used.
Check this box if you want to have the Rotator automatically start playing when the Image Rotator first opens.
As of version 2.1.5, we've included a special Max-Height option in the IRM2 interface. This options allows you to display mixed-orientation images, or small images that would not look good scaled up to container width.
There are various control and toolbar permutations that you can opt to show.
Select the Pause on Mouse Over option if you want the Rotator to pause when the user's mouse is over the image. The Rotator will automatically resume once the mouse is moved away from the image.
With this box checked (the default) any click on the controls buttons will shift the Rotator into Pause mode. The Rotator will not resume until the Play button is clicked.
Choose the appropriate control color theme: Light or Dark.
Display a toolbar, which can display one or more icons, which you can select from the Toolbar options section, below.
Choose how you would like the Toolbar displayed:
Display previous and next icons on the toolbar.
Display pause and play icons on the toolbar.
The Paginator will create a series of icons, one for each image, in a horizontally oriented list. These will act as trigger links to display the associated image. Choose the display option from the drop down list.
Choose how you would like the Paginator displayed:
Display a Pause/Play icon in the Paginator bar.
Select the Paginator icon type: Circle or Square
Enable this option to display large arrows that appear to the left and right of your image.
Choose the appropriate color theme for your Previous/Next arrows: Light or Dark.
This controls the amount of time each image is displayed during the rotation, in seconds. The default is 8 seconds.
This controls the amount of time the first image is displayed. During page load it is often desirable to allow the first image to be displayed slightly longer than the other images to give the rest of the page assets a chance to load. The default is 12 seconds.
This option allows the Rotator to play through the images indefinitely. It will not stop unless the user clicks the pause button.
Enter the number of times you wish Rotator to play through all of the images.
This allows you to choose the ending image for the Rotator cycle. When the Rotator has completed the assigned number of rotations it will stop on:
Set the animation for your image slides. Choose from:
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.
This option allows you to add rounded corners to the outer rotator structure.
This option allows you to add shadows to the the outer rotator structure.
This option allows you to add a border to the the outer rotator structure.
You can edit the settings and options for any Rotator on your page by opening the IRM2 interface for that Rotator.
To delete an existing Rotator on the page, open the IRM2 UI, as if you were going to edit the Rotator. 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.
The system will not remove the p7ir2 folder.
There is one style sheet that comes with IRM2 and it is automatically linked to your page when you create a Rotator. There should not be a need to edit CSS. If you are an advanced user, or have a special need, please contact customer support and we'll be happy to assist.
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 IRM2 widget on that page. The opener will look for the IRM2 widget number, an underscore, and the IRM2 image 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 Image Rotator from links on the SAME page use the included IRM2 Control Actions, described below.
The system also includes control actions that can be used to create Image Rotator Magic 2 actions on links located anywhere on your page, or that can be used in by other scripts to control IRM2 actions.
Available Control Behavior 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:
The HTML markup for a typical text link with a control action applied would look like this:
<a href="#" onclick="P7_IR2ctrl('p7IR2_1','play')">Play</a>
The available Control Actions are:
The Image Rotator Magic 2 -Control Actions interface allows you to select an action to apply.
The interface contains a listing of all of the Image Rotator widgets on your page. The list will display the ID of each widget. Select the Image Rotator 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 p7IR2. The opening DIV tag looks like this:
<div id="p7IR2_1" class="p7IR2-01 p7IR2 rounded shadow border-dark">
Select the action you want to apply.
First Image: This will display the First image.
Previous Image: This will display the image that comes before the currently displayed image.
Play: This will Start or (resume) the Auto Play Mode.
Pause: This will Stop (or pause) the running Auto Play mode.
Next Image: This will display the image that comes after the currently displayed image.
Last Image: This will display the last image.
Open Image Number: This allows you to select the exact image to be displayed by entering the Image Number.
Image Number: This box is active only when the Open Image Number action is selected. Enter the number of the image you wish to display.
The Image Rotator Magic 2 system is designed to automatically convert (Upgrade) an existing Image Rotator Magic 1 widget to the Image Rotator Magic 2 widget. Converting is as easy as clicking inside the existing Image Rotator Magic 1 widget and clicking the Image Rotator Magic 2 icon.
The Image Rotator Magic 2 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 Image Rotator Magic 1, the Convert from Image Rotator Magic 1 interface will open.
Click this button to launch the Convert (Upgrade) process. The system will open the Image Rotator Magic 2 Modify interface populated with the existing IRM1 image, description and image link data form the Image Rotator Magic 1 system. The options will also be reflected in the interface.
When the Image Rotator Magic 2 interface opens make any additional changes and and set any new options as desired, then Click OK to finish the Convert process.
Click this button abort the conversion process. The existing Image Rotator Magic 1 widget will not be altered.
See our main support page for contact information. PVII support never ends.