Forums/Frequently Asked Questions/CU3ER FAQ

Guide on how to embed CU3ER in Weebly

Mario Pavlic
posted this on July 06, 2012 16:51

In this article we will try to explain how to embed CU3ER to Weebly website. We will try to make it as simple as possible.

1. First, let's prepare CU3ER project for export. Since Weebly is a hosted solution 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 

Paths should point to locations on which CU3ER files of your project will be hosted. You can use any hosting solution which allows direct access to hosted CU3ER files.

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 you had set in first step. This locations will be provided 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 log in to your Weebly account and go to Weebly editor in order to embed CU3ER to your website. When the editor opens you will notice 'Custom HTML' icon which you will use to add CU3ER embedding code to your page.

weebly_editor_820px.jpg


5. Click on 'Custom HTML' icon and hold, then drag it to the place on your page on which you want to place your CU3ER slider and release mouse button.

drag_and_drop_820px.jpg

 

6. Box for adding custom HTML code is now placed on your page and you need to click on it so you could paste CU3ER embedding code.

click_to_set_820px.jpg


7. After you click on 'Custom HTML' box in editor you can paste CU3ER embedding code. To get embedding code for your slider 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 'Custom HTML' box.

 

After you paste the code you should have code similar to this in your 'Custom HTML' box :

<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 domain under which CU3ER files are hosted. Please note that all paths need to be absolute.

 

After you pasted CU3ER embedding code to it, 'Custom HTML' box in Weebly editor should look like this (please note that whole CU3ER embedding code won't be visible due to size of 'Custom HTML' box):

paste_embedding_code_820px.jpg


8. After CU3ER embedding code is pasted you should click on empty space on your page outside 'Custom HTML' box and, if the paths in CU3ER embedding code are set to point to location where CU3ER files are uploaded, your slider should load and start displaying in Weebly editor.

publish_820px.jpg

After CU3ER shows on your page in editor, you can click on 'Publish' button and your slider will start displaying on your website. You can see example of CU3ER slider embedded to Weebly website on following page: http://3dslider.weebly.com

 

Comments

User photo
bryson.clark
FREE

Do you have any recommendations for a file hosting site that will allow me to upload the files?  Weebly won't seem to allow me to upload a folder, instead making me upload the individual files in that folder.

July 19, 2012 22:30
User photo
Mario Pavlic
CU3ER Support

Hi Bryson Clark,

you can use any hosting solution which allows direct access to hosted files. We even had some users which used Dropbox public folder for this purpose.

Let us know if we can help further.

Regards,
Mario Pavlic
CU3ER Support

 

July 31, 2012 11:59
User photo
that_guy_you_know
FREE

The above method seems to no longer work, can you recommend a different file hosting solution that will work with CU3ER and Weebly? Dropbox no longer allows for Public Folders, and creating links/direct links to the files and folders does not work. Would really like to be able to use CU3ER on my weebly page!

Thx, Steve 

December 21, 2012 22:33
User photo
stephanier1126
FREE

I am having the same issue - i purchased cu3er thinking i could upload it into my weebly site and i finished my cu3er slideshow and now cannot do so cause of this uploading issue.. please advise asap - thank you!

December 27, 2012 05:07
User photo
madhvijani
FREE

I am using the app povided by showitfast.com to host my website. i want to add cuber project to it.
It is a flash based hosting app.

I have been trying to upload the project onto showit but i does not work.

I need help with uploading the project

June 05, 2013 01:05