Note: This tutorial requires AGM version 1.1.6 or higher. Please check your version number against our updates page. Download and install an updated version if necessary.
This page was laid out using our Harmony Page Layout Builder. The navigation was build using Slide Out Menu Builder.
The Art Gallery Magic in-motion marketing gallery above was created using Art Gallery Magic. And most important of all? You can do this! And it's easy. You can do this on a new page made with Harmony or you can add an Art Gallery Magic in-motion marketing gallery to an existing page. The choice is yours.
The in-motion.css file contains all the rules necessary to display your gallery as we have done on this page, including the advanced caption animations.
The purpose of this page is to show you how Art Gallery Magic can be used to visually tell a marketing story. The gallery is configued without thumbnails, and the toolbar is hidden. There are eight image slides in the gallery, each one is repeated 4 times, allowing each set to tell a story through its captions. You can easily change this to suit your own needs. For example, you might have 3 images—each repeated twice, or 4 images—each repeated 5 times, or 10 images—with no repeats. In other words, you can tailor the configuration to meet your needs.
Use the following settings for your gallery:
Make sure Auto Play on Load is enabled, Caption Position is set to Overlay Top, Play Continually is unselected, and End Cycle On is set to Last Image. In the Tool Icons section, deselect (uncheck) Show Toolbar. Set Animation to Ken Burns.
The Caption box in the AGM UI supports entry of HTML code. Even an advanced coder might find it a bit cramped to write code in a small box, so the best way to do this is to write the code or enter it visually in your page's content area in either Code View or Design View. Once completed, simply copy the code, open the AGM UI, and paste it into the Caption box. Here is an example of the code that you can use for pasting into your caption boxes:
<div class="in-motion">
<p>The classic floppy hat</p>
<p><a class="buttons" href="more.htm">More Information...</a></p>
</div>
You can tailor the code and its content to fit your needs for each image.
The last image contains an extra element. The gallery is set to Auto Play on Load, and Number of Cycles is set to 1. So, we added a special link in the last caption to replay the gallery. Here is the code for the last caption:
<div class="in-motion">
<p>Express Yourself</p>
<p><a class="buttons" href="more-2.htm">More Information...</a></p>
<p><a class="buttons" href="#" onClick="P7_AGMctrl('p7AGM_1','1','play');return false">Replay</a></p>
</div>
That's it! We hope you've enjoyed this showcase page and mini-tutorial.
