Cloud Carousel Intergration Instructions

Example HTML

Below is a simple example HTML page which creates a carousel with 4 items. Please study the page as it contains useful comments and tips. You can see the same page working here. If you want mouse wheel support, you will need to include this plugin: http://plugins.jquery.com/project/mousewheel

<html>
<head>
 
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>
 
<script>
$(document).ready(function(){
						   
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>
 
</head>
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
        
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
        
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>

JavaScript Setup Parameters

Setup parameters should appear in the JavaScript code block a the top of your page, as in this example:

<script>
$(document).ready(function(){
						   
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>

Any parameters not specified will have default values applied.

Parameter	Description (from V1.0.0)	Default Value
minScale	The minimum scale appled to the furthest item. The item at the front has a scale of 1. To make items in the distance one quarter of the size, minScale would be 0.25.	0.5
reflHeight	Height of the auto-reflection in pixels, assuming applied to the item at the front. The reflection will scale automatically. A value of 0 means that no auto-reflection will appear.	0
reflGap	Amount of vertical space in pixels between image and reflection, assuming applied to the item at the front. Gap will scale automatically.	0
reflOpacity	Specifies how transparent the reflection is. 0 is invisible, 1 is totally opaque.	0.5
xRadius	Half-width of the circle that items travel around.	Width of container / 2.3
yRadius	Half-height of the circle that items travel around. By playing around with this value, you can alter the amount of 'tilt'.	Height of container / 6
xPos	Horizontal position of the circle centre relative to the container. You would normally set this to half the width of the container.	0
yPos	Vertical position of the circle centre relative to the container. You would normally set this to around half the height of container.	0
buttonLeft	A reference to the element that will serve as the 'rotate left' button. The button doesn't have to be within the container.	null
buttonRight	A reference to the element that will serve as the 'rotate right' button. The button doesn't have to be within the container.	null
titleBox	A reference to the element that will display an image's title attribute when hovered over. This element does not have to be within the container.	null
altBox	A reference to the element that will display an image's alt attribute when hovered over. This element does not have to be within the container.	null
FPS	This is the approximate frame rate of the carousel in frames per second. The higher the number, the faster and smoother the carousel movement will appear. However, frame rates that are too high can make the user's browser feel sluggish, especially if they have an under powered machine. The default setting of 30 is a good tradeoff between speed and performance.	30

Parameter	Description (from V1.0.1)	Default Value
speed	This value represents the speed at which the carousel rotates between items. Good values are around 0.1 ~ 0.3. A value of one will instantly move from one item to the next without any rotation animation. Values should be greater than zero and less than one.	0.2
autoRotate	Turn on auto-rotation of the carousel using either 'left' or 'right' as the value. The carousel will rotate between items automatically. The auto-rotation stops when the user hovers over the carousel area, and starts again when the mouse is moved off.	'no'
autoRotateDelay	Delay in milliseconds between each rotation in auto-rotate mode. A minimum value of 1000 (i.e. one second) is recommended.	1500

Parameter	Description (from V1.0.2)	Default Value
mouseWheel	If set to true, this will enable mouse wheel support for the carousel. You will need to include this mouse wheel plugin first: http://plugins.jquery.com/project/mousewheel	false

Parameter	Description (from V1.0.4)	Default Value
bringToFront	If true, moves the item clicked on to the front.	false

CSS Setup

Cloud Carousel does not need any specific CSS styles to operate. However, you will want to style the carousel container, text boxes and buttons.

You may wish to set the initial display property to display:hidden for these items so they will automatically dissapear if JavaScript is disabled. This is a good thing as they have no use without JavaScript enabled. The plugin will automatically set the display property of these items to display:inline.

Setting the container to overflow:scroll is a good idea as this will create a neat scrolling box with the images inside if JavaScript is disabled.

It is advisable not to apply styles to the images used in the carousel.

Share |

Useful website? You can donate to support it. Thanks.

Need Good Hosting?

I use Host Gator for this site, and have found them to be good value and very reliable. Sign up now and use coupon code professorcloud to receive a $9.95 rebate.