From 1b43766c8d53b292d5a6f1ca9a71311de3a05a58 Mon Sep 17 00:00:00 2001 From: Emerson Thompson Date: Thu, 21 Jul 2016 21:27:55 -0300 Subject: [PATCH] fix for improved performance and new version --- bower.json | 2 +- component.json | 8 ++++++-- demo/index.html | 5 ++--- dist/zoomove.min.css | 4 ++-- dist/zoomove.min.js | 4 ++-- package.json | 2 +- src/js/zoomove.js | 28 ++++++++++++++++------------ 7 files changed, 30 insertions(+), 23 deletions(-) diff --git a/bower.json b/bower.json index 87e9b7f..337970c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "zoomove", - "version": "1.1.0", + "version": "1.2.0", "description": "Enlarges the image with the mouse hover and move", "repository": "https://github.com/thompsonemerson/zoomove", "homepage": "http://thompsonemerson.github.io/zoomove", diff --git a/component.json b/component.json index a3538a8..5f931a6 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "zoomove", - "version": "1.1.0", + "version": "1.2.0", "description": "Enlarges the image with the mouse hover and move", "repository": "https://github.com/thompsonemerson/zoomove", "homepage": "http://thompsonemerson.github.io/zoomove", @@ -19,8 +19,12 @@ "hover", "mouseover", "jquery", + "jquery-plugin", "javascript", - "image" + "js", + "image", + "img", + "imagem" ], "moduleType": [], "ignore": [ diff --git a/demo/index.html b/demo/index.html index 81381f3..32c5f71 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,7 +29,7 @@ L129.3,409.6z M1.4,408.9c-0.5-2.2-0.8-4.4-0.8-6.8c0-15.4,12.5-27.9,27.9-27.9c1.9,0,3.7,0.2,5.5,0.5L1.4,408.9z M198.7,359.5h60.8 v3.4h-60.8V359.5z M210.8,372.6h80.8v3.4h-80.8V372.6z M216.6,386.4h37v3.4h-37V386.4z"/> -

ZooMove v1.0.0

+

ZooMove v1.2.0

@@ -68,10 +68,9 @@
Examples
- \ No newline at end of file + diff --git a/dist/zoomove.min.css b/dist/zoomove.min.css index 77b8869..6cdcdec 100644 --- a/dist/zoomove.min.css +++ b/dist/zoomove.min.css @@ -1,5 +1,5 @@ /*! - * ZooMove v1.1.0 + * ZooMove v1.2.0 * http://thompsonemerson.github.io/zoomove * * Copyright (c) 2016, Emerson Thompson @@ -7,4 +7,4 @@ */ -.zoo-item{position:absolute;width:100%;height:100%;overflow:hidden;transition:all 150ms linear;display:flex;align-items:center;justify-content:center}.zoo-item .zoo-img{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transition:transform .5s ease-out} +.zoo-item{position:absolute;width:100%;height:100%;overflow:hidden;transition:all 150ms linear;display:flex;align-items:center;justify-content:center}.zoo-item .zoo-img{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transition:transform 0.5s ease-out} diff --git a/dist/zoomove.min.js b/dist/zoomove.min.js index 6a9096f..49893f6 100644 --- a/dist/zoomove.min.js +++ b/dist/zoomove.min.js @@ -1,9 +1,9 @@ /*! - * ZooMove v1.1.0 + * ZooMove v1.2.0 * http://thompsonemerson.github.io/zoomove * * Copyright (c) 2016, Emerson Thompson * Licensed http://thompsonemerson.mit-license.org */ -!function(a){a.fn.ZooMove=function(b){var c=a.extend({image:"https://placeholdit.imgix.net/~text?txtsize=30&txt=image+default&w=350&h=350&txttrack=0",cursor:"false",scale:"1.5",move:"true",over:"false"},b);a(this).attr("data-zoo-cursor")&&(c.cursor=a(this).attr("data-zoo-cursor")),c.cursor="true"===c.cursor?"pointer":"default",this.each(function(){c.overD=a(this).attr("data-zoo-over")?a(this).attr("data-zoo-over"):c.over,"true"===c.overD&&a(this).css({overflow:"visible","z-index":"100"}),c.imageD=a(this).attr("data-zoo-image")?a(this).attr("data-zoo-image"):c.image,a(this).append('
').children(".zoo-img").css({"background-image":"url("+c.imageD+")",cursor:c.cursor})}).on("mouseover",function(b){b.preventDefault(),c.scaleD=a(this).attr("data-zoo-scale")?a(this).attr("data-zoo-scale"):c.scale,c.moveD=a(this).attr("data-zoo-move")?a(this).attr("data-zoo-move"):c.move,a(this).children(".zoo-img").css({transform:"scale("+c.scaleD+")"})}).on("mousemove",function(b){b.preventDefault(),"true"===c.moveD&&a(this).children(".zoo-img").css({"transform-origin":(b.pageX-a(this).offset().left)/a(this).width()*100+"% "+(b.pageY-a(this).offset().top)/a(this).height()*100+"%"})}).on("mouseout",function(b){b.preventDefault(),a(this).children(".zoo-img").css({transform:"scale(1)"})})}}(jQuery); \ No newline at end of file +!function(a){a.fn.ZooMove=function(b){var c=a.extend({image:"https://placeholdit.imgix.net/~text?txtsize=30&txt=image+default&w=350&h=350&txttrack=0",cursor:"false",scale:"1.5",move:"true",over:"false"},b);a(this).attr("data-zoo-cursor")&&(c.cursor=a(this).attr("data-zoo-cursor")),c.cursor="true"===c.cursor?"pointer":"default",this.each(function(){var b=a(this);c.overD=b.attr("data-zoo-over")?b.attr("data-zoo-over"):c.over,"true"===c.overD&&b.css({overflow:"visible","z-index":"100"}),c.imageD=b.attr("data-zoo-image")?b.attr("data-zoo-image"):c.image,b.append('
').children(".zoo-img").css({"background-image":"url("+c.imageD+")",cursor:c.cursor})}).on("mouseover",function(b){var d=a(this);b.preventDefault(),c.scaleD=d.attr("data-zoo-scale")?d.attr("data-zoo-scale"):c.scale,c.moveD=d.attr("data-zoo-move")?d.attr("data-zoo-move"):c.move,d.children(".zoo-img").css({transform:"scale("+c.scaleD+")"})}).on("mousemove",function(b){var d=a(this);b.preventDefault(),"true"===c.moveD&&d.children(".zoo-img").css({"transform-origin":(b.pageX-d.offset().left)/d.width()*100+"% "+(b.pageY-d.offset().top)/d.height()*100+"%"})}).on("mouseout",function(b){var c=a(this);b.preventDefault(),c.children(".zoo-img").css({transform:"scale(1)"})})}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index 9bc9575..1581311 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zoomove", - "version": "1.1.0", + "version": "1.2.0", "description": "Enlarges the image with the mouse hover and move", "title": "ZooMove", "homepage": "http://thompsonemerson.github.io/zoomove", diff --git a/src/js/zoomove.js b/src/js/zoomove.js index 6d86620..1b44339 100644 --- a/src/js/zoomove.js +++ b/src/js/zoomove.js @@ -18,24 +18,25 @@ this .each(function(){ + var thisZoo = $(this); // cache current jquery zoo element // if over exist and over true - if($(this).attr('data-zoo-over')) { zoo.overD = $(this).attr('data-zoo-over'); } + if(thisZoo.attr('data-zoo-over')) { zoo.overD = thisZoo.attr('data-zoo-over'); } else{ zoo.overD = zoo.over; } if(zoo.overD === 'true'){ - $(this).css({ + thisZoo.css({ 'overflow': 'visible', 'z-index': '100' }); } // if image exist - if($(this).attr('data-zoo-image')) { zoo.imageD = $(this).attr('data-zoo-image'); } + if(thisZoo.attr('data-zoo-image')) { zoo.imageD = thisZoo.attr('data-zoo-image'); } else{ zoo.imageD = zoo.image; } // create image element background - $(this) + thisZoo .append('
') .children('.zoo-img') .css({ @@ -45,18 +46,19 @@ }) .on('mouseover', function(e){ + var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // if scale exist - if($(this).attr('data-zoo-scale')) { zoo.scaleD = $(this).attr('data-zoo-scale'); } + if(thisZoo.attr('data-zoo-scale')) { zoo.scaleD = thisZoo.attr('data-zoo-scale'); } else{ zoo.scaleD = zoo.scale; } // if move exist - if($(this).attr('data-zoo-move')) { zoo.moveD = $(this).attr('data-zoo-move'); } + if(thisZoo.attr('data-zoo-move')) { zoo.moveD = thisZoo.attr('data-zoo-move'); } else{ zoo.moveD = zoo.move; } // change scale - $(this) + thisZoo .children('.zoo-img') .css({ 'transform': 'scale('+ zoo.scaleD +')' @@ -64,26 +66,28 @@ }) .on('mousemove', function(e){ + var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // if move true if(zoo.moveD === 'true') { // change image position with mouse move - $(this) + thisZoo .children('.zoo-img') .css({ 'transform-origin': - ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + - ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%' + ((e.pageX - thisZoo.offset().left) / thisZoo.width()) * 100 + '% ' + + ((e.pageY - thisZoo.offset().top) / thisZoo.height()) * 100 + '%' }); } }) .on('mouseout', function(e){ + var thisZoo = $(this); // cache current jquery zoo element e.preventDefault(); // return initial scale - $(this) + thisZoo .children('.zoo-img') .css({ 'transform': 'scale(1)' @@ -93,4 +97,4 @@ }; -}( jQuery )); \ No newline at end of file +}( jQuery ));