根據當前組別獲取頁面中所有相同組別的對象這一步卡住了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lightbox開發</title>
<link rel="stylesheet" href="css/lightbox.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<h1>1組圖片</h1>
<div>
<img?
data-role="lightbox"?
data-source="images/1-1.jpg"?
src="images/1-1.jpg"?
data-group="group-1"
data-id="jiushi"
data-caption="俄羅斯"
width="100" height="100" alt="">
<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-2.jpg" data-group="group-1" data-id="dfadfa" data-caption="俄羅qerewqr斯" width="100" height="100" alt="">
<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-3.jpg" data-group="group-1" data-id="qerewqr" data-caption="eqrewr" width="100" height="100" alt="">
</div>
<h1>2組圖片</h1>
<div>
<img?
data-role="lightbox"?
data-source="images/1-1.jpg"?
src="images/1-4.jpg"?
data-group="group-2"
data-id="jiushi"
data-caption="俄羅斯"
width="100" height="100" alt="">
<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-5.jpg" data-group="group-2" data-id="dfadfa" data-caption="俄羅qerewqr斯" width="100" height="100" alt="">
<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-6.jpg" data-group="group-2" data-id="qerewqr" data-caption="eqrewr" width="100" height="100" alt="">
</div>
<!-- 遮罩 -->
<!-- <div id="G-lightbox-mask"></div> -->
<!-- 彈出層 -->
<!-- <div id="G-lightbox-popup">
<div>
<span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>
<img src="images/2-2.jpg" alt="" width="100%">
<span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>
</div>
<div>
<div>
<p>圖片標題</p>
<span>當前索引：1 of 4</span>
</div>
<span></span>
</div>
</div> -->
<script type="text/javascript">
$(function(){
var lightbox = new LightBox();
})
</script>
</body>
</html>
2017-03-14
;(function($){
var LightBox = function(){
var self=this;
//創建遮罩和彈出框
this.popupMask = $('<div id="G-lightbox-mask">');
this.popupWin = $('<div id="G-lightbox-popup">');
//保存body
this.bodyNode = $(document.body);
//渲染DOM插入body
this.readerDOM();
//準備開發事件委托，獲取組數據
this.groupName = null;
this.groupData = [];
this.bodyNode.delegate('.js-lightbox,*[data-role=lightbox]', 'click', function(e) {
//阻止事件冒泡，不觸發到父標簽
e.stopPropagation();
var currentGroupName = $(this).attr("data-group");
alert(currentGroupName);
if(currentGroupName!=self.groupName){
self.groupName = currentGroupName;
//獲取一組數據根據當前組名
self.getGroup();
}
});
};
LightBox.prototype={
getGroup:function(){
var self = this;
//根據當前組別獲取頁面中所有相同組別的對象
var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");
alert(groupList);
}
readerDOM:function(){
var strDOM = '<div class="lightbox-pic-view">'+
'<span class="lightbox-btn lightbox-prev-btn"></span>'+
'<img class="lightbox-image" src="images/2-2.jpg" alt="" width="100%">'+
'<span class="lightbox-btn lightbox-next-btn"></span>'+
'</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>'+
'<span class="lightbox-close-btn"></span>'+
'</div>';
this.popupWin.html(strDOM);
this.bodyNode.append(this.popupMask,this.popupWin);
}
};
window["LightBox"]=LightBox;
})(jQuery);