PVII IMAGE GALLERY MAGIC 2 (IGM2)

BECAUSE YOUR IMAGES DESERVE THE VERY BEST

Image Gallery Magic 2 can literally bring your images to life with smooth cross-fading, snappy
glides, or elegant Ken Burns style pan and zoom effects for modern browsers. IGM 2 utilizes
HTML5, CSS level 3 and advanced PVII DOM Scripting to deliver a broadcast-quality gallery
presentation that does your images proud.

We hope you enjoy using Image Gallery Magic 2 as much as we enjoyed creating it!

Al Sparber and Gerry Jacobsen, Co-Founders

Project Seven Development
 Specify local site location 2

Contents

PVII Image Gallery Magic 2 (IGM2) ............................................................................................................... 1

Install the Dreamweaver extension ..................................................................................................................... 6

Work in a defined Dreamweaver site.................................................................................................................. 6

Specify local site location ........................................................................................................................ 6

Asset Folders ....................................................................................................................................................... 7

About Images and Dreamweaver FTP.................................................................................................. 7

Gallery images folders ........................................................................................................................................ 7

The IGM2 User Interface .................................................................................................................................... 8

Thumbnails .................................................................................................................................................. 9

Caption ......................................................................................................................................................... 9

Description .................................................................................................................................................. 9

Animation................................................................................................................................................... 10

Images List................................................................................................................................................. 11

Image-Specific Settings ......................................................................................................................... 12

Ken Burns Settings .................................................................................................................................. 14

© 2012 Project Seven Development

2
 Specify local site location 3

Through the Viewport... How Ken Burns Zooming and Panning work ........................................................... 15

Ken Burns Zooming................................................................................................................................. 15

Ken Burns Panning .................................................................................................................................. 15

Additional Options ............................................................................................................................................ 16

General Options ....................................................................................................................................... 17

Toolbar........................................................................................................................................................ 18

Paginator .................................................................................................................................................... 18

Auto Play Settings.................................................................................................................................... 18

Style Theme ...................................................................................................................................................... 19

Modifying an Existing Gallery ......................................................................................................................... 19

Will it fit? .......................................................................................................................................................... 20

My Images are zoomed so large they look distorted... What can I do? ............................................................ 20

Full-Screen Mode.............................................................................................................................................. 20

Where Did My Thumbnails Go?....................................................................................................................... 21

Can I Edit an IGM2 Style Theme? ................................................................................................................... 21

If I Really Mess Up MY Style Sheet, Can I Revert to a Default One? ............................................................ 21

© 2012 Project Seven Development

3
 Specify local site location 4

Importing Images into IGM2 ............................................................................................................................ 22

1. Set Import Session Options ............................................................................................................. 22

2. Point to your Full Size Images Folder ........................................................................................... 23

2. Point to your Thumbnail Images Folder ...................................................................................... 24

3. Selection/Action Buttons.................................................................................................................. 26

4. Complete the Import ......................................................................................................................... 27

Batch Processing Images in Fireworks ............................................................................................................. 27

1. Processing Full-Size Images ........................................................................................................... 28

2. Processing Thumbnail Images........................................................................................................ 31

Auto Converting an IGM1 Gallery to IGM2 .................................................................................................... 35

External Linking and Bookmark Support ......................................................................................................... 37

Anchor Method ......................................................................................................................................... 37

URL Parameter Method .......................................................................................................................... 37

Removing an IGM2 Gallery from Your Page................................................................................................... 37

© 2012 Project Seven Development

4
 Specify local site location 5

PVII Image Gallery Magic 2 Behavior - Control Actions ................................................................................ 39

Manually applying a Control Action................................................................................................... 39

Creating a new Control Actions behavior ........................................................................................ 40

Modifying an existing Control Actions behavior ........................................................................... 40

The Interface ............................................................................................................................................. 41

The Interface Items ................................................................................................................................. 41

The Interface Control Buttons ............................................................................................................. 42

Getting help ....................................................................................................................................................... 43

IGM2 Online Tutorials and Videos ..................................................................................................... 43

PVII Knowledge Base ............................................................................................................................... 43

PVII Communities .................................................................................................................................... 43

RSS News Feeds ........................................................................................................................................ 44

Before you Contact us ............................................................................................................................ 45

Snail mail .................................................................................................................................................... 45

© 2012 Project Seven Development

5
 Specify local site location 6

Install the Dreamweaver extension

IGM2 is compatible with Dreamweaver MX2004, 8, CS3, CS4, CS5, CS5.5, CS6 and higher

Look for the extension installer file p7_IGM2_220.mxp or p7_IGM2_220_upg.mxp in the root of the zip
archive you downloaded. Double-click the file to install the extension. Dreamweaver's Extension
Manager will open and you will be prompted to complete the installation. Once the installation is
complete, you’ll need to restart Dreamweaver.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association issue. To remedy
the problem locate the installer file from inside a Finder window and double-click it.

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
This is the name that appears in the Files panel and in the Manage Sites dialog box.

Local Site Folder

This is 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.

© 2012 Project Seven Development

6
 About Images and Dreamweaver FTP 7

Asset Folders
When you create a gallery, the system creates an assets folder named p7igm2 at the same level as
the page that contains your gallery. This folder will contain the relevant CSS files, script, and the
loading image. When you publish your site, make sure you upload the entire p7igm2 folder, as well
as the folders that contain your gallery images. The system will also create a fireworks folder,
which contains a special Fireworks file, IGM-controls.png, which you can use if you would like to
edit the toolbar control images.

About Images and Dreamweaver FTP

If you use any of Dreamweaver synch or dependent files features when uploading, note that
Dreamweaver will only upload images that are actually embedded on your page. In a typical IGM2
deployment, the optional thumbnails and the first full-size image are embedded. The remaining
full-size images are staged with an advanced pre-loader to keep initial page load efficient. They
are not embedded on your page and Dreamweaver does not know they exist—so make sure you
upload your full-size images folder(s).

Gallery images folders

If you select your gallery images from folders that are within your defined site, the system will
simply use those folders. If, when browsing to or importing images, you point to a folder outside
your defined site, IGM2 will create a folder called p7IGM_images in the root of your defined site and
will copy your images there. Make sure you upload the folder to your remote site.

© 2012 Project Seven Development

7
 About Images and Dreamweaver FTP 8

The IGM2 User Interface

Click on the page where you would like your Gallery to appear, and then click the IGM2 icon in the PVII Section
of Dreamweaver's Insert Bar or Panel. Alternatively, you can choose Image Gallery Magic 2 by PVII from the main
Dreamweaver Insert menu, under Studio VII.

When you first launch the IGM2 user interface, it will open in:

Mode: Create New Image Gallery

Let's walk through the interface from top to bottom and get acclimated.

© 2012 Project Seven Development

8
 Thumbnails 9

Thumbnails
Choose None, Above Image or Below Image. Enable Scrolling determines how the thumbnails
display. If checked, this option will display the thumbnails in a single horizontal scrolling row.
Scrolling Duration sets the scrolling speed. Increasing the duration value will slow the scrolling
speed. If you deselect Enable Scrolling your thumbnails will display without scrolling controls in a
matrix composed of as many rows necessary to display all of your thumbnails.

Note: If you create your gallery with thumbnails and subsequently set thumbnail display to None, your thumbnails will be removed
from your markup. If you later decide you want to show thumbnails, you can use the Thumbnail Path box or re-import your
images.

Caption
Choose None, Overlay Top or Overlay Bottom. For Animation, choose None, Slide, or Fade. If you
choose an animation, set its Duration. The higher the duration value, the slower the animation will
run. The duration is set in milliseconds (ms). 1000 ms = 1 second.

Description
Choose None, Overlay Top or Overlay Bottom. For Animation, choose None, Slide, or Fade. If you
choose an animation, set its Duration. The higher the duration value, the slower the animation will
run. The duration is set in milliseconds (ms). 1000 ms = 1 second.

© 2012 Project Seven Development

9
 Animation 10

Animation
Select an animation mode for your gallery by choosing one of the following:

 None
 Cross Fade
 Slide in From Left
 Slide in From Right
 Slide in From Top
 Slide in From Bottom
 Random Slide (a combination of the 4 slide methods)
 Ken Burns Style (Pan and Zoom)
The Ken Burns effect runs in modern browsers only. Older browsers are automatically switched to the Auto Fit Fade
animation

 Auto Fit Fade (Images are zoomed until they fit the entire viewport)

Duration
The higher the duration value, the slower the animation will run. The duration is set in milliseconds
(ms). 1000 ms = 1 second.

Auto Set Ken Burns

If you choose Ken Burns Style, you can enable or disable the Auto Set Ken Burns option. The system
will assign random Pan and Zoom values to each image in your gallery. If you enable the option,
you will not need to set individual Ken Burns parameters for each image. On the other hand, if you
do not enable this option, you will have complete control over your show on an individual image
basis.

© 2012 Project Seven Development

10
 Images List 11

Images List
The Images list is, of course, a list of the images that make up your gallery. The above screen
capture shows the images list after images have been added. Across the top of the list are 5 action
buttons:

 Add: Use this button to add images to your gallery, one at a time. When you click the Add button
(or when you open the interface the first time), a new entry will show up in the list labeled as New
Image. This is a placeholder. Select the placeholder image and then enter a path to the image in the
Image Path box. You can also use the Browse button to the right of the Image Path box to browse
to your image in a dialog box. If you are using thumbnails, enter a path to the thumbnail image in
the Thumbnail Path box. Note that if Thumbnails were set to None, the Thumbnail Path box will be
grayed out (inactive).
 Delete: Select an image in the list and click the Delete button to remove that image.
 Up: Select an image in the list and click the Up button to move the image up in the list. The image
will move up one row per click until it reaches the top row.
 Down: Select an image in the list and click the Down button to move the image down in the list.
The image will move down one row per click until it reaches the bottom row.
 Import: Use the Import button to import images from existing folders.

© 2012 Project Seven Development

11
 Image-Specific Settings 12

Image-Specific Settings
Below the Images list and above the Options section, you will find several key image-specific
settings. The settings in this section will apply only to the selected image in the Images list.

Image Path
When you click the Add button (or when you open the interface the first time), a new entry will
show up in the Images list labeled "New Image". This is a placeholder. Select the placeholder image
and then enter a path to the image in the Image Path box. You can also use the Browse button to
the right of the Image Path box to browse to your image in a dialog box. Note that if you choose to
import your images, the image path will be filled in automatically as part of the import process.

Thumbnail Path
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 Thumbnails were set to None, the Thumbnail Path box will be grayed out
(inactive). Note that if you choose to import your images, the image path will be filled in
automatically as part of the import process.

About Image Paths

If you select your gallery images from folders that are within your defined site, the system will
simply reference those folders. If, when browsing to or importing images, you point to a folder
outside your defined site, IGM2 will create a folder called p7IGM_images in the root of your defined
site and will copy your images there. Make sure you upload the folder to your remote site.

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. If you do not want a caption to
show for a particular image, simply make the Caption box blank.

© 2012 Project Seven Development

12
 Image-Specific Settings 13

Description
If you opted to show a Description, this box will be active. There is no pre-supplied value for
Description. You can add a description for one or all of your images. The Description box can be
left blank if you do not wish a description to appear for a particular image. The Description box
supports HTML markup. This allows you to include paragraphs, links, or even images. If you are not
adept at writing markup in real time, simply create a blank page in Dreamweaver and add what you
want to that page. Switch to Code View and copy the markup, which would be all code between (but
not including) the opening and closing body tags:

<body>
here is your markup to copy
</body>

Note: When entering plain text the system will automatically convert any line breaks to a <br> tag so that the
line break will be viewable in the actual presentation. If the system detects actual markup that you have
entered, then it will ignore line breaks and simply render the description content according to the markup you
have included.

Image Link Path

Each full-size image can have a link set on it. Use the Image Link Path box to set it. You can also
set a Title and a Target if desired.

© 2012 Project Seven Development

13
 Ken Burns Settings 14

Ken Burns Settings

The last group of image-specific settings are the Ken Burns settings, which will be active if you
have chosen to use the Ken Burns Style Animation for your gallery. You can choose a starting and
ending vertical position, a starting and ending horizontal position, a starting and ending zoom
level and a duration.

Vertical Position Choices

Vertical post ion settings control the vertical panning facet of the Ken Burns animation—the up and
down movement of the image. Select a starting and ending position from the following values:

 Random – The system will make a random choice

 Top – The top of the image will be aligned with the top of the viewport
 Center – The image will be vertically centered within the viewport
 Bottom – The bottom of the image will be aligned with the bottom of the viewport

Horizontal Position Choices

Horizontal post ion settings control the horizontal panning facet of the Ken Burns animation—the
sideways movement of the image. Select a starting and ending position from the following values:

 Random – The system will make a random choice

 Left – The left edge of the image will be aligned with the left edge of the viewport
 Center – The image will be horizontally centered within the viewport
 Right – The right edge of the image will be aligned with the right edge of the viewport

Zoom
Sets a starting and ending zoom value. Zoom values cannot be less than 1. Zoom values are based
on an image's size after it has been adjusted to fit the viewport.

Duration
The duration defines the length of time (in seconds) that the Ken Burns animation will run. In many
cases, you would want to set the Ken Burns duration to a value equal to or greater than the Pause
setting between images.

© 2012 Project Seven Development

14
 Ken Burns Zooming 15

Through the Viewport...

How Ken Burns Zooming and Panning work
The zoom settings are critical to the amount of motion and the speed of motion effects. The Ken
Burns effect moves your images through a viewport. The viewport's height is automatically set
based on the aspect ratio of the first image in your gallery (you can also set a fixed height if you
wish). Width is adaptive and based on the width of the parent element in which you have placed
your gallery.

Let's consider a scenario where your gallery is 800 pixels wide and your images are each 1600
pixels wide by 900 pixels tall. The system will zoom your first image until it fits within the
viewport. The new height and width will be consistent with the image's natural aspect ratio. The
scaling is perfectly proportional. Your 1600x900 image will be proportionally scaled until its width
is the same width as the viewport, which happens to be 800 pixels in this case. When the image's
width reaches 800 pixels, its height will be 450 pixels. The system will then set the viewport height
to 450. All subsequent images will be scaled proportionally until their height is at least 450px and
their width at least 800px. This is why it is usually better to use images that are the same size.

Ken Burns Zooming

In the above scenario, the default initial size of your image is half its natural size. If you set the
starting zoom to 2, the image will begin at twice its initial rendered size, which in this case would
be just about its natural size of 1600x900. The viewport, however, is still 800x450. Imagine the
viewport as a clear window, with the image sitting underneath it. Only those parts of the image that
are under the glass will be visible. If you set your ending zoom to 1, the image will zoom out
during the time span defined by the duration you set. The effect of zooming from level 2 to level 1
will make the image appear to be moving away from you. If you combine that with horizontal or
vertical panning the effect can be dramatic. Conversely, if the ending zoom is greater than the
starting zoom, the image will appear to be moving toward you.

Ken Burns Panning

In order for panning to work, the zoom level must be set so that the image begins or ends at a size
that is larger than the viewport. The higher the zoom differential, the more there will be to pan and
the pan will move faster.

© 2012 Project Seven Development

15
 Ken Burns Panning 16

Additional Options
Additional general options appear in the second screen. Click the Next: General Gallery Options
button to access the second screen.

Set your General Gallery Options

© 2012 Project Seven Development

16
 General Options 17

General Options
 Gallery Height - Auto or Fixed (see below)
 Page Startup: Start with Image - Which image in the list appears first
 Random - Shuffle all images into a random order

How Auto and Fixed Height Work

Auto Height
Auto Height is the default setting. In Auto Height mode, when using the Cross Fade or Slide
animations, images are scaled proportionally to fit the width of your viewport. If you are using
images of varying heights, the viewport will smoothly grow or shrink to accommodate all images at
their natural aspect ratio. If your images are a mix of portrait and landscape orientation, portrait
images will be scaled larger in proportion to landscape images—but they are always scaled within
their natural aspect ratios. Images are never stretched, squeezed or distorted.

When using the Ken Burns or Auto Fit Fade animations, the viewport will neither grow nor shrink.
Your images will be scaled up or down to fit the viewport, whose height will be calculated by the
IGM2 system based on the height of the first image.

Fixed Height
Fixed height can be handy if you must restrict your gallery to a tight vertical space within your
design or if your images are small and you do not want them to be scaled up. When you use the
Cross Fade or Slide animations, along with fixed height, images are scaled down if the viewport is
smaller than the image's actual size. If the viewport is larger than an image's natural size, the
image is centered both horizontally and vertically inside the viewport.

When using the Ken Burns or Auto Fit Fade animations with Fixed Height set, your images will be
scaled up or down to fit the viewport.

© 2012 Project Seven Development

17
 Toolbar 18

Toolbar
Toolbar Position - Above Image, Below Image, or None

Controls to Include on Toolbar: First, Previous, Pause/Play, Next, Last, Fullscreen Mode. Choose any
combination you want.

Full Screen Mode Note: The way in which your images display in fullscreen mode is dependent on the animation
method you choose. If using the Cross-Fade or Slide animations, your full-screen presentation will show your
gallery in a fixed-height type of display, with the height being the full height of the browser window. Images,
therefore, will never be zoomed larger than their natural size. If you select the Ken Burns or Full-Fit Cross Fade
animations, your images will scale to fill the entire available space of the window.

Paginator
Paginator Position - Above Image, Below Image, Overlaid Top, Overlaid Bottom, None

Auto Play Settings

These setting define how the gallery works when it is in Auto Play mode.

 Auto Play on Startup- Load the gallery in auto Play mode

 Show Initial Image for - How long the first image displays (in milliseconds)
 Auto Play Mode - Loop Back to First Image or Auto Reverse
 Pause Time - How long (in milliseconds) each image displays before the next one is loaded
(1000ms equals 1 second)
 Cycles - Set your gallery to Play Continually or to a fixed Number of Cycles to play—after which the
gallery will go into pause mode
 End Cycle On - Choose First Image or Last Image

© 2012 Project Seven Development

18
 Auto Play Settings 19

Style Theme
IGM2 comes with a variety of pre-defined CSS style themes. A preview of the selected Style Theme
is displayed to the right of the Style Theme select list. This Preview will change whenever you select
a different Style Theme.

Modifying an Existing Gallery

You can modify any IGM2 gallery on your page at any time. Simply click inside the gallery and open
the interface. Access the interface the same way you did when you created the gallery. The system
will detect that your cursor is inside an existing gallery and will open in Modify Mode.

In Modify Mode you can add or import images, delete images, re-order images, or change any
options.

© 2012 Project Seven Development

19
 Auto Play Settings 20

Will it fit?
Your IGM2 gallery will always fit—perfectly. No matter what size your images are, the IGM2 system
will scale them to fit the area that your gallery occupies.

My Images are zoomed so large they look distorted...

What can I do?
If your gallery is set to Auto Height, or if you are using the Ken Burns or Full-Fit Cross Fade
animation, the system will scale your images to fit the rendered width of your gallery. IGM2
galleries are adaptive—the width of the gallery is determined by the width of the element in which
the gallery was created. If your images are narrower than the rendered gallery width, they will be
zoomed to fit. To eliminate the zoom, do one of 3 things:

1. Add a wrapper DIV around your gallery and set its width to a value that is no greater than
the natural width of your images.
2. Switch from Auto Height to Fixed Height. The height you set will determine the viewport size
and your images will be scaled down to fit, if necessary. In Fixed Height mode, your images
will never be zoomed larger.
3. Edit or re-process your images to a larger size. Remember, your images can be much larger
than your layout and IGM2 will always ensure that they fit. So pick a size where your images
will always be wider than the rendered width of your gallery.

Full-Screen Mode
If you opt to show the Full-Screen icon on your toolbar, your users will be able to easily switch
between the in-page gallery and a Full-Screen presentation that hides all page content except for
the gallery. Users can exit Full-Screen mode by clicking the icon or pressing the ESC (Escape) key
on their keyboard. When in Full-Screen mode galleries set to Cross-Fade, or any of the Slide
animations, will display in Fixed Height mode, with height determined by the height of the browser
window. Images will be horizontally and vertically centered within the viewport at their natural
aspect ratios, based upon the available window height. On the other hand, if you select Ken Burns
or Full-Fit Cross Fade animation modes, your images will be scaled to fit the entire window.

© 2012 Project Seven Development

20
 Auto Play Settings 21

Where Did My Thumbnails Go?

If you initially set up your gallery to use thumbnails and subsequently turn them off in the
interface, your thumbnails are actually removed from the gallery markup. If you ever decide to use
thumbnails again, you will need to re-map them using the UI Browse button or the Import utility.
Your actual thumbnail image files will still exist in the folder you originally created them in.

Can I Edit an IGM2 Style Theme?

CSS is always editable. If you are proficient in CSS, please feel free to modify the CSS to your heart's
content. If you are not, we would strongly recommend that you limit your modifications to color
and background properties only and ask for help if you have any special styling needs. You can
post your query on our web forum, email us, or telephone us. See the main Help section at the end
of this guide.

The Toolbar and Paginator icons are background images. We did include a Fireworks folder with an
editable document if you would like to customize the icons. We really do not recommend doing so,
but if you tackle the task make sure you do not change the dimensions of the images.

We are known for our customer support, so please do not hesitate to ask for assistance if you feel
you need help with a CSS edit.

If I Really Mess Up MY Style Sheet, Can I Revert to a Default One?

Yes. Locate the CSS file that is linked to your page. You will find it in a folder called p7igm. The
style sheet will be named p7IGM01.css, p7IGM02.css, p7IGM03.css, and etcetera. Delete the CSS
file. Open your gallery page, place your cursor inside the gallery and open the IGM2 interface, as if
you were going to edit your gallery. Simply click OK and the system will generate a replacement CSS
file for the one you deleted.

© 2012 Project Seven Development

21
 1. Set Import Session Options 22

Importing Images into IGM2

IGM2 comes with a handy Import utility that enables you to insert multiple images and thumbnails.
To open the Import interface, click the Import button above the Images List in the main IGM2 UI.

1. Set Import Session Options

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. The Fullsize Images Only box will be
checked and grayed out if you've set Thumbnails to None in the main IGM2 UI.

© 2012 Project Seven Development

22
 2. Point to your Full Size Images Folder 23

2. Point to your Full Size Images Folder

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

Browse to the folder where your full-size images are and select any image. Then click OK.

© 2012 Project Seven Development

23
 2. Point to your Thumbnail Images Folder 24

All the images in that folder will appear in the Full Size Images column:

2. Point to your Thumbnail Images Folder

Browse to the folder where your thumbnail images are and select any image. Then click OK.

© 2012 Project Seven Development

24
 2. Point to your Thumbnail Images Folder 25

All the images in that folder will appear in the Thumbnail Images column:

In many cases, the internal logic used by the IGM2 Import utility will establish matching criteria
automatically. In the above example, the thumbnail image names are appended with a suffix of
_thumb and IGM2 was able to figure out the mapping. Note that the Full Size Image and Thumbnail
Image Previews match.

Using the Full Size Image Filename Filter Criteria

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.

© 2012 Project Seven Development

25
 3. Selection/Action Buttons 26

3. 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.

© 2012 Project Seven Development

26
 4. Complete the Import 27

4. Complete the Import

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

Batch Processing Images in Fireworks

If all you have to work with are raw images provided by a client or accessed directly from a camera,
you will want to process those images. Processing will allow you to optimize, size, and generate
thumbnails. This tutorial will show you how to use the powerful batch processing features in Adobe
Fireworks to process your images. Other image editors have batch processing capabilities, but
we've found Fireworks to be the easiest to use.

© 2012 Project Seven Development

27
 1. Processing Full-Size Images 28

1. Processing Full-Size Images

Open Fireworks. When Fireworks opens, choose File > Batch Process. A browse dialog will open.

Browse to the folder containing your images. Click the Add button to add one image at a time or
the Add All button to add all images in the folder to the batch process.

Click Next.

© 2012 Project Seven Development

28
 1. Processing Full-Size Images 29

The Batch Process window will open.

In the Batch options column, select Scale and click the Add button to add it to the Include in batch
column.

In the Scale section, choose Scale to Fit Area. Enter a Max width and Max height value. We used
1200 pixels. You can set it to whatever you need to. This means the image will scale within its
natural aspect ratio with 1200 pixels the upper boundary for both width and height.

Check the Only scale documents currently larger than target size option to prevent Fireworks from
up-sizing any images that are already at least 1200 pixels wide or tall.

© 2012 Project Seven Development

29
 1. Processing Full-Size Images 30

Click Next to choose where to save your processed images.

For Batch output, you can choose the Same location as original file, which will overwrite your
originals. You can also choose a Custom location, in which case you will be presented with a folder
dialog allowing you to browse to a folder within your defined site or create a new folder within your
defined site. When you create a Custom location, your original files are neither overwritten nor
moved.

Click the Batch button to start the process.

© 2012 Project Seven Development

30
 2. Processing Thumbnail Images 31

2. Processing Thumbnail Images

Open Fireworks. When Fireworks opens, choose File > Batch Process. A browse dialog will open.

Browse to the folder containing your final full-size images. Click the Add button to add one image
at a time or the Add All button to add all images in the folder to the batch process.

Click Next.

© 2012 Project Seven Development

31
 2. Processing Thumbnail Images 32

The Batch Process window will open.

In the Batch options column, select Scale and click the Add button to add it to the Include in batch
column.

In the Scale section, choose Scale to Fit Area. Enter a Max width and Max height value. We used 120
pixels. You can set it to whatever you need to. This means the image will scale within its natural
aspect ratio with 120 pixels the upper boundary for both width and height.

© 2012 Project Seven Development

32
 2. Processing Thumbnail Images 33

In the Batch options column, select Rename and click the Add button to add it to the Include in
batch column.

In the Rename section, choose Add Suffix. Enter _tmb.

© 2012 Project Seven Development

33
 2. Processing Thumbnail Images 34

Click Next to choose where to save your processed images.

Choose Custom location and when the folder dialog opens, create a new folder called thumbs
inside the folder where you saved your full-size images.

Click the Batch button to start the process.

The full-size images folder (pvii-testing) now has a sub-folder called thumbs, which contain the
newly processed thumbnail images.

After batch processing images you are ready to use the IGM2 Import facility to quickly get your
gallery up and running.

© 2012 Project Seven Development

34
 2. Processing Thumbnail Images 35

Auto Converting an IGM1 Gallery to IGM2

IGM2 comes with a fantastic utility that allows you to easily convert an existing IGM1 gallery to
IGM2. Simply open a page containing your old IGM1 gallery and click to select one of the thumbnail
images.

With the IGM1 image selected, open the IGM2 interface. A special convert window will appear:

Click the Convert to IGM2 button to make the conversion.

© 2012 Project Seven Development

35
 2. Processing Thumbnail Images 36

The IGM2 interface will then open and all your images from your old gallery will be there, along
with any captions or descriptions you may have had.

The IGM2 converted gallery will use the same images, from the same folders that your IGM1 gallery
used. You can now customize the new IGM2 gallery by setting any options you want to in the UI.

Click OK to complete the process.

Your conversion is complete and your gallery is now an IGM2 gallery.

© 2012 Project Seven Development

36
 Anchor Method 37

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 image in an IGM2 gallery on that page. The opener will
look for the IGM2 widget number, an underscore, and the IGM2 image number. There are 2
methods available:

Anchor Method
The system will look for #igm plus an image reference after the anchor. The anchor
index.htm#igm1_4 will trigger image 4 in the first IGM2 Widget on the page. When used in a Web
address, the entire link would look like this:

http://www.projectseven.com/galleries/igm2/examples/demo-01.htm#igm1_4

URL Parameter Method

The system will look for igm= in the URL parameter. The URL parameter index.htm?igm=1_4 will
trigger image 4 in the first IGM2 Widget on the page. When used in a Web address, the entire link
would look like this:

http://www.projectseven.com/galleries/igm2/examples/demo-01.htm?igm=1_4

You can then give out the link so people can go directly to your specific image.

Removing an IGM2 Gallery from Your Page

IGM2 comes with a handy command that cleanly and thoroughly removes an IGM2 gallery from
your page. It is strongly recommended that you use this command to remove a gallery rather than
attempting to delete the gallery manually.

© 2012 Project Seven Development

37
 URL Parameter Method 38

To access the command, open the page that contains your gallery and choose:

Commands > Studio VII > Image Gallery Magic 2 by PVII > Remove Image Gallery Magic 2

The Remove dialog will open:

Select the gallery you want to remove by choosing its ID from the Image Gallery drop-down list.

Tip: If you are unsure about which gallery relates to which ID, click the Cancel button and switch to Code View. In Code
View, locate all DIV tags with IDs that begin with p7IGM, like this one: <div id="p7IGM_1" class="p7IGM01">

Click OK to proceed. A warning message will appear:

Click OK to complete the removal.

© 2012 Project Seven Development

38
 Manually applying a Control Action 39

PVII Image Gallery Magic 2 Behavior - Control Actions

The Control Behavior allows you to configure an ordinary link, anywhere on your page, to control
the actions of any Image Gallery Magic 2 gallery on your page.

Available Control Behavior Actions:

 Open First Image

 Open Previous Image
 Play (Resume)
 Pause
 Open Next Image
 Open Last Image
 Open Image Number...

Manually applying a Control Action

When working within Dreamweaver you can use the automated interface-driven Behavior
(accessible from Dreamweaver's Tag Inspector panel) to assign any of the control actions. There
may, however, be times when want or need to manually assign a control action—either for use in
external scripts or when building pages dynamically. The control action's function call is P7_IGMctrl
followed by 2 arguments inside parentheses:

P7_IGMctrl('p7IGM_1','play')

1. The first argument is the ID of the Image Gallery Magic 2 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_IGMctrl('p7IGM_1','play')">Control</a>

© 2012 Project Seven Development

39
 Creating a new Control Actions behavior 40

The available Control Actions are:

 P7_IGMctrl('p7IGM_1','first') - Open First Image

 P7_IGMctrl('p7IGM_1','prev') - Open Previous Image
 P7_IGMctrl('p7IGM_1','play') - Start or Resume Auto Play
 P7_IGMctrl('p7IGM_1','pause') - Pause the Auto Play
 P7_IGMctrl('p7IGM_1','next') - Open Next Image
 P7_IGMctrl('p7IGM_1','last') - Open Last Image
 P7_IGMctrl('p7IGM_1',x) - Open the specified image number, where x is the number of the image

Creating a new Control Actions behavior

1. Select (click) a text link or image 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 > Image Gallery Magic 2 > 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 Image Gallery Magic 2 Control behavior.
2. Double-click the Image Gallery Magic 2- 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.

© 2012 Project Seven Development

40
 The Interface 41

The Interface
The Image Gallery Magic 2 -Control Actions interface allows you to select an action to apply.

The Interface Items

Image Gallery Magic 2

The interface contains a listing of all of the Image Gallery Magic 2 widgets on your page. The list
will display the ID of each widget. Select the Image Gallery Magic 2 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 DIV tags with IDs that begin with p7IGM, like this one:
<div id="p7IGM_1" class="p7IGM01">

© 2012 Project Seven Development

41
 The Interface Control Buttons 42

Action
Select the action you want to apply.

 First Image: This will display the First image

 Previous Image: This will display the previous 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 next image
 Last Image: This will display the last image
 Open Image Number: Enter a number to display a specific image

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 Interface Control Buttons

 OK: When you have made your selection, click the OK button to apply the behavior. By default the
behavior will be applied to the onClick event of the text link or image. You can change the event by
selecting the desired event in the Behaviors panel.
 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 with the Image Gallery Magic 2 interface.

© 2012 Project Seven Development

42
 IGM2 Online Tutorials and Videos 43

Getting help
PVII quality does not end with your purchase - it continues with the best customer support in the
business.

IGM2 Online Tutorials and Videos

Please visit the online repository of tutorials that focus on specific tasks and processes:

Online Tutorials and Videos

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes,
tips, and techniques relating to our products, as well as to general web development issues.

Open the Knowledge Base | View the 10 Most Recent Additions

PVII Communities
PVII maintains separate and distinct Web Forum and Newsgroup communities. We do this to ensure
you always have access via your preferred medium and device.

1. The PVII Web Forums

The PVII Web Forum is a modern browser-based community, accessible to both desktop and mobile
devices and requires no additional software or plugins.

Visit The PVII Web Forum community now...

© 2012 Project Seven Development

43
 RSS News Feeds 44

2. PVII Newsgroup forums

The Project VII Newsgroup is available via private and secure NNTP servers. In order to subscribe to
a newsgroup you must have a newsgroup-capable client installed such as:

1. Mozilla Thunderbird
2. Windows Live Mail
3. Windows Mail/Outlook Express
4. Opera Mail
5. Entourage
Server: forums.projectseven.com

Need help setting up a newsgroup?

Setting up a new newsgroup account in Windows Mail (Vista)

Setting up a new newsgroup account in Outlook Express

Setting up a new newsgroup account in Mozilla Thunderbird

Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation
to learn how to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you will not
find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a
new account.

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you
are not sure how to subscribe, please check this page:

PVII RSS Info

© 2012 Project Seven Development

44
 Before you Contact us 45

Before you Contact us

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

E-Mail:
support@projectseven.com

Phones:
330-650-3675
336-374-4611

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

Snail mail
Project Seven Development
339 Cristi Lane
Dobson, NC 27017

© 2012 Project Seven Development

45