1. 引入 CSS 和 JS 文件
<link type="text/css" rel="stylesheet" href="css/galleryview.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>
2. 定义一系列的 div 和 li 用于显示图像以及对应的缩略图
<div id="photos" class="galleryview">
<!-- 这里是要显示的图像,可以定义多个 div -->
<div class="panel">
<img src="img/01.jpg" />
</div>
<ul class="filmstrip">
<!-- 这里要显示的是缩略图,可以定义多个 li,个数与之前的 div 对应 -->
<li>
<img src="img/frame-01.jpg" />
</li>
</ul>
</div>
3. 编写脚本
<script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ panel_width: 1000, panel_height: 750, frame_width: 154, frame_height: 115 }); }); </script>
事实上,这里的脚本编写定义了一些初始参数,关于 GalleryView 的详细参数请参考下图。
4. 效果预览
5. Demo 下载
附件 demo,欢迎下载。
-------------------------------------------------
Stay Hungry, Stay Foolish!
Afa
May 13rd, 2010
-------------------------------------------------