Installing Art Gallery Magic (AGM)

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. To install AGM, open your Adobe Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Overview:

The Perfect Gallery Tool for Dreamweaver

One of the best reasons for using Dreamweaver is that it gives you the ability to use PVII widgets and tools, which are in a class by themselves. You will not find an open source gallery tool with the power, features, and elegance of AGM anywhere because at PVII we program from the ground up and are not constrained by the limitations of anyone else's JavaScript or CSS libraries.

How it works

The AGM interface opens inside Dreamweaver, giving you the means to create multi-categoried responsive galleries in record time. An image import facility allows you to quickly populate your galleries with images . You can import full-size and thumbnail images. Once your images are imported, you can choose from various configuration options and animation methods, including a Ken Burns motion effect.

Amazing, yeah?

Accessing the AGM Interface (UI)

The AGM interface is your command center. It's simple, straightforward layout will allow you to craft cutting edge galleries lickety-split.

To access the UI, place your cursor on your page where you want to create your AGM gallery. To open the UI, locate and click the AGM icon on your Insert Bar or Panel inside Dreamweaver:

Insert Bar

Choose the PVII tab (or the PVII category if your insert bar is configured with a drop-down menu)

The AGM icon is the last one in the screen capture above.

Insert Panel

Choose the PVII category from the drop-down list at the top of your Insert Panel.

The AGM icon is the last one in the screen capture above.

Note: If you can't find your Insert Bar or Panel, you probably hid it at one point. To access it, choose Window > Insert from the Window menu along the top of Dreamweaver.

The AGM UI will launch in the appropriate mode. If your cursor was positioned in a blank area of the page, and outside any other AGM instance, the UI will open in Create New Art Gallery Magic mode.

If your cursor is positioned inside an existing AGM gallery, the UI will open in Modify mode.

The Help Button

The Help button in any of the AGM UI screens will open this page online, assuming you are connected to the internet.

The Remove Button

The Remove button is present only when the UI is in Modify mode. Clicking it will remove the selected gallery from your page. If it is the only gallery, it will also remove the links to the AGM script and CSS files.

Interface Settings & Options

Let's go over the UI, and how all of the features work. To do that, let's work with a screen capture of the UI in Modify mode:

The Images List is a tree view, showing each of your categories as a top-level item, with the images nested into sub-levels. Above the list is a row of command buttons, allowing you to Add or Delete images and categories, or move them Up and Down. There is also a Command button to launch the import facility.

Category

Enter your category name in this box. When you create a new gallery, a single category is automatically created called New Category, which serves as a placeholder until you provide your own category name.

Image Path

If you add an image manually, use this box to enter or change the path to your full-size image. You can also use the convenient Browse button.

Note: If you use the Import Facility (covered later in this guide) the image path, and the thumbnail path (if necessary) will be automatically filled in for you.

Thumbnail Path

If you add an image manually, use this box to enter the path to your thumbnail image—if you are using thumbnails in your gallery. You can also use the convenient Browse button.

Alt Text

When you add or import images, the Alt Text is automatically entered as the image name. Since Alt text is important in terms of search engine optimization, you might want to take the time to edit this element to more meaningful text. For best practices, Alt text should be as short as it can be while still providing good context. Only text may be entered. Do not add HTML markup of any kind.

Image Link Path

Each of your full-size images can be a link to another web page. To make it so, simply select an image in the Images List and enter the path to its link in this box. You can also use the browse button to browse to a file within your defined local site.

Title

You can add a text title (please keep it concise) that will pop up as a tooltip in the browser when the linked image is hovered over. Only text may be entered. Do not add HTML markup of any kind.

Target

You can set a target for your image link. If you want your image links to open in a new window or tab, we suggest using the same target for all such links. A good suggestion would be: image_links. Having the same target will cause all image links to open in the same new window or tab, rather than a new one for each link.

Caption

Enter a caption for any or all of your images. This box will accept plain text or HTML markup.

Global Options

These options apply to the entire AGM Gallery.

Startup

Select from the following Startup options:

Default Category

If you have more than one category, select the one that will be selected when the page launches. The default is Category 1.

Default Image

The first image is default, but you can enter any other image number if you desire.

Auto Play on Page Load

With this option selected, the gallery will play automatically when the page is loaded.

Open in Fullscreen

Launch Fullscreen mode when page loads.

Start with Toolbar Closed

Select this option and the toolbar will be hidden when the page loads. A toolbar icon will overlay your full-size image, giving your visitors the ability to show the toolbar at will.

Start with Thumbnails Closed

Select this option and the Thumbnails will be hidden when the page loads. Your visitors can click or tap the Thumbnail icon on the Toolbar to show the thumbnails at will.

Use Thumbnails

This options is selected by default. Deselect it if you do not want to use thumbnails in your gallery. If deselected, there will be no Thumbnail icon on your toolbar.

Note: If your gallery was using thumbnails, and you deselect the Use Thumbnails option, your thumbnails will be removed from your gallery. If you wish to later revert back to using thumbnails, you will need to import or select them.

Caption Position

The default is Overlay Bottom. Your other choices are: Above, Below, and Overlay Top.

Fullscreen Mode

The default is Normal. In this mode, clicking or tapping the Fullscreen icon on the toolbar will cause the gallery to expand, filling the entire viewport. Your browser or device "chrome" will still be accessible. To exit Normal Fullscreen mode, click or tap the Restore icon on your toolbar.

The other mode is Kiosk. Kiosk mode works the same way as the Fullscreen mode for a YouTube video. The gallery will fill your screen, and the browser "chrome" will be hidden, giving your images the maximum possible room to display. To exit Kiosk mode, use the Restore icon on your toolbar or simply press the Escape key on your keyboard.

Note: While in either of the two Fullscreen modes, your keyboard arrow keys can be used in addition to, or in place of, the Previous and Next arrows.

Toolbar

Select from the following toolbar options:

Show Toolbar

With this option selected (checked) a toolbar will be included above your AGM gallery.

Show/Hide Caption Icon

Include show/hide caption icon on toolbar

Include show hide thumbnails icon on toolbar

Pause/Play Icon

Include pause/play icons  on the toolbar

Fullscreen Icon

Include fullscreen icon on the toolbar

Show/Hide Toobar Icon

Include show/hide toolbar icon on the toolbar

Prev/Next Arrows

Select to display previous and next arrows aolong the left and right sides of the full-size image.

Play Modes

Select from the following Play Modes:

Display Time

The number of seconds each full-size image displays in Play mode.

Stop on Control Option

With this option selected, using any of the toolbar controls, or the Previous/Next arrows will terminate Play mode. To restart Play mode, click or tap the play icon on your toolbar.

Pause on Mouse Over

With this option selected, hovering over an image will pause the gallery. Taking your mouse away, will cause the gallery to resume playing.

Play Continually

With this option selected, when in Play mode, your gallery will loop continuously through all images in the currently selected category.

Number of Cycles

If Play Continually is deselected, enter the number of Cycles you wish to display.

End Cycle On

Configure your play cycle to end on the Last Image or First Image in the current category.

Animation

Choose None, Fade, Slide, Soft Slide with Fade, or Ken Burns

Duration

The amount of time in milliseconds that the animation takes to complete. The default is 600. Shorter times will speed up the effect. Longer times will slow it down.

Note: Duration does not effect the Ken Burns animation, which is carefully hard-coded and optimized to appear best on all browsers and devices.

Style

Choose Rounded corners, an Outer Border (surrounding the entire gallery), and Thumbnail Height.

Rounded

The appropriate elements will be displayed with rounded corners.

Outer Border

A 1px border will be drawn around the entire gallery.

Height

Choose preset thumbnail heights from 30px to 100px in 10px increments. This will ensure your thumbnail scroller is uniform in height and your thumbnails are always fully displayed, no matter their individual orientations.

We have provide several media queries, at the bottom of the p7AGM-01.css file, to adjust the maximum thumbnail height for various screen widths and devices:

Narrow screens for Laptop and Desktops:

@media only screen and (min-width: 0px) and (max-width: 840px) {
.agm-section img {max-height: 64px !important;}
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
.agm-section img {max-height: 48px !important;}
}

iPad in portrait and landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.agm-section img {max-height: 60px !important;}
}

Older Phones

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.agm-section img {max-height: 30px !important;}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation: landscape) {
.agm-section img {max-height: 35px !important;}
}

Feel free to edit the max-heights to suit.

Auto Caption

Choose one of several pre-configured captions to automatically display image file name, an image counter, or a combination of both.

Importing Images

Use the Import Images system to quickly import images from a folder on your hard drive or any drive connected to your computer. All images in the folder you select will be returned to the AGM interface, allowing you to quickly select one or more images from the listing. If the images are stored in a location outside of your currently defined Dreamweaver Site, you will be prompted to copy those images into your site.

Open the Import Images interface

The Import Images interface will open whenever you click on the Import button in the main AGM interface.

Click the Import button to open the Import Images interface.

The Import Images window will open:

The Import Images interface.

1. Set Import Session Options

Image File Types -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.

2. Select Image folders

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

The Choose Folder dialog

-Browse to the folder where your full-size images are and select any image (you must select one of the images). Then click OK. All the images in that folder will appear in the Full Size Images column:

3. (Optional) Point to your Thumbnail Images Folder

If you haven't deselected the Use Thumbnails option in the main AGM UI, you can continue the import process to select corresponding thumbnails. Browse to the folder where your thumbnail images are and select any image.

Note: When processing your thumbnails, it is highly recommended that you store them in a sub-folder of the full-size images directory and give them the same file names as their corresponding full-size images. But if you don't it's okay. You will simply need to use the Filters option described below.

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

In many cases, the internal logic used by the Import utility will establish a matching criteria automatically. In the above example, the thumbnail image names are the same as the fullsize names, and they are in separate folders. Note that the Full Size Image and Thumbnail Image Previews match.

Using the Full Size Image Filename Filter Criteria

The thumbnail filename filter system works by looking at each full-size image, in the folder you specify, and then finding a matching thumbnail image in the thumbnail folder you specify. The matching system can use a simple one-to-one file name match, or it can use search parameters to define the matching thumbnail file name. In addition to automated matching, the system allows you to manually select the thumbnail for any full-size image.

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.

If you are processing new images for your show, the most efficient workflow is to store your full-size and thumbnail images in separate folders, with identical file names.

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

5. Complete the Import

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

Batch Processing Thumbnail 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.

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. 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 200 pixels. You can set it to whatever you need to. This means the image will scale within its natural aspect ratio with 200 pixels the upper boundary for both width and height.

Click Next to choose where to save your processed images.

For Batch output, choose the Custom location, the click the Browse button. Browse to the location of your full-size images and create a new folder called thumbs inside it.

Select the thumbs folder and click the Batch button to start the process.

After the process is complete, you are ready to use the AGM Import facility.

Note: You can use the same technique as above to process full-size images, as well as thumbnails. Simply change the max-width and max-height values in the Batch Process window. This would be handy if you only have raw images from a camera to work with.

Batch Processing with Photoshop

For our purposes of optimizing image for the web, Fireworks is by far the best app to use. We do realize, however that many of you will be Photoshop users. While the process of batch processing is a bit more complicated, you can certainly use Photoshop. We have identified what appears to be a good tutorial here:

Photoshop: Processing Batch Files

Open Pages to a Specific Image Remotely

URL parameters or anchors can be used to remotely open your page and link to a specific image in your gallery.

Parameter Method

Append the parameter to the end of the link's URL. for example, if the URL is http://www.site.com/gallery.htm, add the parameter to the end:

http://www.site.com/gallery.htm?agm=1_1_3

There are three numbers after the equal sign. The first number is the ID of the gallery you are targeting. If there is only one gallery on your page, the ID will be 1. The second number is the category. If you only have one category in your gallery, its number will also be 1. The third number is the image number. So the above parameter will open gallery.htm and automatically show the third image in the first category of the first (or only) gallery on your page.

Anchor Method

The anchor method uses the same variables as the parameter method, but instead of beginning with ?agm= it begins with #agm. The above URL then would become:

http://www.fubar.com/gallery.htm#agm1_1_3

Support Options

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

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phones: (330) 650-3675 | (336) 374-4611

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

Menu