jQuery Plugins: tossnCuber

October 15, 2019

Examples top

Example 1

tossnCuber with background color red:

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

Test it!

 

Example 2

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

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

Test it!

 

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);
	},
});

Test it!

 

Example 4

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

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

Test it!

 

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);
	},
});

Test it!

 

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

Callback functions top