public
Last active

  • Download Gist
jquery.sliced.css
CSS
1 2 3 4 5 6
.sliced {
position: relative;
width: 640px;
height: 400px;
}
.tile { float: left; }
jquery.sliced.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
;(function( $, window ) {
 
var _defaults = {
x : 2, // number of tiles in x axis
y : 2, // number of tiles in y axis
random : true, // animate tiles in random order
speed : 2000 // time to clear all times
};
 
$.fn.sliced = function( options ) {
 
var o = $.extend( {}, _defaults, options );
 
return this.each(function() {
 
var $container = $(this),
width = $container.width(),
height = $container.height(),
$img = $container.find('img'),
n_tiles = o.x * o.y,
wraps = [], $wraps;
 
for ( var i = 0; i < n_tiles; i++ ) {
wraps.push('<div class="tile"/>');
}
 
$wraps = $( wraps.join('') );
 
// Hide original image and insert tiles in DOM
$img.hide().after( $wraps );
 
// Set background
$wraps.css({
width: width / o.x,
height: height / o.y,
backgroundImage: 'url('+ $img.attr('src') +')'
});
// Adjust position
$wraps.each(function() {
var pos = $(this).position();
$(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
});
 
});
 
};
 
}( jQuery, window ));

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.