Alternative content

Embedding the swf (gallery flash file) onto a html page using swfobject (2.1)

To learn more about swfobject go here: http://code.google.com/p/swfobject/wiki/documentation

Prepare:

Put the following files (to be uploaded) in the same directory as your html page:

G06_Standalone.swf
G_images folder
G_mp3 folder
G_setup.xml
G_images.xml
swfobject.js

You need to add two code blocks on your html page when using swfobject 2.1:

1. Add the first code block inside the <body></body> tags of your page, where you want the gallery to appear. Give your flash gallery to be embedded a unique id. Example: myContent.

<div id="myContent"> <h1>Alternative content</h1> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>

2. Add the second code block inside the <head></head> tags of your page:

For basic embedding (no fullscreen, flashplayer 8 can be targeted)

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("G06_Standalone.swf", "myContent", "500", "380", "8"); </script>

Blue = path to swf file, your unique id (can be any name), desired width, desired height, flashplayer version required. Fullscreen button in gallery is not needed when using this option. You can deactivate it by setting navBarEnableFullscreen="false" in G_setup.xml.

To enable fullscreen mode ( flashplayer 9.0.28.0 or higher must be targeted)

Update the second code block to enable fullscreen mode, by adding a params object:

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var params = {}; params.allowFullScreen="true"; swfobject.embedSWF("G06_Standalone.swf","myContent","500","380","9.0.28.0", false, false, params); </script>

Blue = Create params object and set allowFullScreen to true. Red = Set the flashplayer version required for fullscreen mode, false for expressinstall, false for flashvars, params to make swfobject execute params.

Add flashvars to control color of initial loading sequence
Default without flashvars is white FFFFFF for preloaderBackgroundColor and black 000000 for preloaderColor)

Update the second code block by adding flashvars objects:

var flashvars = {};
flashvars.preloaderBackgroundColor="FF0000";
flashvars.preloaderColor="00FFFF";

var params = {};
params.allowFullScreen="true";

swfobject.embedSWF("G06_Standalone.swf","myContent","500","380","9.0.28.0", false, flashvars, params);
</script>

Blue = Create flashvars object and set colors (hex value, but no prefix!) for initial loadingsequence. Red = Change false to flashvars, to make swfobject execute flashvars.

ADVANCED: (Add additional flashvars to control paths and names of required files, setting up multiple galleries)

You can use flashvars to control paths and names of required files. Useful if making multiple galleries, or if you need for a required folder/file to be somewhere else on your server.

Flashvars are:

setupXmlPath = G_setup.xml
imagesXmlPath = G_images.xml
imageFolderPath = G_images folder
mp3FolderPath = G_mp3 folder

Add like below:

var flashvars = {};
flashvars.preloaderBackgroundColor="FF0000";
flashvars.preloaderColor="FFFFFF";
flashvars.setupXmlPath="newPath/../..newPath/newName.xml";
flashvars.imagesXmlPath="newPath/../..newPath/newName.xml";
flashvars.imageFolderPath="newPath/../..newPath/newName/";
flashvars.mp3FolderPath="newPath/../..newPath/newName/";

var params = {};
params.allowFullScreen="true";

swfobject.embedSWF("G06_Standalone.swf","myContent","500",380","9.0.28.0", false, flashvars, params);
</script>

"newPath/../..newPath/newName.xml"; = set the new path and name for the file/folder.

Ex: If you want to keep new images in a folder called G_images2 inside a folder called gallery2 path would be:
flashvars.imageFolderPath="gallery2/G_images2/"

For folders, paths must end with a slash ( / ).

So for instance, if you wanted another gallery on the page, the easiest thing for you to do is simply copy and rename G_images.xml, and then use imagesXmlPath flashvar to direct the next embedded gallery to the new xml.

Then you can keep on adding images for the new gallery in the same G_images folder as the last one, and the visual appearence of the new gallery would also be the same.

To give your additional gallery another look, copy and rename G_setup.xml, make custom changes inside, use setupXmlPath flashvar to set the new path.

New imagefolder, copy and rename G_images, use imageFolderPath flashvar...etc.