Last modified: August 31, 2011 09:57:20.

API

JavaScript API is available for extended bidirectional communication with CU3ER. It's a great way to sync CU3ER with rest of your page elements with easy and simple functions.

Available API functions, events and variables:

play() - Instruct CU3ER to play/resume playback if autoplay mode is on.
pause() - instruct CU3ER to pause playback if autoplay mode is on.
next() - instruct CU3ER to play (initiate) transition to the next slide
prev() - insturct CU3ER to play (initiate) transition to the previous slide
skipTo() - instruct CU3ER to go to (skip) and play (initiate) transition to the targeted slide
onLoadComplete() - CU3ER event when slideshow has loaded all elements needed for start of slideshow
onTransition() - CU3ER returns current transition number immediately upon transition has been started (initiated)
onSlide() - CU3ER returns current slide number immediately after transition has been finished
slidesOrder - variable that contains slides order, usuful when you are using randomize slides option

Example:

Pro users:

<script type="text/javascript">
  CU3ER['CU3ER'].onLoadComplete = function(arrOrder) {
    document.getElementById("your-div-id").innerHTML = "CU3ER onLoadComplete - slides order : " + arrOrder;
  }
  CU3ER['CU3ER'].onSlide = function(slideNo) {
    document.getElementById("your-div-id").innerHTML = "SLIDE : " + slideNo + " -- ORIGINAL SLIDE NO : " + CU3ER_object.slidesOrder[slideNo-1]);
  }
  CU3ER['CU3ER'].onTransition = function(slideNo) {
    document.getElementById("your-div-id").innerHTML = "TRANSITION CHANGE: " + slideNo;
  }
</script>

Lite users:

<script type="text/javascript">
  CU3ER_object.onLoadComplete = function(arrOrder) {
    document.getElementById("your-div-id").innerHTML = "CU3ER onLoadComplete - slides order : " + arrOrder;
  }
  CU3ER_object.onSlide = function(slideNo) {
    document.getElementById("your-div-id").innerHTML = "SLIDE : " + slideNo + " -- ORIGINAL SLIDE NO : " + CU3ER_object.slidesOrder[slideNo-1]);
  }
  CU3ER_object.onTransition = function(slideNo) {
    document.getElementById("your-div-id").innerHTML = "TRANSITION CHANGE: " + slideNo;
  }
</script>

Working with API

Working with CU3ER API is very simple - if you are a lite user, you need to import CU3ER.js (provided in your downloadable package)to your page and set your own desired JS cals.

Import CU3ER.js to your page:

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

Example of the usage (anywhere inside <body>):

Pro users:

<div id="controls">
	<a href="javascript:CU3ER['CU3ER'].play();">Play</a>
	<a href="javascript:CU3ER['CU3ER'].pause();">Pause</a>
	<a href="javascript:CU3ER['CU3ER'].next();">Next</a>
	<a href="javascript:CU3ER['CU3ER'].prev();">Prev</a>
	<a href="javascript:CU3ER['CU3ER'].skipTo(document.getElementById('skipToFrame').value);">
	  skipTo
	</a> 
	<input id="skipToFrame" type="text" size="3" value="1" >
</div>
<div id="CU3ER_return">  </div>

Lite users:

<div id="controls">
	<a href="javascript:CU3ER_object.play();">Play</a>
	<a href="javascript:CU3ER_object.pause();">Pause</a>
	<a href="javascript:CU3ER_object.next();">Next</a>
	<a href="javascript:CU3ER_object.prev();">Prev</a>
	<a href="javascript:CU3ER_object.skipTo(document.getElementById('skipToFrame').value);">
	  skipTo
	</a> 
	<input id="skipToFrame" type="text" size="3" value="1" >
</div>
<div id="CU3ER_return">  </div>

NOTE FOR LITE USERS: Make sure you have embedded CU3ER.js in your page in order to use API.