LibGuide Tricks: Rotating Boxes at Intervals

PLEASE NOTE THAT THIS INFORMATION IS FOR LIBGUIDES 1 ONLY - DO NOT ATTEMPT IN LIBGUIDES 2.0.

Have boxes rotate on a page at specified intervals.

Code for example:

<style>
.libguides_api_box .headerbox { display: none; }
.libguides_api_box .outerbox { padding: 1px; background-color: #FFF; }
</style>

<!-- BEGIN: API box output -->
                            <div id="api_box_iid2039_bid12919885" style="display:block;" ></div><script type="text/javascript" src="http://api.libguides.com/api_box.php?iid=2039&bid=12919885&context=object&format=js"> </script>

                            <div id="api_box_iid2039_bid12920039" style="display:none;"></div><script type="text/javascript" src="http://api.libguides.com/api_box.php?iid=2039&bid=12920039&context=object&format=js"> </script>

                            <div id="api_box_iid2039_bid12920080" style="display:none;"></div><script type="text/javascript" src="http://api.libguides.com/api_box.php?iid=2039&bid=12920080&context=object&format=js"> </script>

<!-- END: API box output -->

 

<!-- BEGIN: JS Rotator code -->

<script>
//=================================
function rotateContent(config) {
this.content_ids = config.content_ids;
this.rotation_time = ( typeof(config.rotation_time) !== 'undefined' ? config.rotation_time : 1 );
var curr_idx = 0;

setInterval(function() {
var content_ids = config.content_ids;
//debugger;
var elt;

for ( var i = 0; i <= content_ids.length - 1; i++ ) {
elt = document.getElementById(content_ids[i]);
elt.style.display = 'none';
}

elt = document.getElementById(content_ids[curr_idx]);
elt.style.display = 'block';
curr_idx = ( curr_idx >= content_ids.length - 1 ? 0 : curr_idx + 1 );
}, this.rotation_time * 1000);
}
//=================================
// Function call with list of API box div ids and rotation time (seconds).
rotateContent({ content_ids: ['api_box_iid2039_bid12919885', 'api_box_iid2039_bid12920039', 'api_box_iid2039_bid12920080'], rotation_time: 5 });
//=================================
</script>
<!-- END: JS Rotator code -->