CU3ER - Embedding

In order to display CU3ER in your web page, you have to embed it just like any other flash files. SWFObject.js is a widely used JavaScript whose main purpose is to make the whole process of embedding flash files into a web site as easy as possible.

The SWFObject.js is provided within CU3ER's downloadable package, but you can freely download your own script.

Here's a quick overview:

1.) Add the following script tag between the <head>…</head> tag in your HTML document:

<script type="text/javascript" src="path_to_swfobject.js"></script>

2.) And right after that, add the following:

<script type="text/javascript"> var flashvars = {}; flashvars.xml = "path_to_xml.xml"; flashvars.font = "path_to_font.swf"; swfobject.embedSWF("path_to_cu3er.swf", "cu3er_swf", "960", "360", "9.0.28.0", "expressInstall.swf", flashvars, params, attributes); </script>

3.) Now, between your pages <body>…</body> tag, add the following where you want CU3ER to appear:

<div id="cu3er_swf"> Put your alternate content here! </div>

That's it! You have set the path to the .swf object script (step 1), configured the SWFObject script (step 2), and defined the container div where you want your slider to be (step 3).

Result:

After completing steps 1 to 3, your document should/could look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Embedding CU3ER</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- STEP 1 --> <script type="text/javascript" src="path_to_swfobject.js"></script> <!-- STEP 2 --> <script type="text/javascript"> var flashvars = {}; flashvars.xml = "path_to_xml.xml"; flashvars.font = "path_to_font.swf"; swfobject.embedSWF("path_to_cu3er.swf", "cu3er_swf", "960", "360", "9.0.28.0", "expressInstall.swf", flashvars, params, attributes); </script> </head> <body> <!-- STEP 3 --> <div id="cu3er_swf"> Put your alternate content here! </div> </body> </html>

NOTE:

Although it's fine to define relative paths while developing the CU3ER slider, it is even better to apply the rule of thumb and to change those to absolute url paths once you're ready to go live with your CU3ER page.

Changing relative paths to absolute paths will prevent potential missing file problems, especially if your CU3ER files and your images are scattered all over the server or if your pages are generated dynamically with some kind of CMS.

For further information on embedding flash files and on additional settings for the SWFObject script, click here. There's also a nifty AIR application, which guides you through the whole process and generates all codes for you as well.