Изображение на части через div

by zlojnaxa

HTML

<div class="imgParts">
    <img src="https://grandgames.net/puzzle/source_p/optimizm_s.jpg"/>
</div>
<div class="result">

CSS

.part
{
	float: left;
	margin: 5px;
}
.imgParts
{
	margin-bottom: 30px;
	margin-top: 30px;
	text-align: center;
}
.imgParts img
{
	height: 100px;
	width: 150px;
}
.result
{
	margin: 0 auto;
}

JavaScript

$(function() {
    var PARTS = 3;
    var imgParts = $('.imgParts img');
    
    imgParts.css('visibility', 'visible');
    var container = $('.result');
    var imageSrc = imgParts.attr('src');
    if (container.attr('data-src') != imageSrc) {
        $('.boxshadow .result').css('box-shadow', 'none');
        container.fadeOut('fast');
        container.css('visibility', 'hidden');
        container.show();
        container.html('');
        container.attr('data-src', imageSrc);
        var parts = PARTS;
        var image = $('<img>');
        image.attr('id', 'mainImg');
        image.attr('src', imageSrc);
        image.css('display', 'none');
        container.append(image);
        var imageHeight = image.height();
        var imageWidth = image.width();
        var partHeight = imageHeight / parts;
        var partWidth = imageWidth / parts;
        for (var vpart = 0; vpart < parts; vpart++) {
            for (var hpart = 0; hpart < parts; hpart++) {
                var div = $('<div>');
                var posV = vpart * partHeight * -1;
                var posH = hpart * partWidth * -1;
                div.css({
                    height: partHeight,
                    width: partWidth
                });
                div.css('background-image', "url(" + imageSrc + ")");
                div.css('background-position', posH + 'px' + ' ' + posV + 'px');
                var divParent = $('<div>');
                divParent.attr('id', vpart + '-' + hpart);
                divParent.addClass('part');
                divParent.append(div);
                container.append(divParent);
            }
            var divClear = $('<div></div>');
            divClear.css('clear', 'both');
            container.append(divClear);
        }
        var totalResult = imageWidth + (parts * 10);
        container.css('width', totalResult + 'px');
        container.hide();
        container.css('visibility', 'visible');
        container.fadeIn('fast');
    }
})