漂亮的LightBox圖片畫廊外掛開發
今天給大家帶來的是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()就表示當前游標所在單詞支援跳轉