这是一款使用jQuery制作的炫酷带气泡缩略图的幻灯片画廊插件。插件中使用到的气泡缩略图滚动效果是来自于Manos Malihu，你可以在这里找到该插件： Manos Malihu’s thumbnail scroller 。
HTML
顶部导航的html代码：
<div class="top_menu" id="top_menu"> <span id="description" class="description"></span> <a id="back" href="#" class="back"><span></span>back</a> <div class="info"> <span class="album_info">Album 1</span> <span class="image_info"> / Shot 1</span> </div></div> |
插件中需要一个导航按钮能从幻灯片状态返回到缩略图状态，还需要一些描述信息。这些都放在顶部导航条中，当从幻灯片状态返回是，该导航条隐藏。
我们还需要一个loader元素：
<div id="loader" class="loader"></div> |
所有的缩略图将使用一个包裹容器来放置，给包裹容器id为thumbnails_wrapper和一个class为thumbnails_wrapper。为了集成Manos的缩略图滚动插件，我们的html结构必须是多重滚动结构：一个class为tshf_container的div代表一行缩略图。demo中注释掉了第二和第三行缩略图。
<div id="thumbnails_wrapper" class="thumbnails_wrapper" style="top:-255px;"> <!-- top:110px to show--> <div id="tshf_container1" class="tshf_container"> <div class="thumbScroller"> <div class="container"> <div class="content"> <div> <a href="#"> <img src="images/albums/album1/thumbs/1.jpg" alt="Description" class="thumb" /> </a> <span></span> </div> </div> <div class="content"> ... </div> </div> </div> </div> <div id="tshf_container2" class="tshf_container"> ... </div> <div id="tshf_container3" class="tshf_container"> ... </div></div> |
在上面的Html结构中,空的span是被用来遮罩图片，使图片形成气泡形状。
点击缩略图的时候会出现一个黄色的圆形气泡，它的html代码如下：
<div class="bubble"> <img id="bubble" src="images/bubble.png" alt=""/></div> |
幻灯片画廊的前后导航按钮的html代码如下：
<div id="preview" class="preview"> <a id="prev_image" href="#" class="prev_image"></a> <a id="next_image" href="#" class="next_image"></a></div> |
JAVASCRIPT
调用方法：首先引入js文件
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script> |
定义一些必要的参数
var $thumbnails_wrapper = $('#thumbnails_wrapper'), $thumbs = $thumbnails_wrapper.find('.tshf_container').find('.content'), $top_menu = $('#top_menu'), $header = $('#header'), $bubble = $('#bubble'), $loader = $('#loader'), $preview = $('#preview'), $thumb_images = $thumbnails_wrapper.find('img'), total_thumbs = $thumb_images.length, $next_img = $('#next_image'), $prev_img = $('#prev_image'), $back = $('#back'), $description = $('#description'), //current album and current photo //(indexes of the tshf_container and content elements) currentAlbum = -1, currentPhoto = -1; |
一开始先显示Loader元素,直到所有的缩略图加载完毕，才开始调用幻灯片画廊插件：
$loader.show();//shows the main menu and thumbs menuopenPhotoAlbums(); |
jQuery和css代码请参考下载文件。
