Merge pull request #7 from mycolorway/zoom-in-btn

Zoom in btn

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-gallery",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "homepage": "https://github.com/mycolorway/simple-gallery",
   "authors": [
     "kshift <[email protected]>"

lib/gallery.js

@@ -217,14 +217,31 @@ Gallery = (function(superClass) {
     showZoom = this.curOriginSize.width > stageSize.width || this.curOriginSize.height > stageSize.height;
     this.gallery.css(this._fitSize(stageSize, originSize));
     this.img.attr('src', thumbImg.src);
-    this.zoom_in = showZoom ? this.wrapper.find('.zoom-in') : void 0;
+    if (showZoom) {
+      this.zoom_in = this.wrapper.find('.zoom-in');
+      this.wrapper.on('mouseover.gallery', '.gallery-img img', (function(_this) {
+        return function(e) {
+          e.stopPropagation();
+          return _this.zoom_in.addClass('active');
+        };
+      })(this));
+      this.wrapper.on('mouseout.gallery', '.gallery-img img', (function(_this) {
+        return function(e) {
+          e.stopPropagation();
+          return _this.zoom_in.removeClass('active');
+        };
+      })(this));
+    } else {
+      this.zoom_in = void 0;
+      this.wrapper.off('mouseover.gallery').off('mouseout.gallery');
+    }
     return this.gallery.addClass('loading');
   };
 
   Gallery.prototype._onGalleryThumbClick = function(e) {
     var galleryItem, link, originThumb;
     if (this.zoom_in) {
-      this.zoom_in.hide();
+      this.zoom_in.removeClass('active');
     }
     link = $(e.currentTarget);
     galleryItem = link.parent('.thumb');
@@ -293,7 +310,7 @@ Gallery = (function(superClass) {
     var $win, deg, imgSize, isOrthogonal, originSize, stageSize;
     this.rotatedegrees += 90;
     if (this.zoom_in) {
-      this.zoom_in.hide();
+      this.zoom_in.removeClass('active');
     }
     if (this.opts.save) {
       this._saveDegree();
@@ -377,12 +394,10 @@ Gallery = (function(superClass) {
         top -= diff;
       }
       left = left + this.gallery.width() - this.zoom_in.width() - 16;
-      this.zoom_in.css({
+      return this.zoom_in.css({
         top: top + 5,
-        left: left - 5,
-        display: 'block'
+        left: left - 5
       });
-      return this.zoom_in.show();
     }
   };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-gallery",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "a simple gallery widget based on Simple Module",
   "repository": {
     "type": "git",

src/gallery.coffee

@@ -191,16 +191,28 @@ class Gallery extends SimpleModule
       height: $win.height() - 90
     showZoom = @curOriginSize.width > stageSize.width or @curOriginSize.height > stageSize.height
 
-    @gallery.css @_fitSize(stageSize, originSize)
+    @gallery.css @_fitSize stageSize, originSize
     @img.attr('src', thumbImg.src)
-    @zoom_in = if showZoom then @wrapper.find('.zoom-in') else undefined
+
+    if showZoom
+      @zoom_in = @wrapper.find('.zoom-in')
+      @wrapper.on 'mouseover.gallery', '.gallery-img img', (e)=>
+        e.stopPropagation()
+        @zoom_in.addClass('active')
+      @wrapper.on 'mouseout.gallery', '.gallery-img img', (e)=>
+        e.stopPropagation()
+        @zoom_in.removeClass('active')
+    else
+      @zoom_in = undefined
+      @wrapper.off 'mouseover.gallery'
+      .off 'mouseout.gallery'
+
     @gallery.addClass 'loading'
 
 
   _onGalleryThumbClick: (e) ->
-
     if @zoom_in
-      @zoom_in.hide()
+      @zoom_in.removeClass('active')
     link        = $(e.currentTarget)
     galleryItem = link.parent '.thumb'
     originThumb = galleryItem.data 'originThumb'
@@ -268,8 +280,8 @@ class Gallery extends SimpleModule
 
   _rotate: () ->
     @rotatedegrees += 90
-
-    @zoom_in.hide()  if @zoom_in
+        
+    @zoom_in.removeClass('active') if @zoom_in
     @_saveDegree()  if @opts.save
 
     deg = "rotate(#{ @rotatedegrees }deg)"
@@ -346,9 +358,6 @@ class Gallery extends SimpleModule
       @zoom_in.css
         top: top + 5
         left : left - 5
-        display: 'block'
-
-      @zoom_in.show()
 
 
   _scrollToThumb: () ->

styles/gallery.css

@@ -63,7 +63,6 @@ html.simple-gallery-active {
   display: block;
 }
 .simple-gallery .zoom-in {
-  display: none;
   position: absolute;
   padding: 0 8px;
   color: #fff;
@@ -72,8 +71,15 @@ html.simple-gallery-active {
   text-decoration: none;
   border-radius: 4px;
   background-color: #999;
-  opacity: 0.6;
+  opacity: 0;
   z-index: 501;
+  -moz-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+}
+.simple-gallery .zoom-in.active {
+  opacity: 0.6;
 }
 .simple-gallery .zoom-in:hover {
   opacity: 1;

styles/gallery.scss

@@ -72,7 +72,6 @@ html.simple-gallery-active {
   }
 
   .zoom-in {
-    display: none;
     position: absolute;
     padding: 0 8px;
     color: #fff;
@@ -81,9 +80,15 @@ html.simple-gallery-active {
     text-decoration: none;
     border-radius: 4px;
     background-color: #999;
-    opacity: 0.6;
+    opacity: 0;
     z-index: 501;
-
+    -moz-transition: 0.3s;
+    -webkit-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+    &.active {
+      opacity: 0.6;
+    }
     &:hover {
       opacity: 1;
     }