IE8下无法获取 caption 属性
this.captionText.text(this.groupData[this.index].caption);
无法获取未定义或 null 引用的属性“caption”，如果把 this.index 直接改成数字的话，就可以通过了，但是按上面这样来的话就会出问题
完整 js：
;(function($){
var LightBox = function(options){
var self = this;
this.defaults = {
width:800, //幻灯片的宽度
height:400 //幻灯片的高度
};
this.options = $.extend({}, this.defaults, options)
//console.log(self);
//创建遮罩和弹出框
this.popupMask = $('<div id="lightbox-mask">');
this.popupWin = $('<div id="lightbox-popup">');
//保存body
this.bodyNode = $(document.body);
//渲染剩余的DOM，并且插入到body
this.renderDOM();
this.closeBtn = this.popupMask.find('span.lightbox-close-btn'); //关闭按钮
this.nextBtn = this.popupMask.find('span.lightbox-next-btn');
this.prevBtn = this.popupMask.find('span.lightbox-prev-btn');
this.picViewArea = this.popupWin.find('div.lightbox-pic-view'); //图片预览区域
this.popupPic = this.popupWin.find('img.lightbox-img'); //图片
this.picCaptionArea = this.popupWin.find('div.lightbox-pic-caption'); //图片描述区域
this.captionText = this.popupWin.find('p.lightbox-pic-desc'); //图片描述
this.currentIndex = this.popupWin.find('span.lightbox-of-index');//图片当前索引
//准备开发事件委托，获取组数据
this.groupName = null;
this.groupData = []; //放置同一组数据
this.bodyNode.on('click', '.js-lightbox, *[data-role=lightbox]', function(e){
e.stopPropagation();
var currentGroupName = $(this).attr('data-group');
if (currentGroupName != self.groupName) {
self.groupName = currentGroupName;
//根据当前组名获取同一组数据
self.getGroup();
}
//初始化弹窗
self.initPopup($(this));
});
//关闭弹窗
this.popupMask.click(function(){
$(this).fadeOut();
self.popupWin.fadeOut();
self.clear = false;
});
this.closeBtn.click(function(){
self.popupMask.fadeOut();
self.popupWin.fadeOut();
self.clear = false;
});
//绑定下上切换按钮事件
this.flag = true;
this.nextBtn.click(function(e){
if (self.flag){
self.flag = false;
e.stopPropagation();
self.goTo('next');
};
});
this.prevBtn.click(function(e){
if (self.flag){
self.flag = false;
e.stopPropagation();
self.goTo('prev');
};
});
//绑定窗口调整事件
var timer = null;
this.clear = false;
$(window).resize(function(){
if (self.clear){
window.clearTimeout(timer);
timer = window.setTimeout(function(){
self.loadPicSize(self.groupData[self.index].src);
},500);
};
}).keyup(function(e){
var keyValue = e.which;
if (keyValue == 38 || keyValue == 37){
self.prevBtn.click();
}else if (keyValue == 40 || keyValue == 39){
self.nextBtn.click();
};
});
};
LightBox.prototype = {
goTo:function(dir){
if (dir === 'next'){
this.index++;
if (this.index >= this.groupData.length-1){
this.nextBtn.addClass('hide');
};
if (this.index != 0){
this.prevBtn.removeClass('hide');
};
var src = this.groupData[this.index].src;
this.loadPicSize(src);
}else if (dir === 'prev') {
this.index--;
if (this.index <= 0){
this.prevBtn.addClass('hide');
};
if (this.index !=this.groupData.length-1){
this.nextBtn.removeClass('hide');
};
var src = this.groupData[this.index].src;
this.loadPicSize(src);
};
},
loadPicSize:function(sourceSrc){
var self = this;
self.popupPic.css({
width:self.options.width,
height:self.options.height
});
this.picCaptionArea.hide();
this.preLoadImg(sourceSrc, function(){
self.popupPic.attr('src',sourceSrc);
var picWidth = self.popupPic.width(),
picHeight = self.popupPic.height();
self.changePic(picWidth, picHeight);
});
},
changePic:function(width, height){
var self = this,
winWidth = $(window).width(),
winHeight = $(window).height();
//this.popupWin.css({left:winWidth*2});
//如果图片的宽高大于浏览器视口的宽高比例，我就看下是否溢出
var scale = Math.min(winWidth/width, winHeight/height, 1);
width = width*scale;
height = height*scale;
this.popupWin.animate({
width:width,
height:height,
marginLeft:-(width/2),
top:(winHeight-height)/2
},1,function(){
self.picViewArea.css({
width:width,
height:height
});
self.popupPic.css({
width:width,
height:height
}).fadeIn(100);
self.picCaptionArea.show();
self.flag = true;
self.clear = true;
});
//设置描述文字和当前索引
this.captionText.text(this.groupData[this.index].caption);
//console.log(this.groupData[0].caption)
this.currentIndex.text('当前索引：'+ (this.index + 1)+ ' of ' + this.groupData.length);
},
preLoadImg:function(src,callback){
var img = new Image();
if (window.ActiveXObject) {
img.onreadystatechange = function(){
if (this.readyState == 'complete') {
callback();
};
};
}else {
img.onload = function(){
callback();
};
};
img.src = src;
},
showMaskAndPopup:function(sourceSrc, currentId){
var self = this;
this.popupPic.hide();
this.picCaptionArea.hide();
this.popupMask.show();
self.loadPicSize(sourceSrc);
//根据当前点击的元素ID获取在当前组别里面的索引
this.index = this.getIndexOf(currentId);
var groupDataLength = this.groupData.length;
if (groupDataLength>1) {
if (this.index === 0) {
this.prevBtn.addClass('hide');
this.nextBtn.removeClass('hide');
}else if ( this.index === groupDataLength-1) {
this.prevBtn.removeClass('hide');
this.nextBtn.addClass('hide');
}else {
this.prevBtn.removeClass('hide');
this.nextBtn.removeClass('hide');
}
};
this.popupWin.show();
},
getIndexOf:function(currentId){
var index = 0;
$(this.groupData).each(function(i){
index = i;
if (this.id === currentId) {
return false;
};
});
return index;
},
initPopup:function(currentObj){
var self = this,
sourceSrc = currentObj.attr('data-source'),
currentId = currentObj.attr('data-id');
this.showMaskAndPopup(sourceSrc, currentId);
},
getGroup:function(){
var self = this;
//根据当前组别获取页面中所有相同组别的对象
var groupList = this.bodyNode.find('*[data-group=' + this.groupName + ']')
//console.log(groupList);
//清空数组数据
self.groupData.length = 0;
groupList.each(function(){
self.groupData.push({
src:$(this).attr('data-source'),
id:$(this).attr('data-id'),
caption:$(this).attr('data-caption')
});
});
//console.log(self.groupData);
},
renderDOM:function(){
var strDom01 = '<span class="lightbox-close-btn"></span>' +
'<span class="lightbox-btn lightbox-prev-btn"><img src="img/prev.png"></span>' +
'<span class="lightbox-btn lightbox-next-btn"><img src="img/next.png"></span>';
var strDom02 = '<div class="lightbox-pic-view">' +
'<img class="lightbox-img" src="img/2-2.jpg">' +
'</div>' +
'<div class="lightbox-pic-caption">' +
'<div class="lightbox-caption-area">' +
'<p class="lightbox-pic-desc"></p>' +
'<span class="lightbox-of-index">当前索引：0 of 0</span>' +
'</div>' +
'</div>';
//插入到 this.popupMask this.popupWin
this.popupMask.html(strDom01)
this.popupWin.html(strDom02);
//把遮罩和弹出框插入到body
this.bodyNode.append(this.popupMask, this.popupWin);
}
};
window['LightBox'] = LightBox;
})(jQuery);
完整 css ：
#lightbox-mask {display: none; position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;opacity: .8;filter:alpha(opacity=80);z-index: 10000;}
#lightbox-mask .lightbox-btn {position: absolute;width: 100px;height: 100px;top: 50%;margin-top: -50px; cursor: pointer;text-align: center;}
#lightbox-mask .lightbox-btn img {margin-top: 25px;}
#lightbox-mask .lightbox-prev-btn {left: 20px;}
#lightbox-mask .lightbox-prev-btn img {margin-right: 20px;}
#lightbox-mask .lightbox-next-btn {right: 20px;}
#lightbox-mask .lightbox-next-btn img {margin-left: 20px;}
#lightbox-mask .lightbox-close-btn {position: absolute;right: 10px;top: 13px;width: 27px;height: 27px;background: url(../img/close.png) no-repeat center center;cursor: pointer;}
#lightbox-popup {display: none; position: fixed;left: 50%;top: 50px;z-index: 10001;}
#lightbox-popup .lightbox-pic-view {position: relative;overflow: hidden;}
#lightbox-popup .lightbox-pic-view .lightbox-img {display: block;}
#lightbox-popup .lightbox-pic-caption {position: relative;z-index: 2;margin-top: -56px;background-color: rgba(0,0,0,.5);filter:alpha(opacity=50);}
#lightbox-popup .lightbox-pic-caption .lightbox-caption-area {padding: 10px 5px;color: #fff;}
#lightbox-popup .lightbox-pic-caption .lightbox-of-index {color: #999;}
完整 html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/lightBox.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/lightBox.js" ></script>
</head>
<body>
class="js-lighbox" 表示这个元素要启用lightbox <br />
data-role="lightbox" 表示这个元素要启用lightbox <br />
data-source="img/1-1.jpg" 原图的地址 <br />
data-group="group01" 标识当前是否属于一个组别 <br />
data-id="sfsfsdf" 图片的唯一标识 <br />
data-caption="kljoanfkag" 当前图片的描述文字 <br />
<h1>1组图片</h1>
<div>
<img class="js-lighbox"
data-role="lightbox"
data-source="img/1-1.jpg"
data-group="group01"
data-id="sfsfsdf"
data-caption="kljoanfkag"
src="img/1-1.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/1-2.jpg" data-group="group01" data-id="osgn" data-caption="452452" src="img/1-2.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/1-3.jpg" data-group="group01" data-id="osgkjsg" data-caption="rgg82" src="img/1-3.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/3-1.jpg" data-group="group01" data-id="dfdg" data-caption="452452" src="img/3-1.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/2-2.jpg" data-group="group01" data-id="ujfg" data-caption="rgg82" src="img/2-2.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/2-3.jpg" data-group="group01" data-id="ggg" data-caption="452452" src="img/2-3.jpg" width="100" height="100">
<img class="js-lighbox" data-role="lightbox" data-source="img/2-4.jpg" data-group="group01" data-id="kdfgb" data-caption="rgg82" src="img/2-4.jpg" width="100" height="100">
</div>
<h1>2组图片</h1>
<div>
<img class="js-lightbox"
data-role="lightbox"
data-source="img/2-1.jpg"
data-group="group02"
data-id="osgnkdng"
data-caption="gndoghlji"
src="img/2-1.jpg" width="100" height="100">
</div>
<!--遮罩
<div id="lightbox-mask">
<span class="lightbox-close-btn"></span>
<span class="lightbox-btn lightbox-prev-btn"><img src="img/prev.png"></span>
<span class="lightbox-btn lightbox-next-btn"><img src="img/next.png"></span>
</div>
<!--弹出层
<div id="lightbox-popup">
<div class="lightbox-pic-view">
<img class="lightbox-img" src="img/2-2.jpg">
</div>
<div class="lightbox-pic-caption">
<div class="lightbox-caption-area">
<p class="lightbox-pic-desc">图片标题</p>
<span class="lightbox-of-index">当前索引：1 of 4</span>
</div>
</div>
</div> -->
<script type="text/javascript">
$(function(){
var lightbox = new LightBox({"width":500,"height":300});
})
</script>
</body>
</html>
