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.

IGM2 Affinity BannerReplace the default Affinity Banner with an IGM2 Gallery

Turn your Affinity Boardroom banner into an animated image gallery in just a few minutes!

Finished Example...

View the finished example page and then return here to learn how you can make your banner come to life.

Each Affinity Boardroom page comes with a banner image that you can replace with an Image Gallery Magic 2 (IGM2) animated banner. This tutorial will show you how.

Required for this tutorial

This tutorial requires PVII Affinity, the Affinity Boardroom theme pack, and IGM2

To make the tutorial easier, we've prepared a zip file of 4 images that you can use for practice:

Download the images

Unzip the images and place them inside the art folder of your Affinity site.

Insert the Gallery

Open your Boardroom page. Click on the banner image and then switch to Code View:

<div id="banner"><img src="art/art-room.jpg" alt="" class="scalable"></div>

Remove the image and leave your cursor inside the opening and closing banner DIV tags:

<div id="banner">Cursor Here </div>

Open the IGM2 interface.

Set Thumbnails, Caption, and Description to None.

Set animation to Ken Burns and deselect (un-check) Auto Set Ken Burns.

Click the Browse... button to the right of the Image Path box and browse to your art folder.

Select art-room.jpg as your first image.

Click the Add button and add the remaining 4 art-room images as depicted in the screen capture below.

Select each image in your list and set its Ken Burns Start/Finish parameters as follows:

Start: Vertical:   Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5

Start: Vertical:   Center Horizontal: Right Zoom: 1.4 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1

Start: Vertical:   Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5

Start: Vertical:   Center Horizontal: Left Zoom: 1.5 Duration: 8 (seconds)
Finish: Vertical: Top Horizontal: Center Zoom: 1

Start: Vertical:   Center Horizontal: Right Zoom: 1.45 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.1

 

Click the Next: General Gallery Options button

Leaving all other options set to their default values, set Paginator to Below Image with a Pause/Play Control only.

Set Show Initial Image and Pause Time to 7800 (ms).

Set Style Theme to 03-Style Three

Click OK.

CSS Edits

In your Affinity CSS file, locate the #banner rule and remove the border-bottom declaration:

#banner {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

 

In your p7IGM03.css file, locate the .p7IGM03_FSwrapper rule and change the border property to border-bottom:

.p7IGM03_FSwrapper {
position: relative;
padding: 0px;
overflow: hidden;
border: 1px solid;
border-bottom: 1px solid;
}

In your p7IGM03.css file, locate the .p7IGM03 .p7IGM-canvas rule and add a vertical-align property set to bottom:

.p7IGM03 .p7IGM-canvas {
background-color: transparent;
vertical-align: bottom;
}

Save your files and pat yourself on the back. You are finished!

Notes

For a Ken Burns animation to work best, your images should all be the same size. Image width should be equal to or greater than the max-width of your layout, which is 1360 pixels. We made the practice images 1440 pixels wide. The Ken Burns parameters were set to provide a pleasing and well-orchestrated effect as one image transitions into the next. Please see the IGM2 user guide for a complete discussion of the Ken Burns settings. Of course, if you do not have time to play cinematographer, you can leave the Ken Burns set to the default random mode.

About Affinity Boardroom

A Groundbreaking Addition to your Affinity Toolbox

Boardroom Theme Home Page | Boardroom Examples | Buy Boardroom Now ($45)

Affinity Boardroom extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Boardroom is mobile-ready and responsive. Boardroom comes with a fully commented CSS file to assist you in customizations. Of course, PVII support is always ready to help you whenever needed. Boardroom also comes with a suite of custom Dreamweaver Snippets that enable you to customize the row and column configuration of your pages.