jQuery圖片組展示插件Galleria使用簡介
1、技術目標
掌握Galleria插件的基本操作
2、Galleria簡介
Galleria是一個jQuery插件，可用於展示多張圖片，操作也比較簡單，
展示效果也非常不錯，如圖：
提示：Galleria官網URL
http://galleria.aino.se/
3、設置Demo目錄結構並導入Galleria插件
3.1）創建測試文件夾Galleria
3.2）在Galleria下創建文件夾images，放需要展示的圖片：
1.jpg
2.jpg
3.jpg
4.jpg
3.3）在Galleria下創建文件夾js，js下放2個js文件：
jquery.js(版本v1.4.2)
galleria-1.2.4.min.js
3.4）在Galleria下放4個必須的Galleria插件所需文件
classic-loader.gif
classic-map.png
galleria.classic.css(該css中會用到以上兩張圖片)
galleria.classic.min.js
注意：以上文件本文已提供完整Demo下載
4、在Galleria下創建galleryDemo.html頁面，使用Galleria插件
注意：3.4中提到的文件需要和使用插件的頁面(galleryDemo.html)放到同一文件夾下，如要變換文件位置需要修改css等代碼
galleryDemo.html頁面代碼如下(關鍵部分已加入註釋)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galleria Demo</title>
<script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script>
<script type="text/javascript" src="js/galleria-1.2.4.min.js"></script>
<style type="text/css">
/* 圖片組樣式（Galleria插件默認配置） */
#contentImgs{background:#222;margin:0;}
#contentImgs{border-top:4px solid #000;}
.contentImgsClass{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
#contentImgs h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
#contentImgs p{margin:0 0 2px}
#contentImgs a {color:#22BCB9;text-decoration:none;}
#contentImgs .cred{margin-top:2px;font-size:11px;}
/* 展示的圖片高度(This rule is read by Galleria to define the gallery height) */
#galleria{height:320px;}
</style>
<script type="text/javascript">
$().ready(function(){
if($('#galleria')){
//加載Galleria插件
Galleria.loadTheme('galleria.classic.min.js');
$('#galleria').galleria();
}
});
</script>
</head>
<body>
<!-- 圖片展示所在DIV -->
<div id="contentImgs" class="contentImgsClass">
<!-- 設置標題文字 -->
<h1> 圖片組展示 </h1>
<div id="galleria">
<!-- 給圖片加入a標籤可以處理js事件 -->
<a href="javascript:alert('image1');">
<!-- title屬性中可以設置圖片說明 -->
<img title="圖1" alt="" src="images/1.jpg" />
</a>
<a href="javascript:alert('image2');">
<img title="圖2" alt="" src="images/2.jpg" />
</a>
<a href="javascript:alert('image3');">
<img title="圖3" alt="" src="images/3.jpg" />
</a>
<a href="javascript:alert('image4');">
<img title="圖4" alt="" src="images/4.jpg" />
</a>
</div>
<!-- 設置底部文字 -->
<p class="cred"></p>
</div>
</div>
</body>
</html>