diff --git a/src/js/zoomove.js b/src/js/zoomove.js index 343f53f..2e73174 100644 --- a/src/js/zoomove.js +++ b/src/js/zoomove.js @@ -1,6 +1,6 @@ -(function ( $ ) { +(function ($) { - $.fn.ZooMove = function( options ) { + $.fn.ZooMove = function (options) { // config default var zoo = $.extend({ @@ -8,24 +8,24 @@ cursor: 'false', scale: '1.5', move: 'true', - over: 'false', - autosize: 'true' - }, options ); + over: 'false', + autosize: 'true' + }, options); // cursor config - if($(this).attr('data-zoo-cursor')) { zoo.cursor = $(this).attr('data-zoo-cursor'); } - if(zoo.cursor === 'true') { zoo.cursor = 'pointer'; } - else{ zoo.cursor = 'default'; } + if ($(this).attr('data-zoo-cursor')) { zoo.cursor = $(this).attr('data-zoo-cursor'); } + if (zoo.cursor === 'true') { zoo.cursor = 'pointer'; } + else { zoo.cursor = 'default'; } this - .each(function(){ + .each(function () { var thisZoo = $(this); // cache current jquery zoo element // if over exist and over true - if(thisZoo.attr('data-zoo-over')) { zoo.overD = thisZoo.attr('data-zoo-over'); } - else{ zoo.overD = zoo.over; } + if (thisZoo.attr('data-zoo-over')) { zoo.overD = thisZoo.attr('data-zoo-over'); } + else { zoo.overD = zoo.over; } - if(zoo.overD === 'true'){ + if (zoo.overD === 'true') { thisZoo.css({ 'overflow': 'visible', 'z-index': '100' @@ -33,83 +33,81 @@ } // if image exist - if(thisZoo.attr('data-zoo-image')) { zoo.imageD = thisZoo.attr('data-zoo-image'); } - else{ zoo.imageD = zoo.image; } - - // if autosize exist - if(thisZoo.attr('data-zoo-autosize')) { zoo.autosizeD = thisZoo.attr('data-zoo-autosize'); } - else{ zoo.autosizeD = zoo.autosize; } - - if(zoo.autosizeD === 'true') { - $('',{ - load: function(){ - thisZoo.css('width', this.width + 'px') - thisZoo.css('height', this.height + 'px') - }, - src: zoo.imageD - }); - } + if (thisZoo.attr('data-zoo-image')) { zoo.imageD = thisZoo.attr('data-zoo-image'); } + else { zoo.imageD = zoo.image; } + + // if autosize exist + if (thisZoo.attr('data-zoo-autosize')) { zoo.autosizeD = thisZoo.attr('data-zoo-autosize'); } + else { zoo.autosizeD = zoo.autosize; } + + if (zoo.autosizeD === 'true') { + $('').on('load', function () { + var $this = $(this); + thisZoo.css('width', $this.width() + 'px'); + thisZoo.css('height', $this.height() + 'px'); + }).attr('src', zoo.imageD); + } // create image element background thisZoo .append('
') .children('.zoo-img') - .css({ - 'background-image': 'url('+ zoo.imageD +')', - 'cursor': zoo.cursor - }); + .css({ + 'background-image': 'url(' + zoo.imageD + ')', + 'cursor': zoo.cursor + }); }) - .on('mouseover', function(e){ + .on('mouseover', function (e) { var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // if scale exist - if(thisZoo.attr('data-zoo-scale')) { zoo.scaleD = thisZoo.attr('data-zoo-scale'); } - else{ zoo.scaleD = zoo.scale; } + if (thisZoo.attr('data-zoo-scale')) { zoo.scaleD = thisZoo.attr('data-zoo-scale'); } + else { zoo.scaleD = zoo.scale; } // if move exist - if(thisZoo.attr('data-zoo-move')) { zoo.moveD = thisZoo.attr('data-zoo-move'); } - else{ zoo.moveD = zoo.move; } + if (thisZoo.attr('data-zoo-move')) { zoo.moveD = thisZoo.attr('data-zoo-move'); } + else { zoo.moveD = zoo.move; } // change scale thisZoo .children('.zoo-img') - .css({ - 'transform': 'scale('+ zoo.scaleD +')' - }); + .css({ + 'transform': 'scale(' + zoo.scaleD + ')' + }); }) - .on('mousemove', function(e){ + .on('mousemove', function (e) { var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // if move true - if(zoo.moveD === 'true') { + if (zoo.moveD === 'true') { // change image position with mouse move thisZoo .children('.zoo-img') - .css({ - 'transform-origin': - ((e.pageX - thisZoo.offset().left) / thisZoo.width()) * 100 + '% ' + - ((e.pageY - thisZoo.offset().top) / thisZoo.height()) * 100 + '%' - }); + .css({ + 'transform-origin': + ((e.pageX - thisZoo.offset().left) / thisZoo.width()) * 100 + '% ' + + ((e.pageY - thisZoo.offset().top) / thisZoo.height()) * 100 + '%' + }); } }) - .on('mouseout', function(e){ + .on('mouseout', function (e) { var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // return initial scale thisZoo .children('.zoo-img') - .css({ - 'transform': 'scale(1)' - }); + .css({ + 'transform': 'scale(1)' + }); - }); + }); }; -}( jQuery )); +}(jQuery));