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

这是一款使用jQuery制作的炫酷带气泡缩略图的幻灯片画廊插件。插件中使用到的气泡缩略图滚动效果是来自于Manos Malihu，你可以在这里找到该插件：Manos Malihu’s thumbnail scroller。

插件中使用的精美图片来自于花瓣。

HTML

顶部导航的html代码：

back

Album 1

/ Shot 1

插件中需要一个导航按钮能从幻灯片状态返回到缩略图状态，还需要一些描述信息。这些都放在顶部导航条中，当从幻灯片状态返回是，该导航条隐藏。

我们还需要一个loader元素：

所有的缩略图将使用一个包裹容器来放置，给包裹容器id为thumbnails_wrapper和一个class为thumbnails_wrapper。为了集成Manos的缩略图滚动插件，我们的html结构必须是多重滚动结构：一个class为tshf_container的div代表一行缩略图。demo中注释掉了第二和第三行缩略图。

...

...

...

在上面的Html结构中,空的span是被用来遮罩图片，使图片形成气泡形状。

点击缩略图的时候会出现一个黄色的圆形气泡，它的html代码如下：

幻灯片画廊的前后导航按钮的html代码如下：

JAVASCRIPT

调用方法：首先引入js文件

定义一些必要的参数

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代码请参考下载文件。