jQuery炫酷气泡缩略图幻灯片画廊插件

这是一款使用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 menu
openPhotoAlbums();
                

jQuery和css代码请参考下载文件。