Skip to content

Commit

Permalink
Merge pull request #8 from mycolorway/remove-zoom-in
Browse files Browse the repository at this point in the history 
删掉zoom-in相关代码
  • Loading branch information
Ken committed Jan 25, 2016
2 parents 2921bd1 + 89d3c1f commit 6ebc74c
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 281 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simple-gallery",
"version": "2.2.3",
"version": "2.2.4",
"homepage": "https://github.com/mycolorway/simple-gallery",
"authors": [
"kshift <[email protected]>"
Expand Down
117 changes: 12 additions & 105 deletions lib/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
};

Expand All @@ -68,7 +66,7 @@ Gallery = (function(superClass) {
};

Gallery.prototype._render = function() {
Gallery._tpl.gallery = "<div class=\"simple-gallery loading\">\n <a class=\"zoom-in\" href=\"javascript:;\" title=\"" + (this._t('zoomin_image')) + "\">\n " + (this._t('zoomin_image')) + "\n </a>\n <div class=\"gallery-img\">\n <img src=\"\" />\n <div class=\"loading-indicator\"></div>\n </div>\n <div class=\"gallery-detail hide\">\n <span class=\"name\"></span>\n <div class=\"gallery-control\">\n <a class=\"turn-right\" href=\"javascript:;\" title=\"" + (this._t('rotate_image')) + "\">\n <i class=\"icon-rotate\"><span>" + (this._t('rotate_image')) + "</span></i>\n </a>\n <a class=\"link-download\" href=\"\" title=\"" + (this._t('download_image')) + "\" target=\"_blank\">\n <i class=\"icon-download\"><span>" + (this._t('download_image')) + "</span></i>\n </a>\n <a class=\"link-show-origin\" href=\"\" title=\"" + (this._t('view_full_size')) + "\" target=\"_blank\">\n <i class=\"icon-external-link\"><span>" + (this._t('view_full_size')) + "</span></i>\n </a>\n </div>\n </div>\n</div>";
Gallery._tpl.gallery = "<div class=\"simple-gallery loading\">\n <div class=\"gallery-img\">\n <img src=\"\" />\n <div class=\"loading-indicator\"></div>\n </div>\n <div class=\"gallery-detail hide\">\n <span class=\"name\"></span>\n <div class=\"gallery-control\">\n <a class=\"turn-right\" href=\"javascript:;\" title=\"" + (this._t('rotate_image')) + "\">\n <i class=\"icon-rotate\"><span>" + (this._t('rotate_image')) + "</span></i>\n </a>\n <a class=\"link-download\" href=\"\" title=\"" + (this._t('download_image')) + "\" target=\"_blank\">\n <i class=\"icon-download\"><span>" + (this._t('download_image')) + "</span></i>\n </a>\n <a class=\"link-show-origin\" href=\"\" title=\"" + (this._t('view_full_size')) + "\" target=\"_blank\">\n <i class=\"icon-external-link\"><span>" + (this._t('view_full_size')) + "</span></i>\n </a>\n </div>\n </div>\n</div>";
$('html').addClass('simple-gallery-active');
this.rotatedegrees = 0;
this.curThumb = this.opts.el;
Expand All @@ -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');
Expand All @@ -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() {
Expand All @@ -119,20 +114,15 @@ 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();
return _this._rotate();
};
})(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();
Expand All @@ -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() {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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');
Expand All @@ -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));
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
Expand Down Expand Up @@ -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('<div class="natural-image"></div>').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();
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
Loading

0 comments on commit 6ebc74c

Please sign in to comment.