Forums/Frequently Asked Questions/CU3ER FAQ

Guide on how to embed CU3ER in RapidWeaver

Alex
posted this on November 22, 2010 18:16

In this article we will try to explain how to embed CU3ER in RapidWeaver software.
We will try to make as simple as possible.

1. First, let's prepare CU3ER project for export. In order to make embedding simple please use absolute paths in your project. Absolute paths contain whole domain name in all URLs referred in CU3ER project. 
You can set use of absolute paths in cManager at Project Settings panel by turning on Use absolute URLs checkbox. http://docs.getcu3er.com/cmanager/setting-project 

project-bar.jpg


2.
 After you've created a slideshow, export your project. You will be prompted for ZIP download. 


3. Extract exported project .ZIP file and Upload CU3ER files and folders to locations on your server given in embed_example.html (embed_example.html is included in project .ZIP file and you can open it with your browser).


Also, if your site is available both from http://www.yourdomain.com and http://yourdomain.com (with and without www) you need to add crossdomain.xml file to the root server, making it available at http://yourdomain.com/crossdomain.xml (at the same time also at http://www.yourdomain.com/crossdomain.xml).
crossdomain.xml file tells Flash security that it's ok to access resources from both version of your site.

Content of crossdomain.xml should be like this (replace yourdomain.com with your domain name)

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only" />
<allow-access-from domain="yourdomain.com" />
<allow-access-from domain="*.yourdomain.com" />
</cross-domain-policy>

you can download example crossdomain.xml from this address (right click and choose save as)


4. Now, you can switch to RapidWeaver. In order to embed CU3ER you need to create HTML code page.

step1.jpg 


5. After you create HTML code page the panel with HTML code will open.  We will use this panel to insert necessary HTML code in order to embed CU3ER to your page. 

step2.jpg


6. Open embed-example.html (which was included in exported project .ZIP file) in your browser. You'll need to copy embedding code provided in embed-example.html and paste it to HTML Snippet panel.

 

After you paste the code you should get something similar to this in your HTML Snippet panel:

<div id="CU3ER" class="CU3ER">  		  
 <p>If you do not see content of CU3ER slider here try to enable JavaScript and reload the page</p>
</div>		
		
<script type="text/javascript" src="http://www.yourdomain.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com/js/jquery.cu3er.js"></script>
<script type="text/javascript">

  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $("#CU3ER").cu3er({
      vars: {
        width: 840,
        height: 361,
        flash_version : "10.0.0",
        xml_location : 'http://www.yourdomain.com/CU3ER-config.xml',
        swf_location: 'http://www.yourdomain.com/CU3ER.swf'
      },
      params: {
        bgcolor : '#ffffff'
      },
      attributes: {
        id: "CU3ER",
        name: "CU3ER"
      }
    });
  });

</script>

 

or if you are using old embedding code without support for javascript version it should be similar to this code:

 

<div id="CU3ER">           
<!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->         
<p>Click to get Flash Player<br />
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_playe..." alt="Get Adobe Flash player" />
</a>
</p>           
<p>or try to enable JavaScript and reload the page</p>
</div>       
       
<script type="text/javascript" src="http://yourdomain.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://yourdomain.com/js/CU3ER.js"></script>
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'http://yourdomain.com/CU3ER-config.xml' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('http://yourdomain.com/CU3ER.swf', "CU3ER", 640, 480, "10.0.0",
"http://yourdomain.com/js/expressinstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
var CU3ER_object = new CU3ER("CU3ER");
</script>

 

<div id="CU3ER">
      <!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
      <p>Click to get Flash Player<br /><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_playe..." alt="Get Adobe Flash player" /></a></p>
      <p>or try to enable JavaScript and reload the page
      </p>
  </div>

In both cases instead of yourdomain.com should be the actual name of your domain. Please note that all paths are absolute, so CU3ER can be loaded in your RapidWeaver page easily. 

Please note that if you have problem with <br/> elements being inserted instead of line breaks please take whole block of CU3ER code and remove all line breaks. We suggest you use an online tool like http://www.textfixer.com/tools/remove-line-breaks.php
After you run CU3ER block through line break removing you will get something like this which you can then copy/paste to your page. As you can see it's all in one line now.

<div id="CU3ER"> <!-- modify this content to provide users without Flash or enabled Javascript with alternative content information --> <p>Click to get <div id="CU3ER" class="CU3ER"> <p>If you do not see content of CU3ER slider here try to enable JavaScript and reload the page</p> </div> <script type="text/javascript" src="http://www.yourdomain.com/js/jquery.js"></script> <script type="text/javascript" src="http://www.yourdomain.com/js/swfobject.js"></script> <script type="text/javascript" src="http://www.yourdomain.com/js/jquery.cu3er.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($) { $("#CU3ER").cu3er({ vars: { width: 840, height: 361, flash_version : "10.0.0", xml_location : 'http://www.yourdomain.com/CU3ER-config.xml', swf_location: 'http://www.yourdomain.com/CU3ER.swf' }, params: { bgcolor : '#ffffff' }, attributes: { id: "CU3ER", name: "CU3ER" } }); }); </script>



7. Click on Preview button at top left menu to see CU3ER embedded in your page. At anytime you can click on Edit button and HTML code panel will appear making it possible to make additional settings

step3.jpg


This should help you embed CU3ER in RapidWeaver.

Things that are important to remember are:

  • use absolute paths in your project
  • create crossdomain.xml if your site is accessed both from http://yourdomain.com and http://www.yourdomain.com
  • upload your project to your server domain host 
  • use HTML code page to copy paste code from embed_example.html

Please let us know if we can help further, and enjoy creating great web pages with CU3ER slideshow in RapidWeaver.