Per dividere un'immagine in più parti con jQuery ho creato un semplice plugin che sovrappone all'immagine un elemento contenente le sue parti. Queste parti hanno tutte come immagine di sfondo l'immagine principale, ma un valore diverso della proprietà background-position in modo da creare l'illusione di immagini diverse. Il plugin è veramente semplice nell'implementazione. Vediamone i dettagli.
(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);
Le opzioni del plugin ci permettono di definire il numero di parti in cui si vuole dividere l'immagine, le dimensioni di ciascuna parte, la velocità dell'animazione, e un array di valori corrispondenti alle varie porzioni di immagine da mostrare. Questi valori non sono altro che le coordinate x e y della proprietà background-position. Ho preferito lasciare all'utente il compito di definirli perchè in questo modo si è liberi di scegliere l'effetto migliore.
Un esempio:
$(function() {
$('#divide').one('click', function(event) {
$('#image').divide({speed: 500});
event.preventDefault();
});
});
Potete visionare l'esempio finale in questa pagina.