Updated / Forked version of professor cloud's Cloud Carousel
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
cloud-carousel.1.0.5.js
demo.html

README.md

Cloud-Carousel

Updated / Forked version of professor cloud's Cloud Carousel

Original version here http://www.professorcloud.com/mainsite/carousel.htm

Parameters

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

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.

Why did you steal this?

First off, i didn't. I copied something that is awesome and made it a little bit better. It didn't work as intended and the last update was in march 2011 so i figured it might be time for an update.

Hope you find any use for it!