[awei研究室]《Lightbox》燈箱圖片顯示效果

2014.10.28 / 分類: awei研究室, JQUERY &CSS特效 / 0 則回應

標籤: Lightbox, 燈箱

燈箱效果（Lightbox）是網站中最常用的效果之一，可以讓瀏覽者的視覺暫時停留在置中的方框中。

旁邊的背景會做暗化處理,用以突顯中間圖文的效果

可作群組圖片展示.範例效果觀看

原始作者網頁Created by Lokesh Dhakar

使用方法

1.首先下載整個lightbox 壓縮檔 Download

解壓縮後可以發現到裡面dist資料夾內有三個資料夾CSS/JS/img 跟一個主要檔index.html

2.我們可以在我們的網頁<head></head>中間填入以便先呼叫這些檔案
<link rel=”stylesheet” href=”css/screen.css” media=”screen”/>
<link rel=”stylesheet” href=”css/lightbox.css” media=”screen”/>

3.再來就可以套用在妳的頁面了

如果要呈現單張效果

<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a>

如果要群組多張效果

<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>

範例效果觀看