LightBox plugin使用心得

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

毋庸置疑, LightBox plugin很強大。

本人在開發CRM系統的時候用到了這個外掛程式，這裡分享下本人的應用心得。

一、lightbox2

官網：http://www.lokeshdhakar.com/projects/lightbox2/

1、匯入：在<head>標籤內加如下代碼：

很明顯，這裡用的是prototype。

2、關聯

①添加 rel="lightbox" 屬性應用到任何連結標記

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

②條件關聯

　　$(function() {

　　　　$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel

　　　　$('#gallery a').lightBox(); 　　　　// Select all links in object with gallery ID

　　　　$('a.lightbox').lightBox(); 　　　　// Select all links with lightbox class

　　　　$('a').lightBox(); 　　　　// Select all links in the page

});

</script>

③群組關聯

<a href="images/image-1.jpg" rel="lightbox[lightgroup]" title="my caption">image #1</a>

將rel設定為"lightbox[lightgroup]", lightgroup為群組名稱，可自訂，這樣，所有rel="lightbox[lightgroup]"的連結就成了一個群組，點擊其中一個連結就會有上一頁、下一頁的顯示，如果有的話。

3、顯示大小控制

Lightbox預設會按圖片的實際大小來顯示，但有時候圖片會很大，從而出現捲軸，顯得不大友好。我的處理辦法是設定一個最大寬度，和一個最大高度。

思路：如果圖片實際寬度大於最大寬度按最大寬度顯示，高度等比縮小，

　　　如果圖片實際高度大於最大高度按最大高度顯示，寬度等比縮小。

實現步驟，改造lightbox.js：

步驟一：

在LightboxOptions = Object.extend({}, window.LightboxOptions || {});中加兩個擴充參數：maxWidth: 800,maxHeight: 800(大小自己定)

步驟二：

將changeImage: function (imageNum) {}函數中的imgPreloader.onload = (function () {})改造成：

imgPreloader.onload = (function () {

this.lightboxImage.src = this.imageArray[this.activeImage][0];

var imgWidth = imgPreloader.width;

var imgHeight = imgPreloader.height;

//如果圖片實際寬度大於最大寬度按最大寬度顯示，高度等比縮小

if (imgWidth > LightboxOptions.maxWidth) {

var ratio = LightboxOptions.maxWidth / imgWidth;

imgHeight = imgHeight * ratio;

imgWidth = LightboxOptions.maxWidth;

}

//如果圖片實際高度大於最大高度按最大高度顯示，寬度等比縮小

if (imgHeight > LightboxOptions.maxHeight) {

var ratio = LightboxOptions.maxHeight / imgHeight;

imgWidth = imgWidth * ratio;

imgHeight = LightboxOptions.maxHeight;

}

this.lightboxImage.width = imgWidth;

this.lightboxImage.height = imgHeight;

this.resizeImageContainer(imgWidth, imgHeight);

}).bind(this);

步驟三：容易忽略的地方：

把lightbox.css中的

#lightbox img{ width: auto; height: auto;}

樣式去掉

簡單三步對圖片實現限制，不至於太難看。優點不用多說了，但缺點也是顯而易見的：那就是這個限制寫在了JS中，對所有用到了lightbox的地方都起作用，不夠靈活。主要是本人對prototype庫不熟悉所致。下面就講講我熟悉的JQuery版的lightbox。

二、jquery-lightbox-0.5

官網：http://leandrovieira.com/projects/jquery/lightbox/

1、匯入：在<head>標籤內加如下代碼：

2、關聯方法同lightbox2

3、擴充：

參考：http://www.cnblogs.com/intcry/archive/2010/10/15/2014554.html

jQuery lightBox外掛程式有一些配置，你可以定義調用它。

在該配置中，您可以定製您的jQuery lightBox外掛程式。

$(function() {

　$('#gallery a').lightBox({

overlayBgColor:"#fff",//設定顯示背景

　　　　 fixedNavigation:false,//是否顯示下一頁跟上一頁的標籤

　　　　//imageLoading:'images/lightbox-ico-loading.gif',//設定下載圖片

　　　　//imageBtnPrev:'images/lightbox-btn-prev.gif',//設定上一頁按鈕的圖片地址

　　　　 //imageBtnNext:'images/lightbox-btn-next.gif',//設定下一頁按鈕的圖片地址

　　　　//imageBtnClose:'images/lightbox-btn-close.gif',//設定關閉按鈕的圖片地址

　　　　 //imageBlank:'images/lightbox-blank.gif',//設定空白的圖片地址

　　　　containerBorderSize:10,//設定顯示圖片邊框的寬度

　　　　 containerResizeSpeed:2000,//設定顯示圖片的時間

　　　　 txtImage:"圖片:",//定義介紹的文字

　　　　txtOf:"/",//定義頁數中間的字元

　　　　 keyToClose:"s",//設定關閉圖片的快速鍵

　　　　 keyToPrev:"a",//設定上一頁的快速鍵

　　　　 keyToNext:"d",//設定下一頁的快速鍵

　　　　 //imageArray:"",

　　　　 activeImage:0,//設定動態顯示圖片，要用到easing外掛程式

　　　　 easing:"easeOutElastic",

　　　　overlayOpacity:0.7//設定背景的透明度

maxWidth: 800, //最大寬度，自訂，將在下面用到

　　　　　 maxHeight: 800 //最大高度，同上

　　 });

4、圖片大小顯示控制

第一步：拿JS開刀

找到_resize_container_image_box函數，改之。

function _resize_container_image_box(intImageWidth, intImageHeight) {

var newWidth = intImageWidth;

var newHeight = intImageHeight;

if (newWidth > settings.maxWidth) {

var ratio = settings.maxWidth / newWidth;

newHeight = newHeight * ratio;

newWidth = settings.maxWidth;

}

if (newHeight > settings.maxHeight) {

var ratio = settings.maxHeight / newHeight;

newWidth = newWidth * ratio;

newHeight = settings.maxHeight;

}

intImageWidth = newWidth;

intImageHeight = newHeight;

var intCurrentWidth = $('#lightbox-container-image-box').width();

var intCurrentHeight = $('#lightbox-container-image-box').height();

var intWidth = (intImageWidth + (settings.containerBorderSize * 2));

var intHeight = (intImageHeight + (settings.containerBorderSize * 2));

var intDiffW = intCurrentWidth - intWidth;

var intDiffH = intCurrentHeight - intHeight;

$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight }, settings.containerResizeSpeed, function () { _show_image(); });

if ((intDiffW == 0) && (intDiffH == 0)) {

if ($.browser.msie) {

___pause(250);

} else {

___pause(100);

}

$('#lightbox-container-image-data-box').css({ width: intImageWidth + (settings.containerBorderSize * 2) });

$('#lightbox-image').css({ width: intImageWidth, height: intImageHeight });

$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });

};

第二步，在頁面中加限制：

$(function () {

$('#gallery a').lightBox({ maxWidth:500,maxHeight:500});//設定最大寬度和最大高度，數值任你定

});

或者在JS中加限制：在settings = jQuery.extend({/*預定義*/}, settings

);在加兩參數maxWidth:500,maxHeight:500，這方法的弊端就不多講了。

以上是我這次用lightbox的心得，歡迎高手指正。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

LightBox plugin使用心得

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support