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.

Tandem Gallery

Image Rotator Magic inside Horizontal Glider Magic

Link to Finished Page

PVII tools and widgets bring with them a wonderful synergy allowing you to use them in tandem to develop amazing visual interfaces for your web page.

Image Rotator and Horizontal Glider in Tandem

Love and marriage, horses and carriages, and now—IRM and HGM. This tutorial will show you how to leverage the power of 2 extraordinary PVII tools (Image Rotator Magic and Horizontal Glider Magic) to create a wonderfully efficient and downright gorgeous image gallery. You'll be creating a Horizontal Glider widget with 4 panels. Inside each panel will be an image gallery powered by Image Rotator Magic (See the finished page).

Requirements

This tutorial Requires Image Rotator Magic version 1.2.1 and Horizontal Glider Magic. If you have an older version of either product, please visit our Updates page now. Updates are free.

Before you begin

We've prepared a folder of images, as well as a starter page to use for your gallery. Please download the folder and unzip it. The zip archive contains a workpage html document and a folder of images. Create a new folder inside your local Dreamweaver site and name it pvii-tandem-gallery. Move the unzipped workpage and images folder inside. Now you're ready to go.

1. Create the Horizontal Glider

Open workpage.htm and position your cursor inside the wrapper DIV.

Note: The dotted yellow border is a default Dreamweaver Visual Aid that shows CSS Layout Outlines. If you don't see the outline it simply means that you have turned off that feature. To turn it back on, Choose View > Visual Aids and select an option.

Backspace over the word "wrapper" until no letters remain. Leave your cursor there and open the Horizontal Glider Magic interface.

Add 4 Panels and name them Bugs, Lions, Reptiles and Polar Bears.

Uncheck Prev/Next and set Trigger Links to Above Panel. Leave all other settings default, except for Style Theme, which should be set to 04-Basic.

Click OK to create the Horizontal Glider.

The Triggers text is black so it cannot be seen against the black page background. We'll fix that in a moment.

Note: While we could have selected an HGM theme that looks a bit better by default against a black page, we're going to teach you how to edit the Basic style theme to create a white photo frame look.

2. Edit the Horizontal Glider CSS

We'll need to make a few simple CSS edits to give our Glider a white photo-frame look. Open your p7HGM04.css file

Assign padding and a white background to the root HGM element

Locate the .p7HGM04 rule and change it to:

.p7HGM04 {
padding: 20px 20px 10px 20px;
background-color: #FFF;
zoom: 1;
}

remove the border from the HGM Viewport Wrapper

Locate the .p7HGM04 .p7HGM_viewport_wrapper rule and change it to:

.p7HGM04 .p7HGM_viewport_wrapper {
position: relative;
border: 0;
}

Remove all padding from the HGM Content panels

Locate the .p7HGM04 .p7HGM_panel_content rule and change it to:

.p7HGM04 .p7HGM_panel_content {
font-size: 13px;
line-height: 1.5em;
padding: 0px;
}

Increase the bottom margin on the HGM Trigger DIV

Locate the .p7HGM04 .p7HGMtrig rule and change it to:

.p7HGM04 .p7HGMtrig {
overflow: hidden;
font-size: 14px;
zoom: 1;
margin-bottom: 12px;
}

Save and close style sheet. Your page will now look like this:

Don't worry about the gray text. You'll be removing it when you create your Image Rotator galleries.

3. Create the IRM galleries

Place your cursor inside the first HGM content panel and click its <p> tag on the Tag Selector bar that runs along the bottom of your Dreamweaver window—just above the Property Inspector.

Press your Delete key to remove the paragraph, but leave your cursor inside the now-empty content panel.

 

Open the Image Rotator Magic interface

Click the Import button. The Image Selection dialog will open.

Click the Browse button. Browse to your pvii-tandem-gallery/images folder.

Since you are selecting a folder, and we are using the only folder-selection dialog Dreamweaver makes available to us, you might see a message stating that No items match your search.

You can ignore the message and click Select. The Images from your folder (even though you can't see them yet) are returned to the Image Selection window.

Use Shift + Click to select the 3 insect images.

Click OK.

You are returned to the main IRM interface—along with the 3 insect images, which are added to the images list.

De-select the Paginator option and select Toolbar: Below Image.

Do add a brief description in the Description box—the gliding description popup is a very cool effect!

Leave all other options (except Style Theme) set to their default values.

Set Style Theme to 02-Light Toolbar

Click OK to create the IRM gallery.

4. Create the remaining 3 galleries

Repeat the steps above to add IRM galleries in the second, third, and fourth content panels of your HGM widget. Use the Import facility to add the 3 lion images to the second gallery, the 3 reptile images to the third gallery, and the 3 polar bear images to the fourth gallery. Remember to:

  • Delete the default paragraph inside the content panel before you insert the IRM gallery.
  • De-select the Paginator option and select Toolbar: Below Image.
  • Add a brief description in the Description box (if you want to).
  • Leave all other options (except Style Theme) set to their default values.
  • Set Style Theme to 02-Light Toolbar

Your page should now look like this:

5. Assign the IRM Toggler Function to the HGM Triggers

The Image Rotator Magic script contains a powerful function that you can use when deploying multiple Rotators inside the panels of PVII widgets such as Horizontal Glider Magic (or any of our other widgets). This function allows the triggers of your widget to automatically pause an IRM Rotator when the panel in which it resides is hidden.

The function is assigned as a REL attribute on the <a> tag of the HGM trigger. You need to set the attribute in Code View. The triggers for your HGM widget look like this

<li><a href="#p7HGMpc_1_1" id="p7HGMt1_1">Bugs</a></li>
<li><a href="#p7HGMpc_1_2" id="p7HGMt1_2">Lions</a></li>
<li><a href="#p7HGMpc_1_3" id="p7HGMt1_3">Bears</a></li>
<li><a href="#p7HGMpc_1_4" id="p7HGMt1_4">Reptiles</a></li>

Add an REL attribute to the <a> tag and set its value to the ID of the Rotator in its panel:

<li><a href="#p7HGMpc_1_1" id="p7HGMt1_1" rel="p7IRM_1">Bugs</a></li>
<li><a href="#p7HGMpc_1_2" id="p7HGMt1_2" rel="p7IRM_2">Lions</a></li>
<li><a href="#p7HGMpc_1_3" id="p7HGMt1_3" rel="p7IRM_3">Bears</a></li>
<li><a href="#p7HGMpc_1_4" id="p7HGMt1_4" rel="p7IRM_4">Reptiles</a></li>

Note: You'll find the ID for your IRM Rotator on its opening tag: <div id="p7IRM_1" class="p7IRM02">.

Save your page and preview in a browser.

Now only the visible IRM gallery will play. The remaining galleries, in hidden HGM panels, will automatically be paused. Of course, you can still use the IRM toolbar to manually pause or play a gallery.

And it's supremely efficient, too

For expediency's sake we added just 3 images per gallery—but Image Rotator Magic is so efficient that you could add 50 or more images to each gallery without affecting page load times. This is because only the first images in each gallery are actually embedded in the page. Each additional image is preloaded just prior to the first time it is to be shown.

Note: If you set your IRM gallery to use a Random Image Order, then not even a single image is embedded in your page. The system uses a transparent placeholder, less than 1K in file size.

Additional tweaks to consider

You might want to change your HGM animation setting from the default Glide to Fade. Or instead of using an IRM Toolbar you could opt to use the Paginator bar and assign the Toggler function REL attributes to the Paginator's <a> tags. And since the Toggler function will work with any widget, you could create your galleries inside an Elevator Panel or Accordion Panel just as easily.

Imagine the possibilities.