When setting up the JavaScript rotator with Page Content we must also include Prototype and Scriptaculous in the layout file (THIS MUST BE LISTED FIRST):

<!--- prototype and scriptaculous --->
<script src="/includes/prototype_1.7/prototype.js"></script>
<script src="/includes/scriptaculous_1.9/scriptaculous.js"></script>

Also include the Perpetua Eventbox Javascript file in the layout file:

<!--- eventbox  --->
<script src="/includes/eventbox/eventbox.js"></script>

If the rotator might contain a video, we also need to include the Flowplayer Javascript file in the layout file:

<script src="/includes/videoplayers/flowplayer/flowplayer.js"></script>
<script src="/includes/videoplayers/flowplayer/flowplayer.ipad.js"></script>

We then need to put the HTML on the page.

<!--- PAGE CONTENT GENERATED EVENTBOX IMAGES --->
<!---  parameters  --->
<cfset request.pc_content_id      = 1>
<cfset request.pc_image_id        = 1>
<cfset request.pc_link_id         = 2>
<cfset request.pc_description_id  = 3>
<cfset request.pc_video_id        = 0>
<cfset request.css_main_class     = "rotator">
<!--- end parameters --->

<cfquery name="qry_pc_itm_#request.pc_content_id#" dbtype="query">
  select fld_name, fld_value, fld_itemlist_id from qry_pagexml where fld_content_id = #request.pc_content_id# order by fld_itemlist_id
</cfquery>

<cfset request.qry_pc_items=Evaluate( "qry_pc_itm_#request.pc_content_id#")>

<div class="<cfoutput>#request.css_main_class#</cfoutput>">
  <div class="<cfoutput>#request.css_main_class#</cfoutput>Window">
    <cfset request.pc_count=0>
    <cfoutput query="request.qry_pc_items" group="fld_itemlist_id">
    <cfset request.pc_count=request.pc_count + 1>
    <div>
      <!--- if there's a video defined  --->
      <cfif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#") and len(Evaluate( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#"))>

        <a id="pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#" href="#Evaluate('pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#')#" rel="flowplayer[pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#]"
            style="width: #request.pc_video_width#px; height: #request.pc_video_height#px; display: block;">
          <cfif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#")>
            <img src="#Evaluate('pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#')#">
            <cfset request.video_clip="autoPlay: true, autoBuffering: true">
              <cfelse>
                <cfset request.video_clip="autoPlay: false, autoBuffering: false">
          </cfif>
        </a>

        <script type="text/javascript">
          document.observe("dom:loaded", function() {
            flowplayer("pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#", "#variables.basehref#includes/videoplayers/flowplayer/flowplayer.swf", {
              clip: {#
                request.video_clip#
              },
              plugins: {
                controls: {
                  autoHide: 'always',
                  hideDelay: 1000
                }
              },
              onBeforeLoad: function() {
                $("pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_video_id#").up("div.#request.css_main_class#").retrieve("eventbox").flowplayer_init(this);
              }
            }).ipad();
          });
        </script>
          
      <!--- if the link is defined --->
      <cfelseif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_link_id#") and len(Evaluate( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_link_id#")) and IsDefined(
          "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#")>
        <a href="#Evaluate('pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_link_id#')#"><img src="#Evaluate('pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#')#"></a>

      <cfelseif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#")>
        <img src="#Evaluate('pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#')#">
      </cfif>
    </div>
    </cfoutput>
  </div>
  <ul class="<cfoutput>#request.css_main_class#</cfoutput>Navigation">
    <cfset request.pc_count=0>
    <cfoutput query="request.qry_pc_items" group="fld_itemlist_id">
      <cfset request.pc_count=request.pc_count + 1>
        <cfif IsDefined("pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#")>
          <li></li>
        </cfif>
    </cfoutput>
  </ul>
  <div class="<cfoutput>#request.css_main_class#</cfoutput>Descriptions">
    <cfset request.pc_count=0>
    <cfoutput query="request.qry_pc_items" group="fld_itemlist_id">
      <cfset request.pc_count=request.pc_count + 1>
      <cfif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_image_id#")>
        <div>
          <cfif IsDefined( "pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_description_id#")>
            #Evaluate("pcItem_#request.pc_content_id#_#request.pc_count#_#request.pc_description_id#")#
          </cfif>
        </div>
      </cfif>
    </cfoutput>
  </div>  
  <!-- optional -->
  <a href="" class="<cfoutput>#request.css_main_class#</cfoutput>Anchor"></a>
  <div class="<cfoutput>#request.css_main_class#</cfoutput>Overlay"></div>
</div>
<!--- END ROTATOR --->

The parameters for the code above are based off of the Page Content variables used in the layout file. For this example, we're using the following variables:

The image: pcItem_1_1_1
The link: pcItem_1_1_2
The description: pcItem_1_1_3

For a more in-depth explanation of the "pcItem_1_1_1" variable format, please see the documentation on Page Content.

After the Coldfusion, CSS and Javascript files have been added to the layout file, it's time to add the Javascript code to initialize the Event box to the end of the layout file before the closing </body> tag. Assuming a "css_main_class" of "rotator", the code will look like the following:

 var rotator = (function(){
  $$(".rotator").each(function(e) { 
    var eventbox_parameters = {
      type: "fade",
      duration: 0.5,
      delay: 5000,
      pauseOnMouseOver: false,
      setAsBackground: true
    };
    if (e.select(".rotatorNavigation li").size() == 1) {
      eventbox_parameters.startPaused = true;
    }
    new perpetuacms.eventbox(e, eventbox_parameters);
  });
}());

If there are multiple styles of Event boxes on the same page, add the new "css_main_class" as shown:

var rotator = (function(){
  $$(".rotator").each(function(e) {
    var eventbox_parameters = {
      type: "fade",
      duration: 0.5,
      delay: 5000,
      pauseOnMouseOver: false,
      setAsBackground: true
    };
    if (e.select(".rotatorNavigation li").size() == 1) {
      eventbox_parameters.startPaused = true;
    }
    new perpetuacms.eventbox(e, eventbox_parameters);
  });
  $$(".rotator2").each(function(e) {
    var eventbox_parameters = {
      type: "fade",
      duration: 1,
      pauseOnMouseOver: true,
      setAsBackground: true
    };
    if (e.select(".rotatorNavigation li").size() == 1) {
      eventbox_parameters.startPaused = true;
    }
    new perpetuacms.eventbox(e, eventbox_parameters);
  });
}());

To just use the default settings, you can use the following:

var rotator = (function(){
  $$(".rotator").each(function(e) {
    new perpetuacms.eventbox(e);
  });
}());

To give the client the option of Sequential, Random or Static in Page Content, we can add the following Coldfusion:

var rotator = (function(){
  $$(".rotator").each(function(e) {
    var eventbox_parameters = {
      type: "fade",
      duration: 0.5,
      delay: 5000,
      pauseOnMouseOver: false,
      setAsBackground: true,
      order: "<cfoutput>#request.pcAction_1#</cfoutput>"
      <cfif request.pcAction_1 EQ "static" OR request.pcAction_1 EQ "random">, startPaused: true</cfif>
    };
    if (e.select(".rotatorNavigation li").size() == 1) {
      eventbox_parameters.startPaused = true;
    }
    new perpetuacms.eventbox(e, eventbox_parameters);
  });
}());

The Javascript parameters found in "default_parameters" are as follows:

Slider Parameters
In addition to the above base parameters, there are optional parameters that allow the navigation to be setup as a slider. This can be accomplished by setting these additional parameters within the "slider" parameter mentioned above:

Video Parameters
When a slide might contain a video, the following additional parameters can be used to control what happens when the video is played. These parameters are set within the "video" parameter mentioned above:

Note: The latest list of parameters can be found in the source of the developer demo.