In this article we will try to explain how to embed CU3ER in Joomla CMS 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 

 

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 Joomla. You can add CU3ER to articles or sections. Process is the same. We will show an example for article but you can follow same steps to insert it into the section. First open up the article you wish to insert CU3ER to.

5. Cllick on the Edit HTML Source button

6. You will see new popup window called HTML Source editor that have opened. We will use this panel to insert necessary HTML code in order to embed CU3ER to your page. 

7. 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 Source editor.

After you paste the code you should get something similar to this in your HTML Source editor:

<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>

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 Joomla article/section easily. 

8. Click on Update button in bottom left corner to close HTML Source panel and update content in article/section. At anytime you can click on Edit HTML Source panel and it will appear making it possible to make additional settings.

9. After clicking on Update and closing HTML Source panel, you will see content of your article/section. CU3ER is not displayed here but you will see content of CU3ER div, with alternative content. By default is should be 'If you do not see content of CU3ER slider here try to enable JavaScript and reload the page'.

Then click on the Save or Apply button in top right corner to save article/section. 

10. After article/section is saved you can preview the page containing article/section and CU3ER will be displayed at the place you have embed it.

 

This should help you embed CU3ER in Joomla. 

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 Snippet to copy paste code from example (first HTML div, then javascript code part)
  
  

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