Image Gallery Magic: User Guide

Image Gallery Magic: User Guide
©2006 Project Seven Development. All Rights Reserved.
Thank you for purchasing Image Gallery Magic. We hope it serves you well and that you enjoy
using it as much as we did developing it.
Sincerely,
Al Sparber and Gerry Jacobsen, Co-Founders

Project Seven Development
Image Gallery Magic: User Guide ______________________________________________________ 1
Overview__________________________________________________________________________________ 4
Optimizing and scaling of original images ________________________________________________________________ 4
Use Fireworks, Photoshop, or other editors...______________________________________________________________ 4
No aspect ratio is ever harmed... your images can vary in size or orientation _____________________________________ 5
Select from 6 professionally designed layouts... or insert your gallery into an existing layout ________________________ 5
Captions, descriptions, and counters ____________________________________________________________________ 5
Bring your images to life... in a gallery that is alive with interactivity___________________________________________ 5
Manage it all from within a dedicated window ____________________________________________________________ 6
Cross-browser and OS support _________________________________________________________________________ 6
Before you begin..._________________________________________________________________________ 7
Install the Image Gallery Magic extension ________________________________________________________________ 7
Open a Defined Dreamweaver web site __________________________________________________________________ 7
Locate the supplied igm_image_sets and workpage folders___________________________________________________ 7
Gallery creation methods___________________________________________________________________ 8
Image population methods _________________________________________________________________ 8
Creating a Complete Gallery with Page Pack™ layout and Automatic Fireworks image processing9
Create your Page Pack layout page _____________________________________________________________________ 9
Add images and set processing options _________________________________________________________________ 11
Set Image Captions and Gallery Options ________________________________________________________________ 14
Adding (appending) a new image to your gallery _________________________________________________________ 18
Build a Complete Gallery using a Page Pack™ layout and Manual Build Mode Image Insertion _ 25
Create your Page Pack layout page ____________________________________________________________________ 25
Add images and set processing options _________________________________________________________________ 26
Adding (appending) a new image to your gallery _________________________________________________________ 33
Using iGM with an existing page ___________________________________________________________ 38
Inserting a gallery into an existing page _________________________________________________________________ 38
Direct Linking to Images __________________________________________________________________ 45
Editing your gallery style sheet ____________________________________________________________ 48
Editing Thumbnail row background color _______________________________________________________________ 49
Editing the thumbnail image default state _______________________________________________________________ 50
Editing the thumbnail image hover state ________________________________________________________________ 51
Editing the thumbnail image selected or "on" state ________________________________________________________ 52
Editing the thumbnail navigation links hover state ________________________________________________________ 53
Editing the thumbnail navigation links selected (on) state ___________________________________________________ 54
Editing the full-size image background color, border, and padding (matte)______________________________________ 55
CSS Notes _______________________________________________________________________________ 57
Included Images __________________________________________________________________________ 64
Product Support __________________________________________________________________________ 64
Knowledge Base__________________________________________________________________________ 64
Image Gallery Magic by PVII Page 3 of 91
Appendix: Interface Help Files________________________________________________________ 64

Creating a new Gallery using a Gallery Pack Layout _________________________________________ 65
Before You Begin__________________________________________________________________________________ 65
Open the Image Gallery Pack Interface _________________________________________________________________ 65
Create the New Page _______________________________________________________________________________ 67
The New Image Gallery Page is Created ________________________________________________________________ 68
The Page Assets ___________________________________________________________________________________ 68
Using PVII Image Gallery Magic ____________________________________________________________ 69
Overview ________________________________________________________________________________________ 69
Open the Image Gallery Magic interface ________________________________________________________________ 70
Managing the Images in the Gallery____________________________________________________________________ 72
Managing the Gallery Options ________________________________________________________________________ 75
The Interface Control Buttons ________________________________________________________________________ 77
Using the Automatic Fireworks Build Mode _________________________________________________ 78
Overview ________________________________________________________________________________________ 78
Selecting the Source Images__________________________________________________________________________ 80
Output Options ____________________________________________________________________________________ 83
Using the Manual Build Mode ______________________________________________________________ 86
Overview ________________________________________________________________________________________ 86
Selecting the Source Images__________________________________________________________________________ 87
© 2006 Project Seven Development. All Rights Reserved 3 of 91

Overview
Bring your images to life with the most powerful, feature-rich image gallery solution available for
Dreamweaver: Image Gallery Magic by PVII - the leader in creative Dreamweaver extensions.
Image Gallery Magic can create the entire layout for you or you can insert a gallery into an existing
page.
Optimizing and scaling of original images

Web-ready images are automatically produced from your original images, which can be located on
any drive connected to your computer - including drives mounted by your digital camera. Image
Gallery Magic handles all image processing automatically, using the Fireworks graphics engine.
Use Fireworks, Photoshop, or other editors...

While iGM makes quick work of existing images you've processed yourself in Photoshop, PSP, or
any other image editor, Fireworks users benefit from total and seamless interoperability. Simply
point iGM at a folder of images anywhere on your system - or to your Digital Camera's mounted
drive - and sit back and relax as your images are automatically scaled and optimized to your own
specifications - using the Fireworks engine. iGM will create both your full-size and your thumbnail
images - automatically. The size of your originals does not matter. Once your images are
processed, and your gallery built, you can use the Edit buttons in the iGM interface, at any time, to
load your images into Fireworks for further processing. If, however, you use another image editor,
such as Photoshop, you can process your thumbnails and full-size images first, then use Image
Gallery Magic's interface to locate your full-size images, associate them with their related
thumbnails, and build your gallery. The edit controls in iGM will load your images, for further
processing, into the image editing application you have set as default in your Dreamweaver
preferences.

No aspect ratio is ever harmed...

your images can vary in size or orientation
When Image Gallery Magic processes your images, they are never distorted in any way. Original
aspect ratios are always preserved.
Select from 6 professionally designed layouts...

or insert your gallery into an existing layout
Image Gallery Magic comes with a built-in PVII Page Pack™ engine, fueled with 6 gorgeous
layouts that you can create with one-click ease. Once your page is created, the Image Gallery
Magic system launches, enabling you to select and process images to complete your gallery. And
because styling is CSS-driven, you have control over the look and feel of your gallery.
Captions, descriptions, and counters

Image Gallery Magic allows you to mange image captions, descriptions, and even to include an
image counter - right from the comfort and convenience of the iGM User Interface window.
Bring your images to life...

in a gallery that is alive with interactivity
iGM thumbnails are presented in horizontal rows. You choose the number of thumbnails per row
and we provide smooth-glide scrolling between rows with automatically numbered links to each
row. If that's not cool enough, you can choose from 42 ways to animate the appearance of your
full-size images. 40 of these effects utilize efficient Direct-X, which is supported by IE5.5, IE6, and
IE7 on Windows. Other browsers will automatically use a cool fly-in effect powered by modern
DOM scripting.

Manage it all from within a dedicated window

All aspects of your gallery are managed from within the iGM user interface window.
• Add (append) new images to your gallery. You can use the automatic build mode, which
leverages the Fireworks image processing engine, or you can select images that you've
already processed yourself.
• Delete images or re-order them.
• Manage Captions, Descriptions, and a counter - including where they appear.
• Edit images (the edit command launches your default image editor and loads the selected
image).
• Choose a full-size image to load when your page loads.
• Select the number of thumbnails to display per row.
• Enable smooth-glide scrolling of thumbnail rows.
• Choose an animation effect for your full-size images.
• Supports Dreamweaver Templates.
• Allows bookmarking of individual images.
• Search-engine friendly.
Cross-browser and OS support

Image Gallery Magic works in virtually all modern browsers on Windows and OS X. Galleries
degrade gracefully in older browsers and are fully accessible to user agents that are not
JavaScript-enabled.
• MSIE 5.x
• MSIE 6.x
• Safari 1.x and up
• Firefox 0.7 and up
• Mozilla 1.x and up
• Netscape 7.x and up
• Opera 7.x and up

Before you begin...
Install the Image Gallery Magic extension

Look for the extension installer file p7_igm_109.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, restart
Dreamweaver.
Note: If the installer file name ends with a different number then listed above, don't panic. It simply means that there was a revision
to the extension that occurred after this user guide was written. 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.
Open a Defined Dreamweaver web 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 your page's assets. If you are new to
Dreamweaver or need to learn how to define a web site, please see this tutorial: Defining a
Dreamweaver Web Site
Locate the supplied igm_image_sets and workpage folders

When you unzipped the p7_igm archive, it contained a folder of images named igm_image_sets.
Make sure that folder is on a drive connected to your computer as you will be using it to build your
image galleries in the following tutorials. The folder can be anywhere on your system and does not
need to be in your defined site.
Your product archive also contains a folder named p7iGM_workpage. Move this folder into your
defined site. You'll need it for one of the tutorials in this guide.

Gallery creation methods

There are two ways to create an iGM gallery.
1. You can use iGM's Page Pack™ engine to select one of six available layouts. The system
will build your page automatically, then launch the iGM interface so that you can set up and
insert your gallery.
2. You can build and insert a gallery inside an existing page layout.
Image population methods

There are two ways to populate your gallery with images. We call them Build Modes:
1. Automatic Using Fireworks. The Fireworks graphics engine is used to automatically
process full-size and thumbnail images from your original images. Your original images are
preserved, untouched, in their original location.
2. Manual - select existing full-size and thumbnail images that were previously processed in
Photoshop, PaintShop Pro, or any other application. Image Gallery Magic will create copies
of your images and move those copies into your web site, leaving your originals untouched.

Creating a Complete Gallery with Page Pack™ layout

and Automatic Fireworks image processing
Using the Page Pack™ interface that comes with iGM, you can create a professionally styled page
with an integrated gallery - using Fireworks to process all of your images, automatically.
Note: To use the Automatic Build Mode, you must have Fireworks MX, MX2004, 8, or higher, installed.
Create your Page Pack layout page

Choose File - New PVII Page Pack - Image Gallery Packs.
The Page Pack window will open.
Select Sutton Place.
Click Create.

The Save As window will open.
Name your file mygallery.htm.
Tip: You can give your file any file extension supported by Dreamweaver, including .html, .php, .asp, .cfm, etc.
Click Save.
Your page will be created and opened and the Image Gallery Magic interface will launch
automatically.

Add images and set processing options

The Destination Folder will be created and managed by the system. While you can change this,
we recommend that you let the system manage this for you... especially if you will be setting up
multiple galleries.
Leave Build Mode set to Automatic Using Fireworks.
Click the Add button.

The Choose Source Image Folder dialog will open.
Browse to the supplied igm_image_sets folder that came with your product. Double-click it to
reveal the sea folder inside. Then double-click the sea folder and select the large folder inside of
that.
Click the Select button.

The Automatic Fireworks Mode Image Selection window will open.
Since this is a new gallery, Complete Gallery will be selected and the Append option will be
grayed out. Select one or more of the images to preview them.
Click Select All.
Leave Ignore Files with Leading Underscores and Prompt for File Overwrites checked.
Set your Thumbnail Size to 80px and your Full-Size image to Scale to Fit Within: 640 x 480.
Click OK.

You (and your images) will be returned to the main iGM window.
Set Image Captions and Gallery Options

If you select an image in the images list, its preview will appear. With an image selected you can
also set its caption, edit the image (we'll discuss that later) and add an additional (optional)
description.
In the Use Caption Prefix box, enter Seascapes, then click the first image in the images list and
you'll see the prefix "Seascapes:" appear for each image. You can further customize your gallery
by entering custom captions in the Caption/Alt Text box.
Select the first image and type into the Caption/Alt Text box, after the prefix, White cloud on the
horizon.
Click any image to refresh the interface.
Feel free to type in Captions and/or Additional Descriptions for any or all of the remaining images.
Now let's move to the bottom of the window and set Gallery Options.

Leave the Animation set to #27, but do feel free to explore all of the other ones at your leisure.
Leave Show Image 1 On Page Load as is.
Leave Show Counter checked.
Check or Uncheck Show Description based on whether or not you entered an Additional
Description for one or more of the images.
Leave Show Caption set to Below Full Size Image.
Set Thumbs per Row to 5.
Leave Center Thumbnails and Enable Scrolling both checked.
Click OK

Your gallery is built.
Save your changes.
Notice the assortment of landscape and portrait mode images. All images are scaled to your
specifications, but retain their natural aspect ratios. That is, no images are distorted or forced to
adhere to our layout.

Preview the page.
That's a lovely gallery you just made.

Adding (appending) a new image to your gallery

To simulate a real-world scenario, let's add a new image to the gallery.
Click the iGM icon in the Common section of your Insert Bar.
Alternatively, you can use the main Dreamweaver menu by choosing: Insert :: Studio VII :: Image Gallery Magic by PVII…
The main iGM window will open.
Leave Build Mode set to Automatic Using Fireworks.
Select the first image in the list and then click the Add button.
The Automatic Fireworks Mode Image Selection dialog will open.
reveal the extra folder inside. Then double-click the extra folder and select the large folder inside
of that.
Click Select to return to the Automatic Fireworks Mode Image Selection dialog.
There is only one image in that folder - a camel.

Select the image to see its preview. The camel is a bit sideways. We'll fix that in a moment.
Your Output options should all be the same as before:
Thumbnail Size: 80px and Scale to Fit Within: 640 x 480.
Click OK to return (with your camel) to the main iGM window.
The new image is returned to the images list in the second position, directly below the image that
you had selected prior to clicking the Add button.

Select image Number 2, the camel.
In the Image Editing row, with Full Size Image selected, click the Edit... button.

The full-size camel image will load into Fireworks.
Select the image and click the Rotate 90° CCW button
Tip: If the rotate button is not there, choose Window :: Toolbars :: Modify to show it.

The camel is now right side up, but he's hanging out of your canvas. To fix that, Choose:
Modify :: Canvas :: Fit Canvas.
Choose File :: Save to save your changes.
Switch back to your Dreamweaver application window.
Select another image then re-select the camel to refresh the interface.
The preview will change to reflect your edit.

Now that the full-size image has been corrected, we can also revise the thumbnail.
With the camel image selected, click the Re-Gen Thumb button.
Fireworks will process the change automatically. When its done you will get a file overwrite alert.
Accept the overwrite.
Click OK.
The thumbnail looks good.

Preview your gallery to check the full-size image.
The camel is perfect (well, at least his mom thinks so).

Build a Complete Gallery using a Page Pack™ layout and

Manual Build Mode Image Insertion
For this exercise, we'll use the Manual Build Mode to select existing thumbnail and full-size
images. Manual build mode allows you to import existing thumbnail and full-size images into your
gallery. If you do not have Fireworks, this is the method you will use to create all of your galleries.
Create your Page Pack layout page

Choose File - New PVII Page Pack - Image Gallery Packs.
The Page Pack window will open.
Select Basic Style .
Click Create.

The Save As window will open.
Name your file mygallery2.htm.
Tip: You can give your file any file extension supported by Dreamweaver, including .html, .php, .asp, .cfm, etc.
Click Save.
Your page will be created and opened and the Image Gallery Magic interface will launch
automatically.
Add images and set processing options

The Destination Folder will be created and managed by the system. While you can change this,
we recommend that you let the system manage this for you... especially if you will be setting up
multiple galleries.
Make sure Build Mode is set to Manual.

The Manual Mode Image Selection dialog will open.
reveal the insects folder inside. Then double-click the insects folder and select the large folder
inside of that.
Click Select to return with your images to the Manual Mode Image Selection dialog.

Select Matching Thumbnails
Select ins_01.jpg and a preview will appear.
Click the Assign Thumbnail Image button.
The Select Existing Thumbnail Image for: ins_01.jpg window will open.
Position the window so that the preview in the Manual Mode Image Selection dialog is visible
beneath.
Browse to the igm_image_sets folder. Double-click it to reveal the insects folder inside. Then
double-click the insects folder and select the sm folder inside of that.
Select ins_01small.jpg
The previews will match, confirming that you've selected the correct thumbnail.
Click OK.

The matching thumbnail is returned to the dialog and placed in the Thumbnail Images column.
Repeat the matching process until all of your full-size images have a matching thumbnail.
Click OK.
Your images will be returned to the main iGM window where we'll set gallery options.


also set its caption, edit the image and add an additional (optional) description.
In the Use Caption Prefix box, enter Insects, then click the first image in the images list and you'll
see the prefix "Insects:" appear for each image. You can further customize your gallery by entering
custom captions in the Caption/Alt Text box.
Select the first image and type into the Caption/Alt Text box, after the prefix, Butterfly.

Leave Show Caption set to Above Full Size Image.
Set Thumbs per Row to 5.
Click OK.

Save your changes.

Adding (appending) a new image to your gallery

To simulate a real-world scenario, let's add a new image to the gallery.
Click the iGM icon in the Common section of your Insert Bar.
Alternatively, you can use the main Dreamweaver menu by choosing: Insert :: Studio VII :: Image Gallery Magic by PVII…
The main iGM window will open.
Make sure Build Mode is set to Manual.
Select the first image in the list and then click the Add button.
The Manual Mode Image Selection dialog will open.
reveal the extra folder inside. Then double-click the extra folder and select the large folder inside
of that.

Click Select to return to the Manual Mode Image Selection dialog.
There is only one image in that folder - a camel.
Assigning a matching thumbnail
Select the image and click Assign Thumbnail Image.
Browse to the igm_image_sets folder. Double-click it to reveal the extra folder inside. Then
double-click the extra folder and select the sm folder inside of that.
Click Select to return to the Manual Mode Image Selection dialog.
Click OK to return to the main window.

The new image is returned to the images list in the second position, directly below the image that
you had selected prior to clicking the Add button.
The camel needs to be rotated. To do so:
Click the Edit... button.
Your default image editor will open with the image loaded.
Rotate it and then save it.
Switch back to Dreamweaver and the iGM window.

Change the selection in the Image Editing dropdown list to Thumbnail.
Click the Edit... button.
Rotate it and then save it.

Save your page and Preview it.
Your gallery is complete.

Using iGM with an existing page

If you do not want to use one of the PagePack™ page layouts, you can insert a gallery inside an
existing page. Your insertion point can be inside a table or a DIV. The width of the table cell or DIV
into which you are inserting the gallery needs to be kept in mind when choosing the size of your
thumbnails and the number of thumbnails to display per row. You want to make sure you have a
reasonably good fit. If not, use the iGM interface to either re-optimize your images for smaller
thumbnails, or reduce the number of thumbnails per row.
Inserting a gallery into an existing page

Locate the folder p7iGM_workpage that came with your product download. If you have not
already moved this folder into your current defined site, please do so now.
Expand the p7iGM_workpage folder and open workpage.htm.
Place your cursor at the end of the first paragraph, to the right of the period after the word "view".

Choose Insert :: Studio VII :: Image Gallery Magic by PVII...
The iGM window will open.
For this exercise, we'll use the Automatic Build Mode.
The Choose Source Image Folder dialog will open.

reveal the sea folder inside. Then double-click the sea folder and select the large folder inside of
that.
Click the Select button.
The Automatic Fireworks Mode Image Selection window will open.

Since this is a new gallery, Complete Gallery will be selected and the Append option will be
grayed out.
Click Select All.
Leave Ignore Files with Leading Underscores and Prompt for File Overwrites checked.
Set your Thumbnail Size to 80px.
Set your Full-Size image to Scale to Fit Within: 450 x 450.
Click OK.
You (and your images) will be returned to the main iGM window.


also set its caption, edit the image and add an additional (optional) description.
In the Use Caption Prefix box, enter Seascapes, then click the first image in the images list and
you'll see the prefix "Seascapes:" appear for each image. You can further customize your gallery
by entering custom captions in the Caption/Alt Text box.
Select the first image and type into the Caption/Alt Text box, after the prefix, White cloud on the
horizon.

Leave Show Caption set to Above Full Size Image.
Leave Thumbs per Row set to 4.
Click OK

Preview in your browser.
Save your page.

Direct Linking to Images

There may be times when you'd like to link directly to a full-size image. Perhaps there is a picture
of interest to a particular client or friend and that picture is the 3rd or 9th image in your gallery.
Image Gallery Magic allows you to accomplish your task. There are two ways you can do this.
Here is an example of the syntax for each method as it would display in code view:
1. <a href="workpage.htm#3">Load gallery and show image #3</a>

2. <a href="workpage.htm?pic=9">Load gallery and show image #9</a>
In your p7iGM_workpage folder, we've included a file named linktester.htm.
Open linktester.htm
Preview the page in your browser.
Click the first link: Load gallery and show image #3.

If you've completed the workpage tutorial, earlier in this user guide, workpage.htm will load, with
the third image selected.
Notice that the third thumbnail is highlighted and its associated full-size image is displayed.
Click your browser's back button

Click the second link in linktester.htm: Load gallery and show image #9.
Notice that the first thumbnail in the third row is highlighted (that would be the ninth image) and its
associated full-size image is displayed.
A very useful feature, indeed!

Editing your gallery style sheet

CSS is used to assign style attributes to your gallery. This gives you total stylistic control, but you
must be careful not to make extensive changes unless you fully understand the nature and
dependencies of the rules you edit. Let's begin this section by editing the workpage.htm gallery
created in a previous exercise in this guide.
Open workpage.htm
Open your CSS panel (Window :: CSS Styles)
Note: Different Dreamweaver versions may have different CSS panels. If yours is different, try to follow along as best you can, or
use your favorite third-party CSS editor. You can also open the CSS file p7gs/ p7gs_base.css directly.
In Dreamweaver 8 or higher, click the All tab at the top of your panel.
Expand the p7gs_base.css file to expose its rules.

Editing Thumbnail row background color

Let's change the background color of the thumbnail viewport. Two rules need to be edited.
Select #p7GSvpW3
Change its background-color to #4a4a4a.
Tip: In older Dreamweaver versions, double-click the rule to either open the CSS file or a popup CSS editor.
Now select #p7GSvp and change its background-color to the same number: #4a4a4a.

Editing the thumbnail image default state

Now select #p7GSsc img and change its background-color to: #4a4a4a.
Keep #p7GSsc img selected.
Change its border to 1px solid #6AAEF5.
Your gallery should look like this:

Editing the thumbnail image hover state

Select #p7GSsc .p7GSover.
Set background-color to: #4a4a4a.
Set border-color to: #C9AC6A.

Editing the thumbnail image selected or "on" state

Select #p7GSsc .p7GSon.
Set background-color to: #FFFFFF.
Set border-color to: #000000.

Let's edit the colors for the Thumbnail Panel navigation buttons. The default state is fine, we'll edit
the hover and selected (on) states.
Editing the thumbnail navigation links hover state

Select #p7GSnv a:hover, #p7GSnv a:active, #p7GSnv a:focus.
Set background-color to: #C9AC6A.

Editing the thumbnail navigation links selected (on) state

Select #p7GSnvon.
Set background-color to: #6AAEF5.

We're almost done. As a finishing touch, let's edit the background and matte for the full-size
images.
Editing the full-size image background color, border, and padding (matte)
Select .p7GSfsi.
Set background-color to: #4a4a4a.
Set border-color to: #000000.
Set padding to 6px.

Preview your page
That's it!

CSS Notes
The CSS files used by each of the style themes are similarly structured. Let's have a look at one.
Please do heed the notes and advisories in red.
/*
-----------------------------------
Gallery Magic Style Sheet
by Project Seven Development
Insert-Mode CSS
-----------------------------------
*/
#p7GS {
font-family: Arial, Helvetica, sans-serif;
}
This rule defines the overall container for your gallery. Use this rule to set the font-family for your gallery. Do not add
any other properties to this rule.
#p7GSvpW3 {
margin: 0 auto;
background-color: #FFFFFF;
border: 1px solid #333333;
}
This is the outer wrapper for the thumbnail viewport. You can edit the background-color and the border. If you are
using a Page Pack layout, this rule might also assign a background image. Do not edit or remove the margin.
#p7GSvp {
margin:0 auto;
background-color:#FFFFFF;
position:relative;
}
This is the thumbnail viewport. Edit only the background-color. If you are using a Page Pack layout, this rule might also
assign a background image. Do not edit or remove margin or position.
#p7GSsc {
position:relative;
margin:0;
}
This is the thumbnail wrapper. Do not edit or alter this rule in any way.

/* ------------ Hide Description --------------------- */

#p7GSsc div {display: none;}
This is the Description container. Do not edit or alter this rule in any way.
/* ------------ Thumbnail Lists --------------------- */

#p7GSsc ul {
margin:0;
padding:0;
position:relative;
}
This is the unordered list that defines each thumbnail row. Do not edit or alter this rule in any way.
#p7GSsc li{
margin:0;
padding:0;
list-style-type: none;
display:inline;
}
This is the list item that defines each individual thumbnail. Do not edit or alter this rule in any way.
#p7GSsc img {
padding: 6px;
opacity: 1;
filter: alpha(opacity=100);
margin: 6px 6px;
}
This rule styles the thumbnail images. We suggest you leave the margin declaration as it is, but feel free to edit the
other properties. The opacity (Firefox and Safari) and alpha filter (MSIE) can be used to make the thumbnails semi-
transparent. To do so, set opacity to a fraction and the alpha filter to less than 100. To make the thumbnails 20%
transparent, use: opacity: .8 and filter: alpha(opacity=80).

/* ------ Thumbnail Hover and Down Classes ------------------------------- */
#p7GSsc .p7GSover {
border-color: #FF9900;
opacity: 1;
}
This rule styles the thumbnails when they are being moused over. All declarations can be edited. If, for example, you
had set transparency in the previous rule, the 1 and 100 settings in this rule would serve to make the thumbnails totally
opaque when moused over – a very cool effect, which is used in several of the iGM PagePack layouts.
#p7GSsc .p7GSon {
opacity: 1;
background-color: #999999;
border-color: #333333;
}
This rule styles the selected thumbnail – the one that relates to the currently showing full-size image.
/* ------------ Thumbnail Nav Styles ------------ */

#p7GSnv {
margin: 0;
padding: .25em 0;
font-size: 0.75em;
border: 1px solid #FFFFFF;
color: #333333;
text-align: left;
}
This is the container for the thumbnail row navigation buttons. Please limit yourself to editing only the properties that
are already declared.
#p7GSnvtitle {
margin: 0 10px 0 0;
display: inline !important;
color: #333333;
}
This rule is the container for the thumbnail row navigation title. Edit only the color.

#p7GSnv span {
display: none;
}
Do not edit this rule in any way.
#p7GSnv a {
padding: 0 .5em;
color: #333333;
font-weight: normal;
text-decoration: none;
}
This rule defines the default link state for the thumbnail row navigation buttons.
#p7GSnv a:visited {
color: #333333;
}
The visited state of the thumbnail navigation buttons.
#p7GSnv a:hover,
#p7GSnv a:active,
#p7GSnv a:focus {
border-color: #333333;
color: #FFFFFF;
background-color: #FF9900;
}
The hover, active, and focus states of the thumbnail navigation buttons.
.p7GSnvon {
color: #FFFFFF!important;
border-color: #333333 !important;
background-color:#AEBF3F !important;
cursor: default;
}
The selected “on” state of the thumbnail navigation buttons. The !important directives are used to lock those properties
to their declared values, and to show a default cursor, when the buttons are moused over.

/* ------------FULLSIZE IMAGE ---------------- */

/* WRAPPER */
#p7GSfs {
margin: 12px 0 12px 0;
display: none;
}
/* FullSize Row Construct */

.p7GSfst {
width: 1px;
margin: 0 auto;
}
/*IMAGE ROW*/
.p7GSfsi {
padding: 4px;
}
This is the containing element for the full-size image. Background-color and padding are used to create a matte around
the image. Edit the three included properties. Do not add additional properties.
/* IMAGE */
.p7GSfsi img {
padding: 0;
}
The full-size image. Please limit yourself to using padding and border only.

/* -------------------------- IMAGE CAPTION ---------------- */

/* CAPTION ROW */
.p7GSfsc {
color: #333333;
padding: 3px 0;
}
The caption container.
.p7GSfsc p{
font-size:0.9em;
}
The caption text, which is inside a paragraph.
/* ------------------------- IMAGE DESCRIPTION ------------- */

/* DESCRIPTION ROW */
.p7GSfsd {
padding: 0;
font-size: .9em;
}
This is the outer container for the description.
.p7GSfsd div {
margin: 0px;
padding: 6px 0 0 0;
color: #333333;
}
This is the inner wrapper for the description.
.p7GSfsd p {
margin: 0px;
}
This rule styles the paragraphs inside the description DIV.

/* ------------- progress bar div ----------------- */

#p7GSpb {
position:absolute;
visibility:hidden;
}
/* ------------- placeholder div for loading image ---------- */

#p7GSah {
position:absolute;
left:0px;
top:0px;
visibility:hidden;
z-index: 1000;
}
/*COUNTER*/
.p7GScounter {
letter-spacing: normal;
font-weight: normal;
text-transform: lowercase;
}
You may edit the font-weight only.

Included Images
When you use the Page Pack™ interface to create a gallery, the system generates an editable
Fireworks PNG, P7Gallery_h.png, and stores it in a folder named Fireworks. Use this image to
edit the background images for your gallery pages.
When editing the images, we recommend leaving the slice dimensions unchanged.
Product Support
For all of your support concerns please refer to the main Support Page at ProjectSeven.com for options.
Knowledge Base
Log on to the PVII Knowledge Base to check the latest tips, tweaks, and solutions specifically for
Image Gallery Magic.
Appendix: Interface Help Files

The following pages are copies of the help files that you can also access by clicking the help button in the
iGM interface. They are copied here to give you a convenient way of printing them.

Creating a new Gallery using a Gallery Pack Layout
Before You Begin

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is
necessary so that Dreamweaver knows how to link your page's assets. If you are new to
Dreamweaver or need to learn how to define a web site, please see this tutorial:
Defining a Dreamweaver Web Site
Open the Image Gallery Pack Interface

-Choose File > New PVII PagePack > Image Gallery Packs from the main Dreamweaver menu.
Note: You do not need to have a page open in Dreamweaver. The Gallery Pack will create and open the new page automatically.
The Image Gallery PagePack interface will open.

Select the Gallery Type
The Gallery Type panel will list all of your installed Image Gallery Packs.
Note: The first listed pack will automatically be selected when the interface first opens.
-Select a Gallery Type in the left panel.
Select a Layout Theme
The center panel lists all of the page designs or style themes available for the selected Gallery
Type. Each Gallery Pack is usually shipped with a variety of layout or style theme approaches, to
allow you to pick a layout or style theme that best approximates your needs.
-Select a Layout Theme from the list in the center panel.
Preview
The third panel provides a preview of the selected Layout Theme. This Preview will change
whenever you select a different Layout Theme.

Create the New Page

-Click the Create button to create your Image Gallery page.
The Save As dialog box will open.
-Use the navigation controls to navigate to an existing folder - or create a new folder - in which to
save your new Gallery Pack page. For this example we created a new folder named
ImageGallery_Test. All of the related page assets (images, styles, scripts, as well as an editable
Fireworks document) will also be created in this folder.

-Enter a file name for the new page. In this example we entered myPage.htm as the file name.
Tip: Be sure to enter a valid file extension (usually .htm or .html) for this page. If you do not enter a file extension then the system
will automatically use the default file extension type that you have defined in Dreamweaver Preferences. You can enter any file
extension you like (.asp, .cfm, .php, .shtm, etc) - just be sure that it is valid web page file extension.
-Click the Save button to create the new page.
The New Image Gallery Page is Created

A new Gallery Pack page will be created using the filename that you entered. The page will then
open directly in Dreamweaver. The page has already been saved and the Image Gallery Magic
interface will open so that you can begin to work on adding your images to the gallery.
The Page Assets

The system has also created several sub-folders that contain the related page assets.
Note: Your actual file listing will be different depending on the Gallery Type you are working on and the Page Layout Theme choice
made in the interface.

Using PVII Image Gallery Magic
Overview
There are two ways to create an iGM gallery. You can use iGM's Page Pack™ engine to select a
layout and build a gallery inside that layout, or you can build and insert a gallery inside your
existing page layout. There are also two ways to add images to your gallery: automatically (using
Fireworks) or manually - selecting existing images that were processed in Photoshop, PaintShop
Pro, or other applications.
About the Image Gallery Magic Files
When your gallery is built the system will create a folder named p7gs in the same folder that your
page is in. The p7gs folder contains the Image Gallery Magic JavaScript file and related CSS (style
sheet) file. The system will also create an images folder inside the p7gs folder. The images folder
contains the progress bar image and gallery style images.
The system will also create a destination folder that will contain the full size and thumbnail images
for your gallery, the default name for this folder is p7hg_img_1, but you can choose a different
name and location from within the user interface. Inside this folder will create a sub folder named
full-size which will contain all of your full size images, and a sub folder named thumbs which will
contain all of your thumbnail images.
Note: The system will always create the p7gs folder in the same folder as your current page.

Open the Image Gallery Magic interface

The Image Gallery Magic main user interface will be opened automatically if you are creating a
new Image Gallery Pack. In all other instances, including subsequent modifications, use the
following procedure to open the interface:
-Click the PVII Image Gallery Magic icon in the Common category of the Insert Toolbar.
Alternatively, you can use the main Dreamweaver menu by choosing:

Insert > Studio VII > Image Gallery Magic by PVII…
The Image Gallery Magic user interface will open.

The interface is divided in two sections. The top section is where you manage the images in your
gallery. The bottom section allows you to set various options that control the gallery's appearance
and functionality.

Managing the Images in the Gallery
Destination Folder
The Destination Folder is where iGM will store your processed images. Each time you create a
new gallery, the system will create a new folder in your defined Dreamweaver site, ending with an
underscore and a number which designates its associated gallery page. While you can change the
name of this folder, like p7hg_img_1, p7hg_img_2, etc. We recommend that you let the system
manage it. Inside this destination folder the system will create two sub folders:
• fullsize -Contains all of the optimized full size gallery images.
• thumbs - Contains all of the thumbnail gallery images.
The Browse... button opens a Choose the Source Image Folder dialog box that allows you to
select a different folder location or to create your own destination folder.
Note: The Destination Folder is active only when creating a new gallery. Once you have added images to the gallery both the
Destination Folder box and the Browse button will be grayed out and locked from further change. This is to assure that all of your
gallery images are maintained within the same destination folder.
Build Mode
The system allows you to add new images to the gallery in two different ways:
Manual
The Manual Build Mode allows you to quickly import set of existing full size images and their
corresponding thumbnails. The system will perform no optimization, or any other changes, to you
images. For users that do not have Fireworks installed this will also be the only Build option
available. See the Manual Mode Help Document for complete details on using the Manual Mode
interface.
Automatic Fireworks Mode

The Automatic Build Mode allows you to quickly select a set of raw source images and
automatically create the optimized full size and thumbnail images for you. This Build Mode will be
unavailable (grayed out) if Fireworks is not installed. See the Automatic Build Mode Help
Document for complete details on using the Automatic Mode interface.

Gallery Action Buttons
Add
Click the Add button to add images to the gallery. The system will open the Manual or Automatic
Using Fireworks interface depending on which Build Mode option is selected.
Delete
The Delete button will remove the selected image in the Images list from the gallery.
Up
The Up button will move the selected image in the Images list up one row. Successive clicks will
keep moving the image up one row per click until the image is at the top of the list.
Down
The Down button will move the selected image in the Images list down one row. Successive clicks
will keep moving the image down one row per click until the image is at the bottom of the list.
Images
The Images list contains all of the images that will appear in the gallery. Each line is numbered for
easy reference. The Image Caption / Alt Text column displays the actual caption that will be
displayed with the full size image. This caption is also use as the Alt text for the thumbnail image.
Image File Name
The Image File Name box is provided as a handy reference to allow you to view the actual file
name of the image that is currently selected in the Images list. This box will always appear grayed
out and is not editable.
Image Editing
The iGM system also allows you to quickly edit any image in the gallery without having to close
down the interface. You can select to edit either the Full Size Image or the Thumbnail Image from
the drop down list.

Edit...
Click the Edit button to launch your primary image editor with the current image already loaded and
ready for edits. The system will use the program that is defined as your Primary Image Editor for
the image file type in Dreamweaver Preferences. The iGM interface remains open while you are
editing the image.
Note: When using Fireworks in Edit Mode always save your changes by choosing File-Save. Never use File-Export or the Export
button in the Fireworks Image Preview window because this will result in a re-compression of your already optimized image.
Optimize...
Click the Optimize button to launch a Fireworks Optimization session for the currently selected
image. If the gallery images have been built using the Automatic Fireworks Mode then this button
should not be used since the images have already been optimized. This feature is useful for
optimizing the selected image when the Manual Mode has been used to add the image to the
gallery.
Note: This button will be unavailable (grayed out) if Fireworks is not installed.
Re-Gen Thumb
Click the Re-Gen Thumb button to automatically regenerate the thumbnail for the selected image
in the Images list. This handy feature allows you to quickly produce a new thumbnail if you have
made any changes to the full size image. The system will use the thumbnail optimization settings
from your last Add session.
Note: This button will be unavailable (grayed out) if Fireworks is not installed.
Caption/Alt Text
The Caption/Alt Text box contains the Caption that will be displayed with the full size image that is
selected in the Images list. This text is also used to provide the Alt text for the corresponding
thumbnail image. You can enter anything you like or accept the system defaults. Although you can
choose to present the gallery with no Caption text displayed this box must still contain the Alt text
for the thumbnail. The iGM system includes some handy automatic options that control the
contents of the Caption text:
Use File Name

Check this box to have the system automatically use the image file name as the caption. The
filename will be presented with the underscore ( _ ) character stripped out and words will be
automatically capitalized. Successive clicks will toggle the Use File Name option on and off. The
caption for all of the images in the Images list will be immediately changed to reflect your choice.

Use Caption Prefix

The iGM system includes an automatic Caption Prefix option that allows quick and automated
building of the caption text. Each caption will be prefaced by the text contained in the Use Caption
Prefix box. Un-check the box to turn off this feature, all of the images in the Images list will
immediately reflect the revised caption text. Successive clicks will toggle this option on or off, the
Images list will be updated each time to reflect the current option setting.
Additional Description (Optional)
The Additional Description box allows you to supply additional text that will display underneath the
full size image in the gallery. You can enter normal text or you can enter actual html markup into
this box. When entering html markup you can create paragraphs, heading, and even links. Leave
this box blank if you do not wish to show any additional descriptive text with the image.
Managing the Gallery Options
Animation
The iGM system allows you to select from one of 42 different transition effects that appear when
the full size image is loading. Select 0-No Animation if you want to turn this feature off. Choices 1
and 2 are using modern DHTML techniques to provide the animation, choices 3 through 42 use the
modern IE DirectX Image Transformations to provide the effect, and will be seen only in IE
browsers version 5.5 and up. The system will automatically provide the DHTML-Fly In animation
effect for all other browsers that do not support the DXImage transitions.
Show Image On Page Load
When checked (on) the system will load the specified full size image automatically when the page
first loads into the browser. Enter the number for the image you wish to load using the Number
column of the Images list as a reference. Do not enter a zero. You can turn off this feature by un-
checking the box.

Show Caption
The iGM system allows you to control the location of the full size image caption text, or even
prevent from displaying at all. Select the option from the drop down list:
• Do Not Display Caption
• Above Full Size Image
• Below Full Size Image
Show Counter
The Show Counter option will automatically display an image counter to the right of the caption
text. The counter will show as: (1 of 24), indicating the current image number and the total number
of images. This is a handy way to provide location reference within the gallery.
Show Description
With the Show Description box checked the system will display the Additional Description text, if
available, that has been entered for each image. This text will be display underneath the full size
image. Un-check this box if you do not wish to use the Additional Description feature.
Thumbs Per Row
The iGM system allows you to control the number of thumbnails that will be displayed in each row
of the thumbnail viewer. Select the number (2 to 20) in the drop down list. Be sure that you select a
number that will adequately fit into the available page space for the thumbnail viewer. The default
is 4, with 5 or 6 also providing a good presentation. If you choose a higher number than be sure
that your thumbnails are set to an appropriate smaller size.
Center Thumbnails
The thumbnail presentation is set to center each thumbnail in its own invisible boundary box
relative to the other thumbnails, both vertically and horizontally. This is desired when using
thumbnails of different size or orientation. Un-check this box to display each thumbnail at the top
left corner of its boundary box.
Enable Thumbnail Scrolling
The iGM system provides a smooth scrolling effect when you move from one thumbnail panel to
another. The animation is scaled so that larger movements will accelerate the scrolling to minimize
the amount of time to view the desired row. Un-check this box if you do not wish to use this feature.

The Interface Control Buttons
OK
When you are done adding images and setting your desired options click the OK button to build
the gallery. The system will verify your selections and alert you to any problems that need your
attention. If there are no problems the interface will close and the gallery will be added to your
page. You can preview in a browser to operate the gallery and check its functionality. To make
further changes, you simply open the Image Gallery Magic interface and begin your modifications.
Cancel
Click the Cancel button to completely abort the current Image Gallery Magic 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 interfaces.

Using the Automatic Fireworks Build Mode
Overview
Web-ready images are automatically produced from your original images, which can be located on
any drive connected to your computer - including drives mounted by your digital camera. Image
Gallery Magic handles all image processing automatically, using the Fireworks graphics engine.
While iGM makes quick work of existing images you've processed yourself in Photoshop, PSP, or
any other image editor, Fireworks users benefit from total and seamless interoperability. Simply
point iGM at a folder of images anywhere on your system - or to your Digital Camera's mounted
drive - and sit back and relax as your images are automatically scaled and optimized to your own
specifications - using the Fireworks engine. iGM will create both your full-size and your thumbnail
images - automatically. The size of your originals does not matter. Once your images are
processed, and your gallery built, you can use the Edit buttons in the iGM interface, at any time, to
load your images into Fireworks for further processing.
Open the iGM Automatic Mode interface
The Automatic Fireworks Mode Image Selection interface will open whenever you click on the Add
button with the Automatic Using Fireworks radial button selected in the main iGM interface.

The interface is divided in two sections. The top section is where you select the image source
folder and the images to be placed into the gallery. The bottom section allows you to set the
various thumbnail and full size image optimization options.

Selecting the Source Images
Create Mode
The Create Mode determines how the selected gallery images are added to the main iGM
interface:
Complete Gallery
Choose this option when you want your selected images to fully replace ALL of the existing
images in the Images list box in the main iGM interface. This option effectively creates a new
gallery, replacing any current images with the newly selected images. This will be the only option
available when you are creating a new gallery.
Append to Existing Gallery

Choose this option when you want to ADD more images to your existing gallery. The selected
images will be added directly after the currently selected image in the Images box of the main iGM
interface.

Source Image Folder
Use the Browse... button to navigate to the location of the source images for your gallery.
-Click on the folder name that contains your source images, then click the Open button to choose
that folder, and then click the Select button to close the dialog box. You can navigate to any folder
on your system, including any mounted or shared drives and your digital camera.
Note: This standard Dreamweaver Browse for Folder dialog box will only display the folder names, none of the file contents will
show.
When the dialog box closes the interface will automatically list all of the supported images that are
contained in that folder.

Select All
Click the Select All button to select (highlight) all of the images that appear in the Select Images to
Add to the Gallery listing.
De-Select All
Click the De-Select All button to un-select all of the images that appear in the Select Images to
Add to the Gallery listing.
Select Images to Add to the Gallery
This box lists all of the images that were found in the Source Image Folder. You select the images
that you wish to add to the gallery by simply clicking on the image to highlight its row. A preview of
the image is presented in the panel to the right of this box. Only the images that are selected
(highlighted) will be added to the gallery.
To select multiple, consecutive, images - Select the first image then hold down the Shift key and
click on the last image that you wish. All of the images between your first selection and last
selection will be highlighted.
To select multiple, non-consecutive images - Select an image, then hold the CTRL key (for
Apple use the Command key) down while clicking on the other images you wish to select. Each of
the images that you clicked on will be highlighted.
Image Type
The Image Type selection allows you to filter the source images by image type. The default is All
Supported Types, which accepts all of the supported image types. If you wish to filter the image
listing to show only the .jpg images in your source folder then select GIF in the drop down list.
Supported file types for the source images are: GIF, JPG, JPEG, JPE, PNG, BMP, TIF, TIFF, PSD,
PIC, PCT, and PICT.

Ignore Files with Leading Underscore
With this box checked (default) the system will bypass any image whose filename starts with the
underscore ( _ ) character. This provides a convenient way to prevent these images from
appearing in the listing.
Prompt for File Overwrite
With this box checked (default) the system will show a confirmation prompt if the optimized image
or thumbnail is about to over-write an existing image.
Output Options
Thumbnail Format
Choose the desired image format for the thumbnail image:

• GIF webSnap 128
• GIF webSnap 256
• JPEG -better quality (default)
• JPEG -smaller file
In most case the default JPEG -better quality format is the best choice. Choose a lower quality
format, like GIF webSnap 256 or 128 when thumbnail file size becomes an issue.
Thumbnail Size
Enter the desired size, in pixels, for the thumbnails. The size you enter will be used to constrain the
height or width of the thumbnail, the aspect ratio of the original image will remain in tact, there will
never be any image stretching. The iGM system is designed to accommodate different size
thumbnails and different thumbnail orientation seamlessly. The default is 100px, and is an
adequate size when presenting 4 or 5 thumbnails per row. Enter a lower size, 72, or even 60,
when presenting more than 6 thumbnails per row.

Full Size Format
Choose the desired image format for the full size image:
• GIF webSnap 128
• GIF webSnap 256
• JPEG -better quality (default)
• JPEG -smaller file
In most case the default JPEG -better quality format is the best choice for full size images.
Full Size Image Optimization Options
Use Original Image -No Optimization

Choose this option if you do not want the system to process you full size image in any way. This
option will simply copy your full size image into the gallery, but will still create the corresponding
optimized thumbnail.
Scale to Fit Within

The Scale to Fit Within option allows you to select the maximum width and height that you want for
your full size images. This acts to constrain the image size to either height or width, without
stretching the image or affecting the aspect ratio in any way. This guarantees that your full size
images will fit properly inside the html elements of your page. Images that are already smaller than
the dimensions specified will not undergo any scaling or change in size. Enter width and height, in
pixels, that should constrain the image size. Smaller images will not be affected.
Scale Image
The Scale Image option will reduce the full size image by a percentage of the source image size.
This will act on all selected images, regardless of the size. For example, entering 80 into the box
will adjust full size image dimensions to be 80% of the corresponding source image.

OK
When you are done selecting the images you wish to add to the gallery, click the OK button to
build the gallery. The system will verify your selections and open Fireworks to begin the
optimization and import process. The system will alert you to any problems that need your
attention. If there are no problems the full size images and thumbnails will be imported into the
gallery. The interface will close and return you to the main iGM interface, which will reflect the
additional images in the Images list.
Cancel
Help

Using the Manual Build Mode
Overview
If you do not have Fireworks installed the iGM system will automatically set the gallery into Manual
Mode. While this mode does not perform any automatic thumbnail creation or optimization the
gallery can be quickly created using your existing images. You can use any other image editor,
such as Photoshop, to process your thumbnails and full-size images first, then use Image Gallery
Magic's interface to locate your full-size images, associate them with their related thumbnails, and
build your gallery. Once you have selected the images and thumbnails the edit controls in the main
iGM interface will allow you to load your images into your primary image editor, for further
processing if desired.
Open the iGM Manual Mode interface
The Manual Mode Image Selection interface will open whenever you click on the Add button with
the Manual radial button selected in the main iGM interface.

Selecting the Source Images
Create Mode
The Create Mode determines how the selected gallery images are added to the main iGM
interface:
Complete Gallery
Choose this option when you want your selected images to fully replace ALL of the existing
images in the Images list box in the main iGM interface. This option effectively creates a new
gallery, replacing any current images with the newly selected images. This will be the only option
available when you are creating a new gallery.

Append to Existing Gallery

Choose this option when you want to ADD more images to your existing gallery. The selected
images will be added directly after the currently selected image in the Images box of the main iGM
interface.
Full Size Image Source Folder
Use the Browse... button to navigate to the location of the source images for your gallery.
-Click on the folder name that contains your source images, then click the Open button to choose
that folder, and then click the Select button to close the dialog box. You can navigate to any folder
on your system, including any mounted or shared drives and your digital camera.
Note: This standard Dreamweaver Browse for Folder dialog box will only display the folder names, none of the file contents will
show.
When the dialog box closes the interface will automatically list all of the supported images that are
contained in that folder.

Full Size Images / Thumbnail Images
This box lists all of the images that were found in the Full Size Image Source Folder. You select
the images that you wish to add to the gallery by simply clicking on the image to highlight its row
and then clicking the Assign Thumbnail button to select the corresponding existing thumbnail
image. A preview of the full size image is presented in the panel to the right of this box. Only the
images for which you have selected a thumbnail image will be added to the gallery.
Assign Thumbnail Image
With a full size image selected, click this button to select this image's corresponding existing
thumbnail image.
The Select the Existing Thumbnail Image for: (full size image file name) dialog box will open.
-Navigate to the folder that contains the thumbnail image, select the image and click OK. The
dialog box will close and the interface will now display the selected thumbnail in the right half of the
panel, on the same line as its corresponding full size image.

-Repeat this procedure for each image you wish to add to the gallery.
Un-Assign Thumbnail Image
You can de-select the thumbnail image at any time. Click this button to de-select the thumbnail
image. The thumbnail file name will be removed from the listing and the corresponding full size
image will not be added to the gallery.
Prompt for File Overwrites
With this box checked (default) the system will show a confirmation prompt if the optimized image
or thumbnail is about to over-write an existing image.

OK
When you are done assigning the thumbnail for each image that you wish to add to the gallery,
click the OK button to build the gallery. The system will verify your selections and alert you to any
problems that need your attention. If there are no problems the full size images and thumbnails will
be imported into the gallery. The interface will close and return you to the main iGM interface,
which will reflect the additional images in the Images list.
Cancel
Help

Image Gallery Magic: User Guide

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Image Gallery Magic: User Guide

Загружено:

Авторское право:

Доступные форматы

Image Gallery Magic: User Guide

©2006 Project Seven Development. All Rights Reserved.

Al Sparber and Gerry Jacobsen, Co-Founders

Appendix: Interface Help Files________________________________________________________ 64

© 2006 Project Seven Development. All Rights Reserved 3 of 91

Optimizing and scaling of original images

Use Fireworks, Photoshop, or other editors...

© 2006 Project Seven Development. All Rights Reserved 4 of 91

No aspect ratio is ever harmed...

Select from 6 professionally designed layouts...

Captions, descriptions, and counters

Bring your images to life...

© 2006 Project Seven Development. All Rights Reserved 5 of 91

Manage it all from within a dedicated window

Cross-browser and OS support

© 2006 Project Seven Development. All Rights Reserved 6 of 91

Before you begin...

Install the Image Gallery Magic extension

Open a Defined Dreamweaver web site

Locate the supplied igm_image_sets and workpage folders

© 2006 Project Seven Development. All Rights Reserved 7 of 91

Gallery creation methods

Image population methods

© 2006 Project Seven Development. All Rights Reserved 8 of 91

Creating a Complete Gallery with Page Pack™ layout

Create your Page Pack layout page

The Page Pack window will open.

Select Sutton Place.

© 2006 Project Seven Development. All Rights Reserved 9 of 91

The Save As window will open.

Name your file mygallery.htm.

© 2006 Project Seven Development. All Rights Reserved 10 of 91

Add images and set processing options

Leave Build Mode set to Automatic Using Fireworks.

Click the Add button.

© 2006 Project Seven Development. All Rights Reserved 11 of 91

The Choose Source Image Folder dialog will open.

Click the Select button.

© 2006 Project Seven Development. All Rights Reserved 12 of 91

The Automatic Fireworks Mode Image Selection window will open.

Click Select All.

© 2006 Project Seven Development. All Rights Reserved 13 of 91

Set Image Captions and Gallery Options

Click any image to refresh the interface.

© 2006 Project Seven Development. All Rights Reserved 14 of 91

Leave Show Image 1 On Page Load as is.

Leave Show Counter checked.

Leave Show Caption set to Below Full Size Image.

Set Thumbs per Row to 5.

Leave Center Thumbnails and Enable Scrolling both checked.

© 2006 Project Seven Development. All Rights Reserved 15 of 91

Your gallery is built.

Save your changes.

© 2006 Project Seven Development. All Rights Reserved 16 of 91

Preview the page.

That's a lovely gallery you just made.

© 2006 Project Seven Development. All Rights Reserved 17 of 91

Adding (appending) a new image to your gallery

The main iGM window will open.

Leave Build Mode set to Automatic Using Fireworks.

The Automatic Fireworks Mode Image Selection dialog will open.

There is only one image in that folder - a camel.

© 2006 Project Seven Development. All Rights Reserved 18 of 91