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代碼請參考下載文件。
總結
以上是生活随笔為你收集整理的html幻灯片气泡,jQuery炫酷气泡缩略图幻灯片画廊插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Win 10 终于干趴了 Win 7
- 下一篇: adam算法效果差原因_冷库制冷效果差原