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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery炫酷气泡缩略图幻灯片画廊插件
jQuery炫酷气泡缩略图幻灯片画廊插件
分享:

    插件介绍

    这是一款效果非常炫酷的带气泡缩略图的jQuery幻灯片画廊插件。该幻灯片画廊插件在鼠标移动到气泡缩略图时会自动移动缩略图,点击缩略图后出现图片幻灯片,每次幻灯片切换还带有很酷的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-28
    阅读:

简要教程

这是一款使用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代码请参考下载文件。