Portfolio Image Navigation with jQuery 圖片套件

Portfolio Image Navigation with jQuery 可以組合多張圖片呈現一個圖片地圖，再以上下左右平滑的移動到要看的圖片內容中，可以以分組方式排成一列來區別，在可以以 2D 方式導覽當前的圖片位置上下左右的平滑移動。範例中美麗的圖片是由 Angelo González 所攝影，可以在 Flickr 查看他的作品或者是在 Twitter 搜尋 @ag2r 找到他的作品。

使用方法：
第一步 載入 Portfolio Image Navigation 需要用到的 JavaScript 和 CSS 檔案
<!-- 重新設定瀏覽器的預設值-->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Portfolio Image Navigation 的主程式碼 -->
<script src="js/portfolio.js" type="text/javascript"></script>


第二步 使用 HTML 排列出圖片地圖列表
<h1>Portfolio Image Navigation</h1>
<div id="portfolio">
  <div id="background"></div>
  <div class="arrows">
    <a href="#" class="up">Up</a>
    <a href="#" class="down">Down</a>
    <a href="#" class="prev">Previous</a>
    <a href="#" class="next">Next</a>
  </div>
  <div class="gallery">
    <div class="inside">
 <div class="item">
        <div><img src="images/1.jpg" alt="image1" /></div>
        <div><img src="images/2.jpg" alt="image2" /></div>
        <div><img src="images/3.jpg" alt="image3" /></div>
 </div>
 <div class="item">
        <div><img src="images/4.jpg" alt="image4" /></div>
        <div><img src="images/5.jpg" alt="image5" /></div>
 </div>
 <div class="item">
        <div><img src="images/6.jpg" alt="image6" /></div>
        <div><img src="images/7.jpg" alt="image7" /></div>
        <div><img src="images/8.jpg" alt="image8" /></div>
        <div><img src="images/9.jpg" alt="image9" /></div>
        <div><img src="images/10.jpg" alt="image10" /></div>
        <div><img src="images/11.jpg" alt="image11" /></div>
 </div>
 <div class="item">
        <div><img src="images/12.jpg" alt="image12" /></div>
        <div><img src="images/13.jpg" alt="image13" /></div>
        <div><img src="images/14.jpg" alt="image14" /></div>
        <div><img src="images/15.jpg" alt="image15" /></div>
 </div>
    </div>
  </div>
</div>

第三步 設計圖片排列的 CSS 樣式
body {
background:#191919;
font-family:'PT Sans Narrow', Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
line-height:18px;
}
#portfolio {
position:fixed;
top:50%;
left:50%;
z-index:1;
width:1000px;
height:500px;
margin:-250px 0 0 -500px;
}#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background:url(../images/bg.png) no-repeat center;
}#portfolio .gallery,
#portfolio .gallery .inside {
position:absolute;
top:0;
left:0;
}
#portfolio .gallery {
width:100%;
height:100%;
overflow:hidden;
}
#portfolio .gallery .inside {
z-index:1;
}
#portfolio .arrows a {
position:absolute;
z-index:3;
width:32px;
height:32px;
background-image:url(../images/arrows.png);
background-repeat:no-repeat;
outline:none;
text-indent:-9999px;
}
#portfolio .arrows .prev,
#portfolio .arrows .up {
display:none;
}
#portfolio .arrows .up,
#portfolio .arrows .down {
left:50%;
margin-left:-16px;
}
#portfolio .arrows .prev,
#portfolio .arrows .next {
top:180px;
}
#portfolio .arrows .up {
background-position:0 -64px;
top:20px;
}
#portfolio .arrows .down {
background-position:0 -96px;
bottom:120px;
}
#portfolio .arrows .prev {
background-position:0 -32px;
left:60px;
}
#portfolio .arrows .next {
background-position:0 0;
right:60px;
}
#portfolio .arrows .up:hover {
background-position:-32px -64px;
}
#portfolio .arrows .down:hover {
background-position:-32px -96px;
}
#portfolio .arrows .next:hover {
background-position:-32px 0;
}
#portfolio .arrows .prev:hover {
background-position:-32px -32px;
}

#portfolio .item {
position:absolute;
top:0;
width:1000px;
height:400px;
}
#portfolio .item div {
position:absolute;
left:0;
width:100%;
height:100%;
}
#portfolio .item div img {
position:absolute;
top:0;
left:50%;
margin-left:-300px;
}
#portfolio .paths {
position:absolute;
bottom:60px;
left:50%;
margin-left:-30px;
z-index:4;
}
#portfolio .paths div {
position:absolute;
top:0;
}
#portfolio .paths a {
background:#333;
display:block;
position:absolute;
left:0;
outline:none;
}
#portfolio .paths a:hover,
#portfolio .paths .active {
background:#fff;
}
/* anchors */
a {
text-decoration:none;
color:#fff;
}/* heading */
h1{
font-size:22px;
text-shadow:1px 1px 1px #000;
position:relative;
z-index:1000;
color:#fff;
font-weight:normal;
padding:10px;
margin-top:10px;
text-transform:uppercase;
background:#000;
float:left;
}
/* header */
#header{
height:25px;
line-height:24px;
font-size:12px;
background:#000;
opacity:0.9;
text-transform:uppercase;
z-index:999;
position:relative;
}#header a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
text-align:right;
}#header a:hover{
color:#fff;
}#header a span{
font-weight:bold;
}#header span.right_ab{
position:absolute;
right:4px;
}

第四步 撰寫 JavaScript 讓 Portfolio Image Navigation 初始化
var o = {
init: function(){
this.portfolio.init();
},
portfolio: {
data: {
image: {
width: 600,  // 圖片展示的寬度
height: 400, // 圖片展示的高度
margin: 20  // 圖片展示與旁邊的距離
},
path: { // 縮小版地圖導覽的設定
width: 10,  // 寬度
height: 10, // 高度
marginTop: 5, // 與上面的距離
marginLeft: 5  // 與左邊的距離
},
animationSpeed: 400  // 切換圖片動畫的時間單位為毫秒
},
init: function(){
$('#portfolio').portfolio(o.portfolio.data);
}
}
}
$(function(){ o.init(); });

作者網站：http://tympanus.net/codrops/
檔案大小：556 KB (包含範例)
檔案下載：http://tympanus.net/Tutorials/PortfolioImageNavigation/PortfolioImageNavigation.zip?84cd58
檔案備份：下載