A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube. If you find this plugin useful please vote for it on the jQuery site.
This page provides a documentation reference for working with the plugin v1.2.1. See a demonstration of the image cube plugin and download the code from there. Or see a minimal page that you could use as a basis for your own investigations.
Customise each targetted division with the settings below (all are optional):
$(selector).imagecube({..., ...});.
afterRotate | beforeRotate | direction | easing | expansion | full3D | imagePath | letterSpacing | lineHeight | opacity | pause | randomSelection | reduction | repeat | segments | selection | shading | speed
| Name | Type | Default | Comments |
|---|---|---|---|
| direction | string | 'random' | The direction in which to rotate the cube. Possible values are
'random', 'up', 'down', 'left', 'right'. Random chooses one of
randomSelection for each transition. |
| randomSelection | string[] | ['up', 'down', 'left', 'right'] | If the direction is 'random', then select one
of these directions for each rotation of the cube.
Possible values are 'up', 'down', 'left', 'right'. |
| speed | number | 2000 | The number of milliseconds that it takes for each rotation to complete. |
| easing | string | 'linear' | The name of the easing to use for the rotation animation. This can be one of the jQuery UI effects when this code is included. |
| repeat | boolean | true | Set to true to automatically rotate the cube to a new image after pausing the time below. Set to false to only rotate on demand. |
| pause | number | 2000 | The number of milliseconds to pause between rotations of the cube. |
| selection | string | 'forward' | Determine how the next image to be shown is selected.
The value should be one of 'forward', 'backward', or 'random'. Since 1.1.0. |
| shading | boolean | true | Set to true to add the shading for enhancing the 3D effects.
Set to false to not apply shading. Since 1.0.1. Since 1.2.0 - previously it was noShading with the opposite initial value and sense. |
| opacity | number | 0.8 | The maximum opacity for the highlight and shadow.
Valid values are 0.0 to 1.0. Since 1.2.0 - previously it was an array of minimum to maximum. |
| imagePath | string | '' | Any extra path information required to locate the highlight and shadow
images used by IE for the shading effects. Since 1.0.1. |
| full3D | boolean | true | Set to true to display a full 3D cube with perspective.
Set to false to use the original ("flat") transition. Since 1.2.0. |
| segments | number | 20 | The number of segments to use for the full3D effect.
A higher number gives a smoother look to the cube but
means more work for the animation.Since 1.2.0. |
| reduction | number | 30 | The number of pixels by which the back edges of the cube are
reduced for the full3D effect.Since 1.2.0. |
| expansion | number | 10 | The number of pixels by which the front edge of the cube is
expanded for the full3D effect.Since 1.2.0. |
| lineHeight | number[2] | [0.0, 1.25] | The minimum and maximum line height (em) to use when "rotating" text. |
| letterSpacing | number[2] | [-0.4, 0.0] | The minimum and maximum letter spacing (em) to use when "rotating" text. |
| beforeRotate | function | null | A callback made just before each rotation starts.
The function receives the current (shown) and next (to be shown) elements
as parameters, while this refers to the containing division.Since 1.2.0. |
| afterRotate | function | null | A callback made just after each rotation ends.
The function receives the current (just hidden) and next (just displayed) elements
as parameters, while this refers to the containing division.$(selector).imagecube({afterRotate: endedRotate});
function endedRotate(current, next) {
$('#rotateStatus').text('ended ' + $(current).attr('title') +
' » ' + $(next).attr('title'));
}Since 1.2.0. |
change | current | destroy | next | rotate | setDefaults | start | stop
| Signature | Returns | Comments |
|---|---|---|
| $.imagecube.setDefaults(options) | image cube object | Update the default
instance settings to use with all image cube instances.options (object) is the set of default settings |
| $(selector).imagecube('change', options, value) | jQuery object | Update the settings
for the image cube instance attached to the given division(s).options (object) is the set of new settings or
(string) the name of a single settingvalue (any, optional) is the value of the single settingSince 1.2.0 - accepts a single setting name and value. |
| $(selector).imagecube('destroy') | jQuery object | Remove the image cube functionality from the given division(s). |
| $(selector).imagecube('rotate', next, callback) | jQuery object | Trigger another rotation on the image cube for the given division(s).next (jQuery or element or string or number, optional) the next face to show,
either as a jQuery object, the actual element, a selector for the face,
or its index as a child of the container (starting at 0)callback (function, optional) allows notification
when the rotation has completedSince 1.2.1 - added next. |
| $(selector).imagecube('stop') | jQuery object | Stop the automatic rotation of the image cube for the given division(s). |
| $(selector).imagecube('start') | jQuery object | Start the automatic rotation of the image cube for the given division(s). |
| $(selector).imagecube('current') | element | Retrieve the currently visible child element in the image cube for the given division. |
| $(selector).imagecube('next') | element | Retrieve the next child element in the image cube to be displayed
for the given division. Since 1.2.0. |
Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.