2. 程式人生 > >漂亮的LightBox圖片畫廊外掛開發

漂亮的LightBox圖片畫廊外掛開發

阿新 • • 發佈：2019-01-04

今天給大家帶來的是LightBox圖片畫廊外掛的實現方法，用jQuery製作出一款簡潔、漂亮的圖片畫廊，下面我們先看一下實現的效果：


功能點如下：

1.點選小圖片，彈出對應的大圖片

2.每次點選小圖或者點選切換按鈕切換圖片時，在載入圖片時會有載入動畫效果

3.每張大圖片出來時，從螢幕上方以動畫效果出來

4.載入時寬高各為螢幕寬高的一半，載入完成顯示的圖片大小為圖片實際大小（這個效果也比較好看，由小到大的動畫）

5.每張小圖片對應的大圖片尺寸不一，彈出的圖片顯示的高度和寬度也是變化的

6.滑鼠懸浮在圖片左側或者右側會有切換圖片，點選即可切換圖片

7.圖片下方有圖片描述和索引

8.點選黑色遮罩層即可關閉圖片，點選在圖片右下角的關閉按鈕也可關閉圖片

這是我們最終實現的效果圖，點選小圖片之後彈出的對應的大圖，中間有過渡動畫，效果非常好看。下面我們來看一下LightBox外掛的實現方法

一、首先我們要引入jQuery，我這裡用的是2.1.1版本的

<script src="js/jquery-2.1.1.js"></script>
二、引入好jQuery後，在我們顯示小圖片的地方加入以下HTML程式碼： 
<h1>第一組圖片</h1>
<div>
    <img data-role="lightbox" data-source="Images/1-1.jpg" data-group=
 
"group-1" data-id="1" data-caption="風景名畫" width="100" height="100" src="Images/1-1.jpg"/>
    <img data-role="lightbox" data-source="Images/1-2.jpg" data-group="group-1" data-id="2" data-caption="非常好看的圖片" width="100" height="100" src="Images/1-2.jpg"/>
    <img data-role="lightbox" data-source="Images/1-3.jpg" 
 
data-group="group-1" data-id="3" data-caption="風景圖鑑賞" width="100" height="100" src="Images/1-3.jpg"/>
    <img data-role="lightbox" data-source="Images/1-4.jpg" data-group="group-1" data-id="4" data-caption="名圖賞析" width="100" height="100" src="Images/1-4.jpg"/>
    <img data-role="lightbox" data-source="Images/1-5.jpg" data-group="group-1" data-id="5" data-caption="圖片之家" width="100" height="100" src="Images/1-5.jpg"/>
    <img data-role="lightbox" data-source="Images/1-6.jpg" data-group="group-1" data-id="6" data-caption="大家跟我來賞圖" width="100" height="100" src="Images/1-6.jpg"/>
</div>
<h1>第二組圖片</h1>
<div>
    <img data-role="lightbox" data-source="Images/2-1.jpg" data-group="group-2" data-id="1" data-caption="美圖" width="100" height="100" src="Images/2-1.jpg"/>
    <img data-role="lightbox" data-source="Images/2-2.jpg" data-group="group-2" data-id="2" data-caption="好圖看不停" width="100" height="100" src="Images/2-2.jpg"/>
    <img data-role="lightbox" data-source="Images/2-3.jpg" data-group="group-2" data-id="3" data-caption="美圖秀秀" width="100" height="100" src="Images/2-3.jpg"/>
    <img data-role="lightbox" data-source="Images/2-4.jpg" data-group="group-2" data-id="4" data-caption="世界超跑" width="100" height="100" src="Images/2-4.jpg"/>
    <img data-role="lightbox" data-source="Images/2-5.jpg" data-group="group-2" data-id="5" data-caption="豪車欣賞" width="100" height="100" src="Images/2-5.jpg"/>
    <img data-role="lightbox" data-source="Images/2-6.jpg" data-group="group-2" data-id="6" data-caption="世界名車" width="100" height="100" src="Images/2-6.jpg"/>
</div>
<h1>第三組圖片</h1>
<div>
    <img data-role="lightbox" data-source="Images/3-1.jpg" data-group="group-3" data-id="1" data-caption="美麗的花朵" width="100" height="100" src="Images/3-1.jpg"/>
    <img data-role="lightbox" data-source="Images/3-2.jpg" data-group="group-3" data-id="2" data-caption="蘋果logo" width="100" height="100" src="Images/3-2.jpg"/>
    <img data-role="lightbox" data-source="Images/3-3.jpg" data-group="group-3" data-id="3" data-caption="山澗小溪" width="100" height="100" src="Images/3-3.jpg"/>
    <img data-role="lightbox" data-source="Images/3-4.jpg" data-group="group-3" data-id="4" data-caption="破土而生" width="100" height="100" src="Images/3-4.jpg"/>
    <img data-role="lightbox" data-source="Images/3-5.jpg" data-group="group-3" data-id="5" data-caption="黃昏美景" width="100" height="100" src="Images/3-5.jpg"/>
    <img data-role="lightbox" data-source="Images/3-6.jpg" data-group="group-3" data-id="6" data-caption="美不勝收" width="100" height="100" src="Images/3-6.jpg"/>
</div>
這樣三組小圖片就在我們的頁面中建立好了，效果如下：


我們要實現點選小圖片，彈出對應的大圖片的效果，並且彈出的圖片水平垂直居中顯示。在img標籤中，我們定義了幾個自定義屬性，他們的作用如下：

data-role="lightbox"   表示這個元素要啟用lightbox
data-source=""         點開之後放大版圖片的地址
data-group=""          標示當前圖片的組別
data-id=""             圖片的唯一標示
data-caption=""        當前圖片的描述文字

三、CSS樣式

樣式我寫好了，粘在下面，大家直接拷過去放在css檔案裡用就好了

body,div,dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:after,a:before{content:'';}
abbr,acronym{border:0;}
body{font:12px/1.5 '微軟雅黑',tahoma,arial,'Hiragino Sans GB',宋體,sans-serif;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:'';clear:both;height:0;}
.clearfix{zoom:1;}
.text-ellipsis{white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}
#G-lightbox-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#000;opacity:.5;z-index:10000;display:none;}
#G-lightbox-popup{position:fixed;left:50%;top:0;z-index:10001;display:none;}
#G-lightbox-popup .lightbox-pic-view{position:relative;border:5px solid #fff;border-radius:3px;
overflow: hidden;
background:#fff url(../Images/loading.gif) no-repeat center center;
}
#G-lightbox-popup .lightbox-pic-view .lightbox-btn{position:absolute;top:0;width:40%;height:100%;z-index:1;}
#G-lightbox-popup .lightbox-pic-view .lightbox-prev-btn{left:0;}
#G-lightbox-popup .lightbox-pic-view .lightbox-next-btn{right:0;}
#G-lightbox-popup .lightbox-pic-view .lightbox-prev-btn-show{background:url(../Images/prev.png) no-repeat left center;}
#G-lightbox-popup .lightbox-pic-view .lightbox-next-btn-show{background:url(../Images/next.png) no-repeat right center;}
#G-lightbox-popup .lightbox-pic-view .lightbox-image{display:block;}
#G-lightbox-popup .lightbox-pic-caption{position:relative;margin:0 5px;margin-top:-60px;background:rgba(0,0,0,.5);}
#G-lightbox-popup .lightbox-pic-caption .lightbox-caption-area{color:#fff;padding:10px 5px;}
#G-lightbox-popup .lightbox-pic-caption .lightbox-caption-area .lightbox-of-index{color:#999;}
#G-lightbox-popup .lightbox-pic-caption .lightbox-close-btn{position:absolute;width:27px;height:27px;
background:url(../Images/close.png) no-repeat center center; 
right:10px;
top:13px;
z-index:2;
cursor:pointer;
}

四、開始LightBox外掛開發

我們先建立一個lightbox.js檔案，放在我們專案的js資料夾下，然後開啟lightbox.js檔案進行程式碼編寫。

JS程式碼部分如下：

(function($){
    var LightBox=function(){
        var self=this;
//建立遮罩和彈出框
this.popupMask=$('<div id="G-lightbox-mask"></div>');
this.popupWin=$('<div id="G-lightbox-popup"></div>');
//儲存BODY
this.bodyNode=$(document.body);
//渲染剩餘的DOM，並且插入到BODY
this.renderDOM();
this.picViewArea=this.popupWin.find("div.lightbox-pic-view");       //圖片預覽區域
this.popupPic     =this.popupWin.find("img.lightbox-image");               //圖片區域
this.picCaptionArea=this.popupWin.find("div.lightbox-pic-caption");     //圖片描述區域
this.nextBtn    =this.popupWin.find("span.lightbox-next-btn");
this.prevBtn    =this.popupWin.find("span.lightbox-prev-btn");
this.captionText=this.popupWin.find("p.lightbox-pic-desc");            //圖片描述
this.currentIndex=this.popupWin.find("span.lightbox-of-index");        //圖片索引
this.closeBtn   =this.popupWin.find("span.lightbox-close-btn");        //關閉按鈕
        //準備開發事件委託，獲取組資料，如果不委託給body，後續加載出來的圖片還要在繫結事件
this.groupName=null;
this.groupData=[];           //放置同一組資料
this.bodyNode.delegate("*[data-role=lightbox]","click",function(e){
            //阻止事件冒泡
self.stopBubble(e);
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();
});
this.closeBtn.click(function(){
            self.popupMask.fadeOut();
self.popupWin.fadeOut();
});
//繫結上下切換按鈕事件
this.nextBtn.hover(function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).addClass("lightbox-next-btn-show");
$(this).css("cursor","pointer")
            }
        },function(){
            $(this).removeClass("lightbox-next-btn-show");
}).click(function(e){
            if(!$(this).hasClass("disabled")){
                self.stopBubble(e);
self.goto("next");
}
        });
this.prevBtn.hover(function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).addClass("lightbox-prev-btn-show");
$(this).css("cursor","pointer")
            }
        },function(){
            $(this).removeClass("lightbox-prev-btn-show");
}).click(function(e){
            if(!$(this).hasClass("disabled")){
                self.stopBubble(e);
self.goto("prev");
}
        });
}
    LightBox.prototype.renderDOM= function(){
            var strDom='<div class="lightbox-pic-view">'+
            '<span class="lightbox-btn lightbox-prev-btn"></span>'+
            '<img class="lightbox-image" src=""/>'+
            '<span class="lightbox-btn lightbox-next-btn"></span>'+
            '</div>'+
            '<div class="lightbox-pic-caption">'+
            '<div class="lightbox-caption-area">'+
            '<p class="lightbox-pic-desc">ppppppp</p>'+
            '<span class="lightbox-of-index">當前索引：0 of 0</span>'+
            '</div>'+
            '<span class="lightbox-close-btn"></span>'+
            '</div>';
//插入到this.popupWin
this.popupWin.html(strDom);
//把遮罩和彈出框插入到body物件
this.bodyNode.append(this.popupMask,this.popupWin);
}
    LightBox.prototype.getGroup=function(){
        var self=this;
//每次都先清空陣列資料再獲取，要不會把獲取的資料追加到上一個組的資料後面
this.groupData=[];
//根據當前的組別名稱獲取頁面中所有相同組別的物件
var groupList=this.bodyNode.find("*[data-group="+this.groupName+"]");
groupList.each(function(){
            self.groupData.push({
                src:$(this).attr("data-source"),
id:$(this).attr("data-id"),
caption:$(this).attr("data-caption")
            });
});
}
    LightBox.prototype.initPopup=function(currentObj){
        var self      =  this,
sourceSrc  = currentObj.attr("data-source"),
currentId  =currentObj.attr("data-id");
this.showMaskAndPopup(sourceSrc,currentId);
}
    LightBox.prototype.showMaskAndPopup=function(sourceSrc,currentId){
        var self=this;
this.popupPic.hide();
this.picCaptionArea.hide();
this.popupMask.fadeIn();
var winWidth=$(window).width();
var winHeight=$(window).height();
this.picViewArea.css({
            "width":winWidth/2,
"height":winHeight/2
});
this.popupWin.fadeIn();
var viewHeight=winHeight/2+10;
this.popupWin.css({
            "width":winWidth/2+10,
"height":viewHeight,
"marginLeft":-(winWidth/2+10)/2,
"top":-viewHeight
        }).animate({
            "top":(winHeight-viewHeight)/2
},function(){
            //載入彈出的圖片
self.loadPicSize(sourceSrc);
});
//根據當前點選的元素id獲取在當前組別裡面的索引
this.index=this.getIndexOf(currentId);
//判斷是否顯示左右切換圖片的按鈕
var groupDataLength=this.groupData.length;
//如果組裡面只有一張圖片就不操作
if(groupDataLength>1){
            if(this.index===1){
                this.prevBtn.addClass("disabled");
this.nextBtn.removeClass("disabled");
}else if(this.index===groupDataLength){
                this.nextBtn.addClass("disabled");
this.prevBtn.removeClass("disabled");
}else{
                this.nextBtn.removeClass("disabled");
this.prevBtn.removeClass("disabled");
}
        }
    }
    LightBox.prototype.getIndexOf=function(currentId){
        var index=0;
$(this.groupData).each(function(){
            index++;
if(this.id===currentId){
                return false;       //當找到對應id時，退出each迴圈
}
        });
return index;
}
    LightBox.prototype.loadPicSize=function(sourceSrc){
        var self=this;
//每次載入圖片前，先設定寬高auto，否則下次載入的圖片跟上次寬高一樣
self.popupPic.css({"width":"auto","height":"auto"}).hide();
//預載入圖片方法
this.preLoadImg(sourceSrc,function(){
            self.popupPic.attr("src",sourceSrc);
var picWidth=self.popupPic.width();
var picHeight=self.popupPic.height();
self.changePic(picWidth,picHeight);
});
}
    //監控圖片是否載入完成,完成就執行回撥函式
LightBox.prototype.preLoadImg=function(src,callback){
        var img=new Image();
if(window.ActiveXObject){     //IE瀏覽器
img.onreadystatechange=function(){
                if(this.readyState=="complete"){
                    callback();
}
            }
        }else{                          //其他瀏覽器
img.onload=function(){
                callback();
}
        }
        img.src=src;
}
    LightBox.prototype.changePic=function(width,height){
        var self=this;
var winWidth=$(window).width();
var winHeight=$(window).height();
//如果圖片的寬高大於瀏覽器視口的寬高比，就要看下圖片是否溢位
var scale=Math.min(winWidth/(width+10),winHeight/(height+10),1);
width=width*scale;
height=height*scale;
this.picViewArea.animate({
            "width":width-10,
"height":height-10
});
this.popupWin.animate({
            "width":width,
"height":height,
"marginLeft":-(width/2),
"top":(winHeight-height)/2
},function(){
            self.popupPic.css({
                "width":width-10,
"height":height-10
}).fadeIn();
self.picCaptionArea.fadeIn();
});
//設定描述文字和當前索引
this.captionText.text(this.groupData[this.index-1].caption);
this.currentIndex.text("當前索引："+this.index+" of "+this.groupData.length);
}
    //上下切換圖片的方法
LightBox.prototype.goto=function(dir){
        if(dir==="next"){
            this.index++;
if(this.index>=this.groupData.length){
                this.nextBtn.addClass("disabled").removeClass("lightbox-next-btn-show");
}
            if(this.index!==1){
                this.prevBtn.removeClass("disabled");
}
        }else if(dir==="prev"){
            this.index--;
if(this.index===1){
                this.prevBtn.addClass("disabled").removeClass("lightbox-prev-btn-show");
}
            if(this.index<=this.
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
漂亮的LightBox圖片畫廊外掛開發

     
 
                
今天給大家帶來的是LightBox圖片畫廊外掛的實現方法，用jQuery製作出一款簡潔、漂亮的圖片畫廊，下面我們先看一下實現的效果：

功能點如下：
1.點選小圖片，彈出對應的大圖片
2.每次點選小圖或者點選切換按鈕切換圖片時，在載入圖片時會有載入動畫效果
3.每張大圖片出 



  
 

    


    
    
JS外掛開發之LightBox圖片畫廊

     
 
							
							
							工程目錄結構圖： 
 
lightBox.js封裝了寫好的外掛，直接匯入即可，這裡就不在詳細解釋程式碼了，主要介紹一下怎麼運用該外掛，下載地址：http://download.csdn.net/detail/u012612399/9373624 
如果要相容IE 



  
 

    


    
    
React共享單車後臺管理系統開發（記錄筆記4）——4.6 gallery圖片畫廊

     
  
 
  
  
 4.6 gallery圖片畫廊 
  
  實現類似照片牆的效果 
  
 
  
   文章目錄
   
    4.6 gallery圖片畫廊
    
     @[toc]
     
      map舉例
     
     一.Tabs元件
     二.例項一
     



  
 

    


    
    
實戰：在 sublime text3 中開發一個 markdown 圖片插入外掛

     
  
  
  
 常用的開發技巧 
 修改選單：  sublime有個很爽的事就是通過建立 .sublime-menu 檔案就可以修改選單。配置檔案需要根據要修改的選單型別來命名：  - Main.sublime-menu 控制了程式的主選單  - Side Bar.sublime-menu 控制側邊欄檔案或 



  
 

    


    
    
【jQuery】圖片燈箱外掛——lightBox

     
 
                

該外掛可以用圓角的方式展示選擇中的圖片，使用按鈕檢視上下張圖片，在載入圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，呼叫格式如下：

$(linkimage).lightBox({options})

其中linkimage引數為包含圖片的<a>元素名稱，o 



  
 

    


    
    
[劉陽Java]_CSS圖片畫廊

     
 .so   photo   ora   html   fault   com   view   思路   float   圖片畫廊也是一種比較經典的案例。本節文章主要簡單給大家介紹了CSS2實現圖片畫廊，采取的實現思路

ul放置圖片
li標簽裏面嵌套a標簽
a標簽裏面嵌套兩個圖片的標簽
通過簡單的偽類來實現 



  
 

    


    
    
微信jssdk圖片、語音開發記錄（二）

     
 後臺   pid   for   item   esc   音頻   locals   動態   clas   接著上篇說的，在使用jssdk之前，需要先驗簽，也就是獲取簽名，而獲取簽名就需要幾個參數，時間戳，隨機數，token等，而token一天的獲取次數是有限的，
所以需要在項目中保存獲取到的token， 



  
 

    


    
    
thinkphp5 不使用composer進行圖片驗證碼開發

     
 我們   容易   圖形   imp   request   com   如果   ext   圖形驗證碼   很多朋友可能不太會用composer，沒事，我第一次的時候也是這個想法，還不如直接把composer下載好的直接放到項目裏，都是等價的，不過我發現確實有比composer更容易的方法，下個tp5圖形 



  
 

    


    
    
phonegap3.4外掛開發入門例子

     
  
 
 根據官方文件（3.4.0）的外掛開發指南： 
 http://docs.phonegap.com/en/3.4.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide 
 http://docs.phonegap.com/e 



  
 

    


    
    
cropper圖片編輯外掛繪製圓形圖片

     
 實現 
在上傳圖片前需要對圖片進行編輯，我選用的是cropperjs外掛 
繪製圓圖的主要思路首先是將圖片選取框中的可見區域設定為圓形，再在上傳圖片時在原圖的基礎上通過JS選取出一個圓圖，再將選取的圓圖上傳到後臺介面 
 
 通過CSS設定cropper選取框的樣式為圓形 
 
.cropper-view-b 



  
 

    


    
    
openmediavault 4.1.3 外掛開發

     
  
 參考網址：https://forum.openmediavault....  
  建立應用GUI 建立應用目錄：/var/www/openmediavault/js/omv/module/admin/service/example 建立選單節點： Node.js ``` // require("js/ 



  
 

    


    
    
QGIS3和QGIS2外掛開發差異記錄

     
  
 
  
  
 qgis2外掛開發的入門級教程  http://www.qgistutorials.com/zh_TW/docs/building_a_python_plugin.html 
 仿造該教程在qgis3當中進行開發，會碰到許多坑。這裡簡單記錄一下。 
 1.  QGIS3 中，QFileD 



  
 

    


    
    
chrome外掛開發（二） 入門篇（content script

     
  
  
  
 分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
 
 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
 
 
          



  
 

    


    
    
VSCODE外掛開發：使用者輸入輸出

     
 閱讀這篇文章之前，假設你已經具有開發helloworld的外掛的能力。 
vscode.window 簡介 
vscode.window 負責當前啟用視窗的輸入輸出，比如展示資訊，和使用者輸入等功能都是用vscode.window實現 
程式碼輸出提示資訊 
簡單的輸出提示資訊 
使用vscode.windo 



  
 

    


    
    
VSCode外掛開發全攻略（七）WebView

     
 更多文章請戳VSCode外掛開發全攻略系列目錄導航。 
什麼是Webview 
大家都知道，整個VSCode編輯器就是一張大的網頁，其實，我們還可以在Visual Studio Code中建立完全自定義的、可以間接和nodejs通訊的特殊網頁（通過一個acquireVsCodeApi特殊方法），這個網頁就叫W 



  
 

    


    
    
Chrome瀏覽器外掛開發入門

     
  
  
  
 分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
 
 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
 
 
          



  
 

    


    
    
VSCode外掛開發全攻略（六）開發除錯技巧

     
  
 
 更多文章請戳VSCode外掛開發全攻略系列目錄導航。 
 前言 
 在介紹完一些比較簡單的內容點之後，我覺得有必要先和大家介紹一些開發中遇到的一些細節問題以及技巧，特別是後面一章節將要介紹WebView的知識，這個坑會比較多，避免大家走彎路。 
 開發方式 
 最理想的方式是準備雙顯示器，一個寫程式 



  
 

    


    
    
Pentaho Data Integration (Kettle) step外掛開發

     
  
 
 一，開發環境搭建 
  1，kettle原始碼  因為kettle開發文件支援有限，所以必須有一份原始碼備查。原始碼地址： https://github.com/pentaho/pentaho-kettle  選擇9.0版本，下載zip  kettle需要jd 



  
 

    


    
    
kettle 外掛開發以及常用的介面和物件

     
  
 
 1. kettle外掛開發的四個常用的介面介紹 
  1.1 轉換步驟外掛開發至少需要實現 四個介面： 
     1）StepMetaInterface:該介面主要是針對元資料的處理,載入xml檔案,校驗,主要針對一個步驟的定義基本 
       資料.在轉換開始之前,kettle會呼 



  
 

    


    
    
VSCode外掛開發全攻略（五）跳轉到定義、自動補全、懸停提示

     
 更多文章請戳VSCode外掛開發全攻略系列目錄導航。 
跳轉到定義 
跳轉到定義其實很簡單，通過vscode.languages.registerDefinitionProvider註冊一個provider，這個provider如果返回了new vscode.Location()就表示當前游標所在單詞支援跳轉