基于 jQuery支持移动触摸设备的Lightbox插件
Swipebox是一款支持桌面、移動(dòng)觸摸手機(jī)和平板電腦的jquery Lightbox插件。該lightbox插件支持手機(jī)的觸摸手勢(shì)，支持桌面電腦的鍵盤導(dǎo)航，并且支持視頻的播放。
在線預(yù)覽???源碼下載
簡要教程
Swipebox是一款支持桌面、移動(dòng)觸摸手機(jī)和平板電腦的jQuery?Lightbox插件。Swipebox的特點(diǎn)有：
- 支持手機(jī)的觸摸手勢(shì)
- 支持桌面電腦的鍵盤導(dǎo)航
- 通過jQuery回調(diào)提提供CSS過渡效果
- Retina支持UI圖標(biāo)
- CSS樣式容易定制
使用方法
首先在<body>標(biāo)簽之前或<header>標(biāo)簽中引入jquery和swipebox js文件。
<script src="lib/jquery-2.0.3.js"></script> <script src="src/js/jquery.swipebox.js"></script>在<header>標(biāo)簽中引入swipebox.css文件。
<link rel="stylesheet" href="src/css/swipebox.css">HTML結(jié)構(gòu)
為超鏈接標(biāo)簽使用指定的class，使用title屬性來指定圖片的標(biāo)題：
<a href="big/image.jpg" class="swipebox" title="My Caption"><img src="small/image.jpg" alt="image"> </a>調(diào)用插件
通過.swipebox選擇器來綁定該lightbox的swipebox事件：
<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox();} )( jQuery ); </script>高級(jí)配置
畫廊
你可以在超鏈接標(biāo)簽中添加一個(gè)rel屬性來分割畫廊圖片
<!-- Gallery 1 --> <a rel="gallery-1" href="big/image1.jpg" class="swipebox"><img src="small/image1.jpg" alt="image"> </a> <a rel="gallery-1" href="big/image2.jpg" class="swipebox"><img src="small/image2.jpg" alt="image"> </a> <!-- Gallery 2 --> <a rel="gallery-2" href="big/image3.jpg" class="swipebox"><img src="small/image3.jpg" alt="image"> </a> <a rel="gallery-2" href="big/image4.jpg" class="swipebox"><img src="small/image4.jpg" alt="image"> </a>視頻支持
你可以將一個(gè)youtube或vimeo的視頻URL放到href屬性中，該lightbox插件會(huì)自動(dòng)檢測(cè)它是否是youtube 或 vimeo的視頻，并用swipebox打開它。
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>動(dòng)態(tài)調(diào)用畫廊
你可以通過一個(gè)數(shù)組來動(dòng)態(tài)調(diào)用你的畫廊：
$( '#gallery' ).click( function( e ) {e.preventDefault();$.swipebox( [{ href:'big/image1.jpg', title:'My Caption' }, { href:'big/image2.jpg', title:'My Second Caption' }] ); } );檢測(cè)狀態(tài)
if ( $.swipebox.isOpen ) {// do stuff }可用參數(shù)
<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox( {useCSS : true, // false will force the use of jQuery for animationsuseSVG : true, // false to force the use of png for buttonsinitialIndexOnArray : 0, // which image index to init when a array is passedhideCloseButtonOnMobile : false, // true will hide the close button on mobile deviceshideBarsDelay : 3000, // delay before hiding bars on desktopvideoMaxWidth : 1140, // videos max widthbeforeOpen: function() {}, // called before openingafterOpen: null, // called after openingafterClose: function() {} // called after closingloopAtEnd: false // true will return to the first image after the last image is reached} );} )( jQuery ); </script>- useCSS：設(shè)置為false將強(qiáng)制lightbox使用jQuery來動(dòng)畫。
- useSVG：設(shè)置為flase將lightbox使用png來制作按鈕。
- initialIndexOnArray：當(dāng)lightbox使用數(shù)組時(shí)使用該參數(shù)來設(shè)置下標(biāo)。
- hideCloseButtonOnMobile：設(shè)置為true時(shí)lightbox將在移動(dòng)設(shè)備上隱藏關(guān)閉按鈕。
- hideBarsDelay：lightbox在桌面設(shè)備上隱藏信息條的延時(shí)時(shí)間。
- videoMaxWidth：lightbox視頻的最大寬度。
- beforeOpen：lightbox打開前的回調(diào)函數(shù)。
- afterOpen：lightbox打開后的回調(diào)函數(shù)。
- afterClose：lightbox關(guān)閉后的回調(diào)函數(shù)。
- loopAtEnd：設(shè)置為true時(shí)lightbox將在播放到最后一張圖片時(shí)接著返回第一張圖片播放。
瀏覽器兼容
Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.
via：http://***/Article/21873
轉(zhuǎn)載于:https://www.cnblogs.com/liaohuolin/p/4287829.html
總結(jié)
以上是生活随笔為你收集整理的基于 jQuery支持移动触摸设备的Lightbox插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java builder pool_每周
- 下一篇： jdbc获取结果行数_java – 如何