fix for improved performance and new version

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",

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": [

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"/>
 			    </svg>
-			    <h1>ZooMove <small>v1.0.0</small></h1>
+			    <h1>ZooMove <small>v1.2.0</small></h1>
 			</div>
 		</header>
 
@@ -68,10 +68,9 @@ <h5 class="title">Examples</h5>
 	<script src="../dist/zoomove.min.js"></script>
 	<script>
 		$('.zoo-item').ZooMove({
-			// image: 'http://lorempixel.com/600/600/animals/1',
 			cursor: 'true',
 			scale: '1.2',
 		});
 	</script>
 </body>
-</html>
+</html>

dist/zoomove.min.css

@@ -1,10 +1,10 @@
 /*!
- * ZooMove v1.1.0
+ * ZooMove v1.2.0
  * http://thompsonemerson.github.io/zoomove
  *
  * Copyright (c) 2016, Emerson Thompson
  * Licensed http://thompsonemerson.mit-license.org
 */
 
 
-.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}

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",

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('<div class="zoo-img"></div>')
                     .children('.zoo-img')
                         .css({
@@ -45,45 +46,48 @@
             })
 
             .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 +')'
                         });
             })
 
             .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 ));
+}( jQuery ));