Dividing an image with jQuery simply means that you have to create several elements which contain a different part of the image set as their background image and shown via the background-position property. So here's a simple (simple indeed!) plugin which, given the number of parts, their dimensions, the animation speed and an array of background coordinates, divides an image.
(function($) {
$.fn.divide = function(options) {
var that = this;
var settings = {
parts: 4,
speed: 1000,
partWidth: 300,
partHeight: 225,
positions: ['0px 0px', '-150px 0px', '0px -150px', '-150px -150px']
};
options = $.extend(settings, options);
var img = $('img', that);
var imgWidth = img.width();
var imgHeight = img.height();
var imgSrc = img.attr('src');
var wrapper = $('<div id="wrapper"></div>');
wrapper.css({
width: imgWidth,
height: imgHeight,
position: 'absolute',
zIndex: 100,
overflow: 'hidden',
top: 0,
left: 0
}).appendTo(that);
return that.each(function() {
var index = -1;
for(var i = 0; i < options.parts; i += 1) {
index++;
$('<div class="block"></div>').css({
width: options.partWidth - 4,
height: options.partHeight - 4,
'float': 'left',
backgroundImage: 'url(' + imgSrc + ')',
backgroundRepeat: 'no-repeat',
backgroundPosition: options.positions[index],
border: '2px solid #fff',
cursor: 'pointer'
}).appendTo('#wrapper').hide();
}
setTimeout(function() {
img.animate({
width: '+=50px',
height: '+=50px',
opacity: 'hide'
}, options.speed, function() {
$('div.block').show();
$('div.block').each(function(i) {
var $div = $(this);
$div.attr('title', 'Parte ' + (i + 1));
$div.hover(function() {
$div.stop(true, true).
animate({
opacity: 0.7
}, options.speed);
}, function() {
$div.stop(true, true).
animate({
opacity: 1
}, options.speed);
});
});
});
}, options.speed);
});
};
})(jQuery);
An example:
$(function() {
$('#divide').one('click', function(event) {
$('#image').divide({speed: 500});
event.preventDefault();
});
});
You can see the demo below.