Embedding PostcardViewer in a HTML Page:
To embed PostcardViewer (or PostcardViewer-Pro) into an existing HTML page do the following:
- Create your PostcardViewer gallery as normal (check instructions here).
- Copy the entire contents of your PostcardViewer gallery folder into the folder that contains your HTML page (including the swfobject.js file and sub-folders).
- Edit your HTML document using a HTML or text editor. Copy and paste this code block where you want PostcardViewer to appear:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">PostcardViewer 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("viewer.swf", "viewer", "800", "600", "8", "#181818");
fo.write("flashcontent");
</script> - Upload the entire folder contents to your webserver.
- 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("viewer.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 PostcardViewer work you need to use the embed method described above. Using Dreamweaver's Insert -> Media -> SWF method will cause PostcardViewer to break. This is because PostcardViewer 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.
