                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS插件開發之LightBox圖片畫廊(上)

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>

</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 />

<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">

</div>

<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>

<!--彈出層

</div>

</div>

</div> -->

$(function(){

var lightbox = new LightBox({"width":500,"height":300});

})

</script>

</body>

</html>

插門胡的小背心

2015-08-14

源自：JS插件開發之LightBox圖片畫廊(上)

關注問題我要回答

989

操作

收起

舉報

0/150

提交

取消

JS插件開發之LightBox圖片畫廊(上)

參與學習 27070 人
解答問題 87 個

圖片畫廊插件開發綜合演練，快來加入我們的課程吧

進入課程

本課相似問答

1 回答無法獲取圖片尺寸？

2 回答delegate 方法第二個屬性那個參數前面加的是*號嗎？是css 屬性選擇器嗎？

1 回答索引獲取不到

2 回答關于獲取節點對象

3 回答怎么在對象上掛那么多屬性？

搜索更多本課相關問答

IE8下無法獲取 caption 屬性

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

IE8下無法獲取 caption 屬性

本課相似問答

IE8下無法獲取 caption 屬性