一款簡單實用的jQuery圖片畫廊插件

圖片畫廊

今天分享一個自己實現的jQuery 圖片畫廊插件。

看一下效果圖：

點擊圖片時：

在線演示地址：http://www.jr93.top/photoGallery/photoGallery.html

使用

使用也是很簡單，代碼如下：

<div id="photoGallery-container">
    <img class="photoGallery" data-src="img/1-1.jpg" src="img/1-1.jpg" data-id="pic_1" data-desc="圖片1">
    <img class="photoGallery" data-src="img/1-2.jpg" src="img/1-2.jpg" data-id="pic_2" data-desc="圖片2">
    <img class="photoGallery" data-src="img/1-3.jpg" src="img/1-3.jpg" data-id="pic_3" data-desc="圖片3">
    <img class="photoGallery" data-src="img/1-4.jpg" src="img/1-4.jpg" data-id="pic_4" data-desc="圖片4">
    <img class="photoGallery" data-src="img/1-5.jpg" src="img/1-5.jpg" data-id="pic_5" data-desc="圖片5">
    <img class="photoGallery" data-src="img/1-6.jpg" src="img/1-6.jpg" data-id="pic_6" data-desc="圖片6">
    <img class="photoGallery" data-src="img/1-7.jpg" src="img/1-7.jpg" data-id="pic_7" data-desc="圖片7">
    <img class="photoGallery" data-src="img/1-8.jpg" src="img/1-8.jpg" data-id="pic_8" data-desc="圖片8">
</div>

其中id為photoGallery-container的容器內存放自己想要展示的圖片組，每個img都有一個.photoGallery的類和三個自定義的data-屬性，分別是：

.photoGallery ： 定義縮略圖的樣式，標識此圖片是展示圖片之一

data-src : 定義縮略圖對應大圖的路徑

data-id : 定義圖片的id

data-desc : 定義圖片的描述

所以，這要滿足以上四個很簡單的條件，那么就能很輕松的使用了（PS：IE6不兼容）

github下載地址：https://github.com/JR93/photoGallery

 

若需轉載，請注明出處，謝謝！