點轉圓指令碼如何安裝

如何使用可以在現場放大影象的經典指令碼“Lightbox 2”

當點選縮圖影象（縮小影象）時，通常使用機制在現場顯示放大的影象而不顯示彈出視窗並移動頁面。“Lightbox 2”是響應於實現這些功能的典型指令碼。

既沒有頁面移動也沒有另一個視窗的彈出視窗，可以在現場顯示放大影象的代表指令碼是Lightbox 2

由於Lightbox 2的配置檔案也是由CDN伺服器分發的，如果您透過CDN與jQuery本身一起閱讀，您可以在不在網站上設定任何內容的情況下使用它。只需在HTML原始碼中編寫簡單的選項等，即可快速使用它。

如果要安裝的網頁被描述為響應，則Lightbox可以在智慧手機上使用放大的影象顯示功能而無需設定任何內容。但是，根據頁面的設計，可能會發生輕微的變化，並且需要定製。

所以這次，我將介紹Lightbox 2的簡易用法，寫作風格和定製方法。由於準備了兩個實際使用的顯示樣本頁面（稍後將對其進行描述），因此如果您在參考時閱讀評論，將很容易理解。

【本文內容】

簡介：Lightbox 2可以透過CDN讀取而無需安裝

準備：寫方法載入Lightbox 2和jQuery（只有3行）

用法：如何使用Lightbox 2放大影象

調整：自定義以消除燈箱2顯示的幀大小和位移

簡介：Lightbox 2可以透過CDN讀取而無需安裝

即使您在站點上使用Lightbox 2，也不需要在站點上設定Lightbox 2配置檔案（CSS，JavaScript等）。由於Lightbox 2操作所需的檔案也是透過CDN提供的，因此只要您編寫要載入的HTML原始碼，就可以在不準備任何內容的情況下使用它。儘管稍後將描述具體的書寫方法，但是可以在CDN站點上檢查用於閱讀的最新URL 。

Lightbox 2的配置檔案甚至可以從CDN伺服器讀取

■

如有必要，您可以在自己的站點中進行設定和使用您也可以

在下載後直接在站點中設定一套完整的Lightbox 2配置檔案。如果您想在未連線到Internet的本地環境中執行，或者您確實想要在您的站點上安裝它，請訪問官方Lightbox站點，然後單擊下圖中紅色圓圈和黃色箭頭指示的DOWNLOAD按鈕請。您可以獲得ZIP格式的Lightbox 2配置檔案的壓縮檔案。

Lightbox官方網站上還有一個按鈕，您可以下載完整的一套

但是，在您的網站上安裝這麼麻煩的工作並沒有什麼好處。透過CDN讀取速度更快，所以如果你沒有特殊原因，讓我們透過CDN載入它。在本文中，我們將向您展示如何透過CDN閱讀。

準備：寫方法載入Lightbox 2和jQuery（只有3行）

要閱讀Lightbox 2並使其可用，只需在HTML原始碼中寫入3行，如下所示。

<連結HREF = “https：//cdnjs。cloudflare。com/ajax/libs/lightbox2/2。7。1/css/lightbox。css” 的rel = “樣式表”>

在HTML的head元素中寫上面這三行，以此類推。各自的含義如下。

第1行：Lightbox 2的CSS（lightbox.css）

這是從CDN伺服器讀取Lightbox 2的樣式表的說明。

第二行：jQuery指令碼（jQuery的1.12.4.Min.Js）

Lightbox2的jQuery的 JavaScript的如此使用，必須閱讀Lightbox2的指令碼主體之前閱讀了jQuery。以上是從jQuery的CDN讀取jQuery Ver 1。12。4的描述。如果您已在站點中使用jQuery，則無需在此處載入jQuery。但是，請注意描述的順序，以便它可以在Lightbox 2本身之前載入。

第3行：Lightbox 2正文指令碼（lightbox.min.js）

這是從CDN伺服器讀取Lightbox 2的指令碼正文的描述。

■

在第1行到第3行

寫入

位置

以上所有3行都可以在HTML頭元素（）中寫入。在HTML語法中，連結元素只能寫在head元素中，因此第一行必須始終位於head元素中。但是，第二行和第三行中的指令碼元素可以寫在body元素中而不是head元素中。

讀取head元素中的每個檔案會增加顯示頁面的等待時間，因此只有第二行和第三行上的指令碼元素顯示在

body元素的末尾

（就在標記之前）建議對其進行描述。

用法：如何使用Lightbox 2放大影象

為了使用Lightbox 2放大在網頁上釋出的影象，請描述使影象連結如下的HTML源。

如上所述，將您自己的屬性新增到以“data - lightbox =”○○○“”形式建立連結的元素。然後，原本成為簡單影象連結的地方變為使用Lightbox 2的放大顯示連結。“○○○”部分是組名（稍後描述），並且可以描述任意字串。在上面，它是“abc”。以“data-”開頭的屬性稱為自定義資料屬性，是HTML 5的規範，可以新增具有自由名稱的屬性。

此外，如果您以“data-title =”◇◇◇◇“的形式新增屬性，如上所述，您可以指定要新增到放大影象的標題。以前的資料 - lightbox屬性是必需的，但data-title屬性是可選的選項處理。如果沒有必要，請省略。

在上面的HTML原始碼中，

縮圖（由img元素指定）是

sakura - thumbnail.jpg

，

縮圖的替代字元是“

櫻桃圖片

”

放大的影象（由元素指定）是

sakura.jpg

，

用作放大影象標題的字串是“

櫻桃照片放大

”

Lightbox的組名是“

abc

”

是的。任何數量的這一點都可以寫在一個頁面中。只有標題是可選的（可選），否則它是強制性的。

如果一個頁面中有多個影象，如果指定相同的組名稱（data-lightbox屬性值），則可以透過單擊左右箭頭圖示逐個瀏覽放大的影象就像。如果不需要該功能，請為每個影象指定不同的組名。

使用Lightbox指令碼在現場放大縮圖的示例

有關提供使用上述源放大影象的機制的示例，請參閱Lightbox示例第1頁。

■

備註：在舊規範中，使用rel屬性和title屬性的

舊Lightbox規範

使用

“rel =”○○○“而不是”data - lightbox =“○○○”“使用自定義資料屬性” “Title =”◇◇◇“”代替“data-title =”◇◇◇“”也使用了自定義資料屬性。

在閱讀Lightbox的舊解釋時，有時會按上述方式編寫。由於過去沒有自定義資料屬性的規範，我們編寫了這樣的方法，因為沒有辦法轉移上面提到的現有屬性。這些格式在當前版本中是有效的，但如果沒有特別的不便，讓我們使用data-lightbox屬性和data-title屬性，這就是HTML5的編寫方式。

調整：自定義以消除燈箱2顯示的幀大小和位移

順便說一下，當您使用Lightbox 2在現場放大影象時，放大的影象和輪廓可能會顯得不對齊。您可能還想自由調整放大影象和外框之間的距離。由Lightbox 2指令碼動態生成的放大影象的顯示框添加了屬性“id =”lightbox“”。因此，如果您使用此ID名稱編寫CSS，則可以覆蓋Lightbox的CSS

而無需直接重寫

Lightbox的CSS檔案。

■

CSS用於自定義放大影象周圍白色邊框的粗細

#lightbox 。lb-container {padding：

3px

；}

放大影象周圍的白色邊框定義為類名“lb-container”的邊距。如果您使用自己的CSS覆蓋此值，則可以自由更改厚度。如果您根本不想顯示白色邊框，則應為該值指定“0px”。由於它以6px厚度標準顯示，如果要將其減半，請將值設定為“3px”，如上所述。

■

新增自定義以解決放大影象和白色邊框線顯示不同時的偏差

#lightbox 。lb-container {padding：

0px

；}#lightbox 。lb-outerContainer {padding：

6px

；}

以上兩行是取消第一個“。lb-container”中的保證金金額調整的名稱，並用“。lb-outerContainer”設定保證金。雖然此處設定為6px，但您可以透過自由重寫此值來指定所需的邊距量。如果在顯示放大的影象時放大的影象本身和白色邊框線的顯示位置未對齊，請處理自定義以新增上述CSS源。

精簡自定義要新增到Lightbox 2指令碼中的放大影象的白色邊框的示例

如果您想在瀏覽器中使用上述來源實際檢查其邊際金額已調整的樣本，請檢視Lightbox示例第2頁。

易於安裝的方法和影象放大指令碼“燈箱2”的使用

這次，我們介紹瞭如何使用具有代表性的“Lightbox 2”作為在現場放大影象的響應對應指令碼。透過使用本文介紹的透過CDN讀取的方法，站點內部的安裝工作是不必要的，並且非常易於使用。請試一試。

另外，以下相關文章介紹了使用與Lightbox相同型別的其他指令碼的方法。請同時參考。