Micro Image Gallery 有限空間中展示多張圖片

by - 上午10:49

Micro Image Gallery 小型圖片展示櫃 A-Fu Design
Micro Image Gallery 小型圖片展示櫃
Micro Image Gallery 是一個用來解決有限的網頁頁面空間上展示多張圖片的一個 jQuery 框架套件。它可以將一組圖片轉換為一個微型的展示櫃，支援在網格視圖和單張圖片查看中互相進行切換。還有提供導航條可以隱藏和顯示，當滑鼠移到展示櫃上的時候，或者是一直在圖片上方顯示。在網格視圖中一次可以顯示九張小圖片，支援分頁顯示更多的圖片。網格視圖中的大小會根據所選中的圖片進行自動調整。

使用方法：
第一步 載入程式需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API  取得 jQuery 框架 1.8.2 min 版本 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Micro Image Gallery 的主程式碼 -->
<script type="text/javascript" src="jquery.microgallery.js"></script>

第二步 寫入範例的三個小圖片展示櫃
<div id="content">
  <div id="mG1" class="microGallery">
    <img src="Gallery1/1.JPG" alt=""/>
    <img src="Gallery1/2.JPG" alt=""/>
    <img src="Gallery1/3.JPG" alt=""/>
    <img src="Gallery1/4.JPG" alt=""/>
    <img src="Gallery1/5.JPG" alt=""/>
    <img src="Gallery1/6.JPG" alt=""/>
    <img src="Gallery1/7.JPG" alt=""/>
    <img src="Gallery1/8.JPG" alt=""/>
    <img src="Gallery1/9.JPG" alt=""/>
    <img src="Gallery1/10.JPG" alt=""/>
    <img src="Gallery1/11.JPG" alt=""/>
    <img src="Gallery1/12.JPG" alt=""/>
    <img src="Gallery1/13.JPG" alt=""/>
    <img src="Gallery1/14.JPG" alt=""/>
    <img src="Gallery1/15.JPG" alt=""/>
    <img src="Gallery1/16.JPG" alt=""/>
    <img src="Gallery1/17.JPG" alt=""/>
    <img src="Gallery1/18.JPG" alt=""/>
    <img src="Gallery1/19.JPG" alt=""/>
    <img src="Gallery1/20.JPG" alt=""/>
    <img src="Gallery1/21.JPG" alt=""/>
    <img src="Gallery1/22.JPG" alt=""/>
  </div>
  <div id="mG2" class="microGallery">
    <img src="Gallery2/1.JPG" alt=""/>
    <img src="Gallery2/2.JPG" alt=""/>
    <img src="Gallery2/3.JPG" alt=""/>
    <img src="Gallery2/4.JPG" alt=""/>
    <img src="Gallery2/5.JPG" alt=""/>
    <img src="Gallery2/6.JPG" alt=""/>
    <img src="Gallery2/7.JPG" alt=""/>
    <img src="Gallery2/8.JPG" alt=""/>
    <img src="Gallery2/9.JPG" alt=""/>
    <img src="Gallery2/10.JPG" alt=""/>
    <img src="Gallery2/11.JPG" alt=""/>
    <img src="Gallery2/12.JPG" alt=""/>
    <img src="Gallery2/13.JPG" alt=""/>
    <img src="Gallery2/14.JPG" alt=""/>
    <img src="Gallery2/15.JPG" alt=""/>
    <img src="Gallery2/16.JPG" alt=""/>
    <img src="Gallery2/17.JPG" alt=""/>
  </div>
  <div id="mG3" class="microGallery">
    <img src="Gallery3/1.JPG" alt=""/>
    <img src="Gallery3/2.JPG" alt=""/>
    <img src="Gallery3/3.JPG" alt=""/>
    <img src="Gallery3/4.JPG" alt=""/>
    <img src="Gallery3/5.JPG" alt=""/>
    <img src="Gallery3/6.JPG" alt=""/>
    <img src="Gallery3/7.JPG" alt=""/>
    <img src="Gallery3/8.JPG" alt=""/>
    <img src="Gallery3/9.JPG" alt=""/>
    <img src="Gallery3/10.JPG" alt=""/>
    <img src="Gallery3/11.JPG" alt=""/>
    <img src="Gallery3/12.JPG" alt=""/>
    <img src="Gallery3/13.JPG" alt=""/>
    <img src="Gallery3/14.JPG" alt=""/>
    <img src="Gallery3/15.JPG" alt=""/>
    <img src="Gallery3/16.JPG" alt=""/>
    <img src="Gallery3/17.JPG" alt=""/>
    <img src="Gallery3/18.JPG" alt=""/>
  </div>
</div>

第三步 寫入 CSS 樣式設計
.microGallery{
    position:relative;
    margin:30px 10px 10px 10px;
    float:left;
}
.microGallery img{
    margin-left:auto;
    margin-right:auto;
    border:none;
    -moz-box-shadow:0px 2px 4px #777;
    -webkit-box-shadow:0px 2px 4px #777;
    box-shadow:0px 2px 4px #777;
    display:none;
}
.nav{
    background-color:#f9f9f9;
    position:absolute;
    border:1px solid #fff;
    height:25px;
    top:-30px;
    left:5px;
    padding:3px;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.smallGallery .nav{
    width:105px;
}
.mediumGallery .nav{
    width:165px;
}
.largeGallery .nav{
    width:225px;
}
a.thumbview{
    opacity:0.6;
    width:20px;
    height:21px;
    float:left;
    cursor:pointer;
}
a.grid{
    background:transparent url(../images/thumbs.png) no-repeat top left;
}
a.single{
    background:transparent url(../images/single.png) no-repeat top left;
}
a.thumbview:hover{
    opacity:1.0;
}
button.prev,button.next{
    float:right;
    width:22px;
    height:20px;
    cursor:pointer;
    opacity:0.6;
    outline:none;
    border:none;
}
button::-moz-focus-inner { border: 0; }
button.prev:hover,button.next:hover{
    opacity:1.0;
}
.nav button.disabled{
    opacity:0.2;
}
.nav button.disabled:hover{
    opacity:0.2;
}
button.next{
    background:transparent url(../images/arrows.png) no-repeat top left;
}
button.prev{
    background:transparent url(../images/arrows.png) no-repeat 0px -20px;
}
.images div{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    position:relative;
}
.smallGallery .images,
.mediumGallery .images,
.largeGallery .images{
    padding:10px;
    background-color:#f9f9f9;
    border:1px solid #fff;
    position:relative;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.smallGallery .images,
.smallGallery .singleImg div{
    width:102px;
    height:102px;
}
.mediumGallery .images,
.mediumGallery .singleImg div{
    width:162px;
    height:162px;
}
.largeGallery .images,
.largeGallery .singleImg div{
    width:222px;
    height:222px;
}
.smallGallery .thumbs div,
.mediumGallery .thumbs div,
.largeGallery .thumbs div{
    float:left;
    margin:2px;
    cursor:pointer;
}
.smallGallery .thumbs div{
    width:30px;
    height:30px;
}
.mediumGallery .thumbs div{
    width:50px;
    height:50px;
}
.largeGallery .thumbs div{
    width:70px;
    height:70px;
}
*{
    margin:0;
    padding:0;
}
body{
    font-family:Georgia,Times,serif;
    padding:50px;
    background:#f0f0f0 url(title.png) no-repeat top left;
}
a.back{
    background:transparent url(back.png) no-repeat top left;
    position:fixed;
    width:150px;
    height:27px;
    outline:none;
    top:0px;
    right:0px;
}
#content{
    width:700px;
    height:450px;
    margin:120px auto 0px auto;
}

第四步 寫入使 Micro Image Gallery 動作的 JavaScript 程式片段
$(function() {
    $("#mG1").microgallery({
        menu:true,      // 是否自動隱藏導航條
        size:'small',     // 大小 small(102),medium(162),large(222)
        mode:'single'  // 初始化顯示 single(大圖),thumbs(縮圖)
    });
    $("#mG2").microgallery({
        menu:true,
        size:'medium',
        mode:'thumbs'
    });
    $("#mG3").microgallery({
        menu:false,
        size:'large',
        mode:'single'
    });
});
作者網站：http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/
檔案大小：379 KB (包含範例)
檔案下載：http://tympanus.net/Tutorials/MicroGallery/MicroGallery.zip
檔案備份：下載

Share
Tweet
Pin
Share
Tags : , , , , ,

You May Also Like

0 意見