imgZoom.js
6.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
var $=require("jquery");
+function($){
'use strict';
function ImgZoom(element,options){
this.$element = $(element);
if(!options){
this.options = this.getDefaults();
}else{
this.options = $.extend(true,this.getDefaults(),options);
}
this.init();
};
ImgZoom.DEFAULTS = {
isContainFather: false,
overlay: true,
template:'<div class="imgZoom" onselectstart="return false" unselecttable="on">'+
'<img src="" />'+
'<a href="javascript:;" class="close"></a>'+
'<a href="javascript:;" class="guideBtn prev"></a>'+
'<a href="javascript:;" class="guideBtn next"></a>'+
'</div>'+
'<div class="overlay"></div>',
imgSrcAttr:'data-original'
};
ImgZoom.prototype.getDefaults = function () {
return ImgZoom.DEFAULTS
};
//初始化
ImgZoom.prototype.init = function(){
this.overlay = this.options.overlay;
var $template = $('.imgZoom,.overlay');
this.$template = !!$template.size() ? $template : ($(this.options.template).appendTo("body"));//Dom对象
this.$box = this.$template.filter('.imgZoom');//相册对象
this.$overlayObj = this.$template.filter('.overlay');//遮罩对象
this.$btnPrev = this.$template.find('.guideBtn.prev');//上一张按钮
this.$btnNext = this.$template.find('.guideBtn.next');//下一张按钮
this.$btnClose = this.$template.find('.close');//关闭按钮
this.currentObj = 'currentPhoto';//当前图片的标识类
this.event();
if(this.options.isContainFather){
this.$element.find('['+this.options.imgSrcAttr+']').eq(0).trigger('click.imgzoom');
}
};
//事件绑定集合
ImgZoom.prototype.event = function(){
var _this = this;
this.btnClick();
this.photoClick();
this.$overlayObj.on('click',function(){
_this.close();
});
};
//左右按钮点击事件
ImgZoom.prototype.btnClick = function(){
var _this = this;
this.$btnPrev.off('click');
this.$btnNext.off('click');
this.$btnPrev.on("click",function(){
var that = _this.$template.data('target');
that.photoSwitch(that.$element.find('['+_this.options.imgSrcAttr+']').index(that.$element.find("."+that.currentObj)),"left");
});
this.$btnNext.on("click",function(){
var that = _this.$template.data('target');
that.photoSwitch(that.$element.find('['+_this.options.imgSrcAttr+']').index(that.$element.find("."+that.currentObj)),"right");
//console.log(_this.$element);
});
};
//图片点击事件
ImgZoom.prototype.photoClick = function(){
var _this = this;
this.$element.on("click.imgzoom",'['+_this.options.imgSrcAttr+']',function(){
_this.$element.find("."+_this.currentObj).removeClass(_this.currentObj);
$(this).addClass(_this.currentObj);
_this.$template.data('target', _this);
_this.photoEfficiency();
});
};
//图片左右切换事件
ImgZoom.prototype.photoSwitch = function(index,direction){
this.$element.find("."+this.currentObj).removeClass(this.currentObj);
if(direction=="left"){
var _index = index - 1;
}else{
var _index = index + 1;
}
this.$element.find("["+this.options.imgSrcAttr+"]:eq("+_index+")").addClass(this.currentObj);
this.photoEfficiency();
};
//检测首尾状态
ImgZoom.prototype.getArrowState = function(){
if(this.$element.find('['+this.options.imgSrcAttr+']').index(this.$element.find("."+this.currentObj))==0){
this.$btnPrev.hide();
}else{
this.$btnPrev.show();
}
if(this.$element.find('['+this.options.imgSrcAttr+']').index(this.$element.find("."+this.currentObj))==this.$element.find('['+this.options.imgSrcAttr+']').size()-1){
this.$btnNext.hide();
}else{
this.$btnNext.show();
}
};
//图片显示效果
ImgZoom.prototype.photoEfficiency = function(){
var _this = this;
var hiddenImg = $('<img src="'+_this.$element.find("."+this.currentObj).attr(this.options.imgSrcAttr)+'">').appendTo("body").css({"position":"fixed",'left':'-9999px','top':'-9999px'});
this.loadImg(hiddenImg.attr("src"), function(){
_this.$box.find("img").remove().end().prepend(hiddenImg.removeAttr("style"));
if(!_this.$box.hasClass("show")){
_this.open();
}
if(!_this.$box.hasClass("complete")){
_this.$box.addClass("complete")
}
_this.$box.css("margin-top",-_this.$box.outerHeight()/2);
_this.$box.css("margin-left",-_this.$box.outerWidth()/2);
})
_this.getArrowState();
};
ImgZoom.prototype.loadImg = function(src, callback){
var img = new Image();
if($.browser.msie){
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
callback.call(img);//将回调函数的this替换为Image对象
img = null;
}
}
}else{
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
img = null;
};
}
img.src = src;
};
//打开事件
ImgZoom.prototype.open = function(){
this.$box.addClass("show");
if(this.options.overlay){
this.$overlayObj.fadeIn(100);
}
};
//关闭事件
ImgZoom.prototype.close = function(){
this.$box.removeClass("show complete");
if(this.options.overlay){
this.$overlayObj.fadeOut(100);
}
};
//组件封装处理
function Plugin(option,object){
this.each(function(){
var $this = $(this),
data = $this.data('hc.ImgZoom'),
options = typeof option == 'object' && option;
if(!data){
$this.data('hc.ImgZoom',(data = new ImgZoom($this,options)));
}
if(typeof option =='string'){
data[option](object);
}
return $this;
});
};
var old = $.fn.ImgZoom;
$.fn.ImgZoom = Plugin;
$.fn.ImgZoom.Constructor = ImgZoom;
$.fn.ImgZoom.noConflict = function () {
$.fn.ImgZoom = old;
return this;
};
}($);