Forums/Frequently Asked Questions/CU3ER FAQ

Guide on how to embed CU3ER in iWeb

Alex
posted this on November 22, 2010 17:16

In this article we will try to explain how to embed CU3ER in iWeb 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-panel.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 iWeb. Open iWeb and locate the page and place where you want to insert CU3ER.
step1.png 


5. Open Insert menu > Widget > HTML Snippet

step2.jpg 


6. You will see new black overlay panel called HTML Snippet that have opened. We will use this panel to insert necessary HTML code in order to embed CU3ER to your page. 

step3.jpg 

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 Snippet panel.

 

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

<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>
<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 iWeb page easily.

step4.jpg


8. Click on Apply to see CU3ER embedded in your page. At anytime you can click on CU3ER and HTML Snippet panel will appear making it possible to make additional settings

step5.jpg


This should help you embed CU3ER in iWeb. 

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 embed_example.html

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

 

Comments

User photo
Julianne Aziz

not working with me!!

HELLLPPP!

April 30, 2012 06:18
User photo
umar

this is not making scene to me.. . at all.. .and is not working... 

May 14, 2012 18:31