From 0894391052da22c996599950fd7aadda7d663cc3 Mon Sep 17 00:00:00 2001 From: ZhangRui Date: Mon, 25 Jan 2016 16:10:50 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=88=A0=E6=8E=89zoom-in=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/gallery.js | 117 +++++---------------------------------------- src/gallery.coffee | 92 +---------------------------------- 2 files changed, 14 insertions(+), 195 deletions(-) diff --git a/lib/gallery.js b/lib/gallery.js index ff33c17..c75c9d0 100644 --- a/lib/gallery.js +++ b/lib/gallery.js @@ -39,14 +39,12 @@ Gallery = (function(superClass) { 'zh-CN': { rotate_image: '旋转图片', download_image: '下载图片', - view_full_size: '查看原图', - zoomin_image: '查看大图' + view_full_size: '查看原图' }, 'en': { rotate_image: 'Rotate', download_image: 'Download', - view_full_size: 'View', - zoomin_image: 'Zoom in' + view_full_size: 'View' } }; @@ -68,7 +66,7 @@ Gallery = (function(superClass) { }; Gallery.prototype._render = function() { - Gallery._tpl.gallery = "
\n \n " + (this._t('zoomin_image')) + "\n \n
\n \n
\n
\n
\n \n
\n \n " + (this._t('rotate_image')) + "\n \n \n " + (this._t('download_image')) + "\n \n \n " + (this._t('view_full_size')) + "\n \n
\n
\n
"; + Gallery._tpl.gallery = "
\n
\n \n
\n
\n
\n \n
\n \n " + (this._t('rotate_image')) + "\n \n \n " + (this._t('download_image')) + "\n \n \n " + (this._t('view_full_size')) + "\n \n
\n
\n
"; $('html').addClass('simple-gallery-active'); this.rotatedegrees = 0; this.curThumb = this.opts.el; @@ -79,7 +77,7 @@ Gallery = (function(superClass) { this.thumbs = this.curThumb.closest(this.opts.wrapCls).find(this.opts.itemCls); this._createStage(); this._createList(); - return setTimeout(((function(_this) { + return setTimeout((function(_this) { return function() { _this._renderImage(); _this.imgDetail.fadeIn('fast'); @@ -99,13 +97,10 @@ Gallery = (function(superClass) { _this.gallery.removeClass('loading'); } _this._preloadOthers(); - _this._initRoutate(); - return _this.gallery.one(_this.util.transitionEnd(), function(e) { - return _this._zoomInPosition(); - }); + return _this._initRoutate(); }); }; - })(this)), 50); + })(this), 50); }; Gallery.prototype._bind = function() { @@ -119,12 +114,7 @@ Gallery = (function(superClass) { })(this)).on('click.gallery', '.natural-image', function(e) { e.stopPropagation(); return $(this).remove(); - }).on('click.gallery', '.zoom-in', (function(_this) { - return function(e) { - e.stopPropagation(); - return _this._renderNatural(); - }; - })(this)); + }); this.imgDetail.find('.turn-right').on('click.gallery', (function(_this) { return function(e) { e.stopPropagation(); @@ -132,7 +122,7 @@ Gallery = (function(superClass) { }; })(this)); this.thumbsEl.on('click.gallery', '.link', $.proxy(this._onGalleryThumbClick, this)); - $(document).on('keydown.gallery', (function(_this) { + return $(document).on('keydown.gallery', (function(_this) { return function(e) { if (/27|32/.test(e.which)) { _this.destroy(); @@ -148,11 +138,6 @@ Gallery = (function(superClass) { } }; })(this)); - return $(window).on('resize.gallery', (function(_this) { - return function(e) { - return _this._zoomInPosition(); - }; - })(this)); }; Gallery.prototype._unbind = function() { @@ -203,7 +188,7 @@ Gallery = (function(superClass) { }; Gallery.prototype._renderImage = function() { - var $win, originSize, showZoom, stageSize, thumbImg; + var $win, originSize, stageSize, thumbImg; if (!this.gallery) { return; } @@ -214,35 +199,13 @@ Gallery = (function(superClass) { width: $win.width() - (this.thumbs.length > 1 ? 150 : 40), height: $win.height() - 90 }; - showZoom = this.curOriginSize.width > stageSize.width || this.curOriginSize.height > stageSize.height; this.gallery.css(this._fitSize(stageSize, originSize)); this.img.attr('src', thumbImg.src); - 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.removeClass('active'); - } link = $(e.currentTarget); galleryItem = link.parent('.thumb'); originThumb = galleryItem.data('originThumb'); @@ -256,10 +219,7 @@ Gallery = (function(superClass) { if (img.src.indexOf(_this.curOriginSrc) !== -1) { _this.gallery.removeClass('loading'); _this.img.attr('src', img.src); - _this._initRoutate(); - return _this.gallery.one(_this.util.transitionEnd(), function(e) { - return _this._zoomInPosition(); - }); + return _this._initRoutate(); } }; })(this)); @@ -309,9 +269,6 @@ Gallery = (function(superClass) { Gallery.prototype._rotate = function() { var $win, deg, imgSize, isOrthogonal, originSize, stageSize; this.rotatedegrees += 90; - if (this.zoom_in) { - this.zoom_in.removeClass('active'); - } if (this.opts.save) { this._saveDegree(); } @@ -341,23 +298,18 @@ Gallery = (function(superClass) { if (this.util.browser.firefox && imgSize.height < imgSize.width) { imgSize.top = ($win.height() + imgSize.top - imgSize.width) / 2; } - this.gallery.css({ + return this.gallery.css({ width: imgSize.height, height: imgSize.width, top: imgSize.top }); } else { - this.gallery.css({ + return this.gallery.css({ width: imgSize.width, height: imgSize.height, top: imgSize.top }); } - return this.gallery.one('transitionend webkitTransitionEnd', (function(_this) { - return function() { - return _this._zoomInPosition(); - }; - })(this)); }; Gallery.prototype._initRoutate = function() { @@ -383,24 +335,6 @@ Gallery = (function(superClass) { return localStorage.setItem(key, value); }; - Gallery.prototype._zoomInPosition = function() { - var diff, left, top; - if (this.zoom_in) { - top = this.gallery.prop('offsetTop'); - left = this.gallery.prop('offsetLeft'); - if (this.rotatedegrees % 180 !== 0) { - diff = (this.gallery.width() - this.gallery.height()) / 2; - left -= diff; - top -= diff; - } - left = left + this.gallery.width() - this.zoom_in.width() - 16; - return this.zoom_in.css({ - top: top + 5, - left: left - 5 - }); - } - }; - Gallery.prototype._scrollToThumb = function() { var $doc, $selected; $doc = $(document); @@ -437,34 +371,7 @@ Gallery = (function(superClass) { return result; }; - Gallery.prototype._renderNatural = function() { - var deg, height, img, margin_left, margin_top, top, width; - deg = "rotate(" + this.rotatedegrees + "deg)"; - this.wrapper.find('.natural-image').remove(); - img = this.img.clone().css({ - '-webkit-transform': deg, - '-moz-transform': deg, - '-ms-transform': deg, - '-o-transform': deg, - transform: deg, - width: this.curOriginSize.width, - height: this.curOriginSize.height - }).wrap('
').parent().appendTo(this.wrapper); - width = this.rotatedegrees % 180 === 0 ? this.curOriginSize.width : this.curOriginSize.height; - height = this.rotatedegrees % 180 === 0 ? this.curOriginSize.height : this.curOriginSize.width; - margin_left = width > window.innerWidth ? 0 : 'auto'; - margin_top = height > window.innerHeight ? 0 : 'auto'; - top = (height - this.curOriginSize.height) / 2; - return this.wrapper.find('.natural-image img').css({ - margin: margin_top + " " + margin_left, - top: top - }); - }; - Gallery.prototype.destroy = function() { - if (this.zoom_in) { - this.zoom_in.hide(); - } $('html').removeClass('simple-gallery-active'); this._unbind(); this.wrapper.removeClass('modal').find('.natural-image').remove(); diff --git a/src/gallery.coffee b/src/gallery.coffee index 4617eb1..ee1624c 100644 --- a/src/gallery.coffee +++ b/src/gallery.coffee @@ -11,12 +11,10 @@ class Gallery extends SimpleModule rotate_image: '旋转图片' download_image: '下载图片' view_full_size: '查看原图' - zoomin_image: '查看大图' 'en': rotate_image: 'Rotate' download_image: 'Download' view_full_size: 'View' - zoomin_image: 'Zoom in' @_tpl: thumbs: ''' @@ -42,9 +40,6 @@ class Gallery extends SimpleModule _render: () -> Gallery._tpl.gallery = """
- - #{@_t('zoomin_image')} -
@@ -78,7 +73,7 @@ class Gallery extends SimpleModule @_createStage() @_createList() - setTimeout (=> + setTimeout => @_renderImage() @imgDetail.fadeIn 'fast' @wrapper.removeClass 'loading' @@ -93,9 +88,7 @@ class Gallery extends SimpleModule @gallery.removeClass 'loading' if @gallery @_preloadOthers() @_initRoutate() - @gallery.one @util.transitionEnd(), (e) => - @_zoomInPosition() - ), 50 + , 50 _bind: () -> @@ -107,10 +100,6 @@ class Gallery extends SimpleModule e.stopPropagation() $(@).remove() - .on 'click.gallery', '.zoom-in', (e) => - e.stopPropagation() - @_renderNatural() - @imgDetail.find('.turn-right').on 'click.gallery', (e) => e.stopPropagation() @_rotate() @@ -130,10 +119,6 @@ class Gallery extends SimpleModule @_scrollToThumb() return false - $(window).on 'resize.gallery',(e) => - @_zoomInPosition() - - _unbind: () -> $(document).off '.gallery' $(window).off '.gallery' @@ -189,30 +174,14 @@ class Gallery extends SimpleModule stageSize = width: $win.width() - (if @thumbs.length > 1 then 150 else 40) height: $win.height() - 90 - showZoom = @curOriginSize.width > stageSize.width or @curOriginSize.height > stageSize.height @gallery.css @_fitSize stageSize, originSize @img.attr('src', thumbImg.src) - 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.removeClass('active') link = $(e.currentTarget) galleryItem = link.parent '.thumb' originThumb = galleryItem.data 'originThumb' @@ -233,8 +202,6 @@ class Gallery extends SimpleModule @gallery.removeClass 'loading' @img.attr('src', img.src) @_initRoutate() - @gallery.one @util.transitionEnd(), (e) => - @_zoomInPosition() return false @@ -281,7 +248,6 @@ class Gallery extends SimpleModule _rotate: () -> @rotatedegrees += 90 - @zoom_in.removeClass('active') if @zoom_in @_saveDegree() if @opts.save deg = "rotate(#{ @rotatedegrees }deg)" @@ -322,10 +288,6 @@ class Gallery extends SimpleModule height: imgSize.height top: imgSize.top - @gallery.one 'transitionend webkitTransitionEnd', => - @_zoomInPosition() - - _initRoutate: () -> if @opts.save key = "simple-gallery-#{ @gallery.find('img')[0].src }" @@ -342,24 +304,6 @@ class Gallery extends SimpleModule value = @rotatedegrees % 360 localStorage.setItem key, value - - _zoomInPosition: () -> - if @zoom_in - top = @gallery.prop('offsetTop') - left = @gallery.prop('offsetLeft') - - if @rotatedegrees % 180 != 0 - diff = (@gallery.width() - @gallery.height()) / 2 - left -= diff - top -= diff - - left = left + @gallery.width() - @zoom_in.width() - 16 - - @zoom_in.css - top: top + 5 - left : left - 5 - - _scrollToThumb: () -> $doc = $(document) $selected = @thumbsEl.find('.selected') @@ -390,39 +334,7 @@ class Gallery extends SimpleModule result.width = result.height * size.width / size.height result - - _renderNatural: -> - deg = "rotate(#{ @rotatedegrees }deg)" - @wrapper.find('.natural-image').remove() - img = @img.clone() - .css - '-webkit-transform': deg - '-moz-transform': deg - '-ms-transform': deg - '-o-transform': deg - transform: deg - width: @curOriginSize.width - height: @curOriginSize.height - .wrap('
') - .parent() - .appendTo @wrapper - - width = if @rotatedegrees % 180 is 0 then @curOriginSize.width else @curOriginSize.height - height = if @rotatedegrees % 180 is 0 then @curOriginSize.height else @curOriginSize.width - - margin_left = if width > window.innerWidth then 0 else 'auto' - margin_top = if height > window.innerHeight then 0 else 'auto' - top = (height - @curOriginSize.height) / 2 - @wrapper.find('.natural-image img') - .css - margin: "#{margin_top} #{margin_left}" - top: top - - destroy: () => - if @zoom_in - @zoom_in.hide() - $('html').removeClass 'simple-gallery-active' @_unbind() From f37b6482effcd9c4983f27c2ffc179831d15cac5 Mon Sep 17 00:00:00 2001 From: ZhangRui Date: Mon, 25 Jan 2016 16:52:11 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=88=A0=E9=99=A4zoom-in=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/gallery.css | 40 ---------------------------------------- styles/gallery.scss | 44 -------------------------------------------- 2 files changed, 84 deletions(-) diff --git a/styles/gallery.css b/styles/gallery.css index f58b6ea..56939ca 100644 --- a/styles/gallery.css +++ b/styles/gallery.css @@ -62,28 +62,6 @@ html.simple-gallery-active { .simple-gallery.loading .loading-indicator { display: block; } -.simple-gallery .zoom-in { - position: absolute; - padding: 0 8px; - color: #fff; - font-size: 15px; - line-height: 26px; - text-decoration: none; - border-radius: 4px; - background-color: #999; - 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; -} .simple-gallery.multi .gallery-detail { margin-right: 110px; } @@ -175,21 +153,3 @@ html.simple-gallery-active { border-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } -.simple-gallery .natural-image { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 502; - overflow: auto; - background-color: #000; -} -.simple-gallery .natural-image img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; -} diff --git a/styles/gallery.scss b/styles/gallery.scss index 03e7b07..5aaecd4 100644 --- a/styles/gallery.scss +++ b/styles/gallery.scss @@ -71,30 +71,6 @@ html.simple-gallery-active { display: block; } - .zoom-in { - position: absolute; - padding: 0 8px; - color: #fff; - font-size: 15px; - line-height: 26px; - text-decoration: none; - border-radius: 4px; - background-color: #999; - 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; - } - } - - &.multi .gallery-detail { margin-right: 110px; } .gallery-detail { @@ -198,25 +174,5 @@ html.simple-gallery-active { } } } - - .natural-image { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 502; - overflow: auto; - background-color: #000; - - img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - } } From 89d3c1f7952ca594325d2e458445ba6361ac6539 Mon Sep 17 00:00:00 2001 From: ZhangRui Date: Mon, 25 Jan 2016 16:52:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 6c75f42..9872638 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simple-gallery", - "version": "2.2.3", + "version": "2.2.4", "homepage": "https://github.com/mycolorway/simple-gallery", "authors": [ "kshift " diff --git a/package.json b/package.json index 426e443..e52847b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-gallery", - "version": "2.2.3", + "version": "2.2.4", "description": "a simple gallery widget based on Simple Module", "repository": { "type": "git",