jQuery Plugins: tossnCuber

jQuery plugin rendering an image into cubes and displays them on the screen.
Download and use it free.

Examples top

Example 1

tossnCuber with background color red:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#E44D3E',
});

 

Example 2

tossnCuber with background image and displaying tiles not in random order:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
});

 

Example 3

tossnCuber appended to dom element with id "blueBoxOnTheRight":

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	parent: $('#blueBoxOnTheRight'),
	tileSize: 50,
	onStart: function() {
		window.scrollTo(0, $('#blueBoxOnTheRight').offset().top);
	},
});

 

Example 4

tossnCuber with background image and displaying tiles not in random order:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	random: false,
});

 

Example 5

Changing content after tossnCuber is complete:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#DA5D2E',
	onStart: function() {
		window.scrollTo(0, 0);
	},
	onComplete: function() {
		var html = '<h1>This is the new content!</h1>';
		html += '<p><a href="tossncuber.html">Go back</a></p>';
		$('#content').html(html);
	},
});

 

How to use top

1. load jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. load tossnCuber

<script type="text/javascript" src="tossnCuber/js/tossn-cuber.js"></script>

3. Create a link or button element

<a href="#" class="toggleCuber">my link</a>

4. Fire plugin using jQuery selector

$(document).ready(function() {
	$('a.toggleCuber').tossnCuber({
		backgroundImage: 'images/bgimage.jpg',
	});
});

Global options top

Key Type Default Description
tileSize integer 120 Tile size in pixel.
random boolean true Show tiles in random order?
speed integer 1000 Animation speed of the whole cube in milliseconds.
tileSpeed integer 300 Animation speed of the tiles in milliseconds.
backgroundImage string "" Background image of the tiles.
backgroundColor string "#ffffff" Background color of the tiles.
parent DOM Element $(body) The DOM element, the cubes will appended to.

Callback functions top

Key Default Description
onStart NULL Will be called before loading.
onComplete NULL Will be called after loading.
onClosed NULL Will be called before tossnCuber is closed.

Directory

Download

Download our latest release tossnCuber v1.0.1

Download!