jQuery Image Cube

Default Settings

The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

Stop and restart the automatic rotation with the appropriate commands.

You can also remove the image cube functionality with the 'destroy' command if it is no longer required.

Basic cube: Stop Remove

<div id="defaultCube" style="width: 200px; height: 150px;">
	<img src="uluru.jpg" alt="Uluru" title="Uluru"/>
	<img src="islands.jpg" alt="Islands"title="Islands"/>
	<img src="gorge.jpg" alt="Gorge" title="Gorge"/>
</div>

$('#defaultCube').imagecube();

$('#stopCube').toggle(function() {
		$(this).text('Start');
		$('#defaultCube').imagecube('stop');
	}, function() {
		$(this).text('Stop');
		$('#defaultCube').imagecube('start');
	}
);

$('#removeCube').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultCube').imagecube('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultCube').imagecube();
	}
);

You can override the defaults globally as shown below:

$.imagecube.setDefaults({speed: 1000, pause: 5000});

Processed fields are marked with a class of hasImageCube and are not re-processed if targetted a second time.

Rotation Controls

Control how the image cube works by supplying various options when attaching it. You can change the options on the fly with $(selector).imagecube('change', {...}). You can trigger a new rotation with $(selector).imagecube('rotate'). This command can also take a selector for the next face to show, and/or a callback function to notify you of the completion of the rotation.

Change rotation direction and target: UpDown LeftRight Random Default UluruIslands Gorge Rotate

  Now showing: Uluru

$('#directionCube').imagecube({direction: 'up', repeat: false});

$('#directionButton').click(function() {
	var cube = $('#directionCube');
	var next = parseInt($('#next').val(), 10);
	cube.imagecube('change', {direction: $('#direction').val()}).
		imagecube('rotate', next, function() {
			$('#current').text($(cube.imagecube('current')).attr('title'));
		});
});

Control how the next image to be shown is selected. The normal order here is Uluru, islands, gorge.

Next image: Forward Backward Random

  Next rotation: Uluru » Islands

$('#selectionCube').imagecube({direction: 'left', afterRotate: showNext});
	
function showNext() {
	$('#currentNext').text($('#selectionCube').imagecube('current').title +
		' » ' + $('#selectionCube').imagecube('next').title);
}

$('#selection').change(function() {
	$('#selectionCube').imagecube('change',
		{selection: $('#selection').val()});
});

Effect Controls

Change rotation speed: 5001000 2000 5000ms for rotation with 0500 10002000 5000ms pause

 and easing swing in quadratic out quadratic in/out quadratic in cubic out cubic in/out cubic in quartic out quartic in/out quartic in quintic out quintic in/out quintic in sine out sine in/out sine in exponential out exponential in/out exponential in circular out circular in/out circular in back out back in/out back in bounce out bounce in/out bounce

$('#speedCube').imagecube({speed: 5000, easing: 'easeOutBounce'});

$('#effects select').change(function() {
	$('#speedCube').imagecube('stop').
		imagecube('change', {speed: parseInt($('#speed').val()),
			pause: parseInt($('#pause').val()), easing: $('#easing').val()}).
		imagecube('start');
});

No shading effects:

$('#plainCube').imagecube({shading: false});

Random Rotations

You can control from which directions a random selection is made.

Random up/down:

$('#upDownCube').imagecube({randomSelection: ['up', 'down']});

Random left/right:

$('#leftRightCube').imagecube({randomSelection: ['left', 'right']});

Images as Links

Wrap the images in links to allow the user to click on them for more details. Make sure that the embedded images are styled to fill the link element: style="width: 100%; height: 100%;".

Links cube:

#linksCube img { width: 100%; height: 100%; }

<div id="linksCube" style="width: 200px; height: 150px;">
	<a href="img/uluru.jpg"><img src="uluru.jpg" title="Uluru"/></a>
	<a href="img/islands.jpg"><img src="islands.jpg" title="Islands"/></a>
	<a href="img/gorge.jpg"><img src="gorge.jpg" title="Gorge"/></a>
</div>

$('#linksCube').imagecube();

Rotation Callbacks

There are two callbacks available: one just as the rotation is starting and another as the rotation ends.

Before/after rotation:

  Status:

$('#callbackCube').imagecube(
	{beforeRotate: startingRotate, afterRotate: endedRotate});

function startingRotate(current, next) {
	$('#rotateStatus').text('starting ' + $(current).attr('title') +
		' » ' + $(next).attr('title'));
}

function endedRotate(current, next) {
	$('#rotateStatus').text('ended ' + $(current).attr('title') +
		' » ' + $(next).attr('title'));
}

Text Cube

You can also rotate text, but the effect is not quite as good. Note that each child may have its own colours, borders, and padding.

Text cube:

<div id="textCube" style="width: 200px; height: 150px;">
	<div style="background-color: #FAA;">Once a jolly swagman...</div>
	<div style="background-color: #AFA; padding: 5px 5px;
			border: 2px solid lime;">
		Out on the board the old shearer stands,...</div>
	<div style="background-color: #AAF; padding: 3px 3px;
			border: 5px double rgb(0, 0, 255);">
		Australians all let us rejoice...</div>
</div>

$('#textCube').imagecube();

Text cube without shading:

$('#textPlain').imagecube({shading: false});

Link banner:

$('#textBanner').imagecube({
	direction: 'up', speed: 500, full3D: false, shading: false});

3D Effect Controls

The 3D effect can be tuned with the following settings. The reduction and expansion settings give you control over the sizing of the cube by changing the amount that the far edges decreases in size and that the near edge increases in size. The segments setting controls how many pieces each image is divided into for the effect.

Full 3D cube: Reduction 010 3050  Expansion 010 2030  Segments 510 20

$('#full3DCube').imagecube({speed: 3000});

$('#reduction,#expansion,#segments').change(function() {
	$('#full3DCube').imagecube('change', {reduction: $('#reduction').val(),
		expansion: $('#expansion').val(), segments: $('#segments').val()});
});

The original pseudo-3D rotation (without perspective) is still available.

Pseudo 3D cube:

$('#flatCube').imagecube({full3D: false});

Text cube:

$('#flatTextCube').imagecube({full3D: false});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).imagecube({
	direction: 'random', // Direction of rotation: random|up|down|left|right
	randomSelection: ['up', 'down', 'left', 'right'],
		// If direction is random, select one of these
	speed: 2000, // Time taken (milliseconds) to transition
	easing: 'linear', // Name of the easing to use during transitions
	repeat: true, // True to automatically trigger a new transition after a pause
	pause: 2000, // Time (milliseconds) between transitions
	selection: 'forward', // How to choose the next item to show:
		// 'forward', 'backward', 'random'
	shading: true, // True to add shading effects, false for no effects
	opacity: 0.8, // Maximum opacity (0.0 - 1.0) for highlights and shadows
	imagePath: '', // Any extra path to locate the highlight/shadow images
	full3D: true, // True to add cubic perspective, false for 2D rotation
	segments: 20, // The number of segments that make up each 3D face
	reduction: 30, // The amount (pixels) of reduction for far edges of the cube
	expansion: 10, // The amount (pixels) of expansion for the near edge of the cube
	lineHeight: [0.0, 1.25], // Hidden and normal line height (em) for text
	letterSpacing: [-0.4, 0.0], // Hidden and normal letter spacing (em) for text
	beforeRotate: null, // Callback before rotating
	afterRotate: null // Callback after rotating
});

$.imagecube.setDefaults(options) // Set global defaults

$(selector).imagecube('change', options, value) // Change settings
$(selector).imagecube('destroy') // Remove image cube functionality
$(selector).imagecube('rotate', next, callback) // Rotate to next face
$(selector).imagecube('stop') // Stop automatic rotation
$(selector).imagecube('start') // Restart automatic rotation
$(selector).imagecube('current') // Retrieve the current face
$(selector).imagecube('next') // Retrieve the next face