基于 jQuery支持移动触摸设备的Lightbox插件
生活随笔
收集整理的這篇文章主要介紹了
基于 jQuery支持移动触摸设备的Lightbox插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Swipebox是一款支持桌面、移動觸摸手機和平板電腦的jquery Lightbox插件。該lightbox插件支持手機的觸摸手勢，支持桌面電腦的鍵盤導航，并且支持視頻的播放。
在線預覽???源碼下載
簡要教程
Swipebox是一款支持桌面、移動觸摸手機和平板電腦的jQuery?Lightbox插件。Swipebox的特點有：
- 支持手機的觸摸手勢
- 支持桌面電腦的鍵盤導航
- 通過jQuery回調提提供CSS過渡效果
- Retina支持UI圖標
- CSS樣式容易定制
使用方法
首先在<body>標簽之前或<header>標簽中引入jquery和swipebox js文件。
<script src="lib/jquery-2.0.3.js"></script> <script src="src/js/jquery.swipebox.js"></script>在<header>標簽中引入swipebox.css文件。
<link rel="stylesheet" href="src/css/swipebox.css">HTML結構
為超鏈接標簽使用指定的class，使用title屬性來指定圖片的標題：
<a href="big/image.jpg" class="swipebox" title="My Caption"><img src="small/image.jpg" alt="image"> </a>調用插件
通過.swipebox選擇器來綁定該lightbox的swipebox事件：
<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox();} )( jQuery ); </script>高級配置
畫廊
你可以在超鏈接標簽中添加一個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>視頻支持
你可以將一個youtube或vimeo的視頻URL放到href屬性中，該lightbox插件會自動檢測它是否是youtube 或 vimeo的視頻，并用swipebox打開它。
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>動態調用畫廊
你可以通過一個數組來動態調用你的畫廊：
$( '#gallery' ).click( function( e ) {e.preventDefault();$.swipebox( [{ href:'big/image1.jpg', title:'My Caption' }, { href:'big/image2.jpg', title:'My Second Caption' }] ); } );檢測狀態
if ( $.swipebox.isOpen ) {// do stuff }可用參數
<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：設置為false將強制lightbox使用jQuery來動畫。
- useSVG：設置為flase將lightbox使用png來制作按鈕。
- initialIndexOnArray：當lightbox使用數組時使用該參數來設置下標。
- hideCloseButtonOnMobile：設置為true時lightbox將在移動設備上隱藏關閉按鈕。
- hideBarsDelay：lightbox在桌面設備上隱藏信息條的延時時間。
- videoMaxWidth：lightbox視頻的最大寬度。
- beforeOpen：lightbox打開前的回調函數。
- afterOpen：lightbox打開后的回調函數。
- afterClose：lightbox關閉后的回調函數。
- loopAtEnd：設置為true時lightbox將在播放到最后一張圖片時接著返回第一張圖片播放。
瀏覽器兼容
Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.
via：http://***/Article/21873
轉載于:https://www.cnblogs.com/liaohuolin/p/4287829.html
總結
以上是生活随笔為你收集整理的基于 jQuery支持移动触摸设备的Lightbox插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java builder pool_每周
- 下一篇： php 数独求解,高效算法求解数独(示例