Embedding AutoViewer in a HTML Page:

To embed AutoViewer (or AutoViewer-Pro) into an existing HTML page do the following:

  1. Create your AutoViewer gallery as normal (check instructions here).
  2. Copy the entire contents of your AutoViewer gallery folder into the folder that contains your HTML page (including the swfobject.js file and sub-folders).
  3. Edit your HTML document using a HTML or text editor. Copy and paste this code block where you want AutoViewer to appear:

    <script type="text/javascript" src="swfobject.js"></script>
    <div id="flashcontent">AutoViewer requires JavaScript and the Flash Player.
    <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
    <script type="text/javascript">
    var fo = new SWFObject("autoviewer.swf", "viewer", "800", "600", "8", "#181818");
    fo.write("flashcontent");
    </script>

  4. Upload the entire folder contents to your webserver.
  5. To view your gallery, navigate to the gallery folder in your browser.

Setting Gallery Size and Background Color

To set the gallery size and background color, edit this line from step 3 above:

var fo = new SWFObject("autoviewer.swf", "viewer", "800", "600", "8", "#181818");

  • Change the "800" to be the width of your gallery. It can be a pixel value ("800") or a percentage ("50%").
  • Change the "600" to be the height of your gallery. It can be a pixel value ("600") or a percentage ("50%").
  • Change the "#181818" to be the hexadecimal background color of your gallery.

Note for Dreamweaver Users:

To make AutoViewer work you need to use the embed method described above. Using Dreamweaver's Insert -> Media -> SWF method will cause AutoViewer to break. This is because AutoViewer uses SWFObject to embed the SWF. SWFObject is an industry standard way to embed flash content that handles Flash player detection and upgrade prompts. Using the default Flash embed method in Dreamweaver will not work, since the config options that are set in the Javascript will be ignored.