jQuery Lightbox效果插件Boxer

拉丁傳說 2018-4-13 1245

Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于顯示圖片、視頻、iframe和其他內容,和其他Lightbox 效果插件一樣,Boxer 在顯示組圖的時候,有左右箭頭控制。Boxer 還能自動檢測設備是否為移動設備,針對移動設備顯示更適合的樣式和更友好的觸摸控制。

兼容性

瀏覽器兼容:simpleGal 兼容所有瀏覽器,包括 IE6。

jQuery 版本兼容:simpleGal 兼容 1.7 以上版本。

使用方法

以下介紹最基本的用法,更多用法請查看參數或演示。

1、引入文件

<link rel="stylesheet" href="css/jquery.fs.boxer.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fs.boxer.js"></script>

2、HTML

<a title="標題閃電閃電" href="images/1b.jpg">
?? ?<img src="http://www.dowebok.com/images/1s.jpg" alt="">
</a>

標簽 a 的屬性 title 用于顯示圖片的標題。

3、JavaScript

$('.boxer').boxer();

參數

參數 類型 默認值 說明
callback function 打開后的回調函數
customClass string 增加自定義 class
duration int 250 動畫持續時間
fixed boolean false 是否固定在瀏覽器中央(不顯示關滾動條)
formatter function 標題格式函數
height int 100 加載時的初始高度
labels.close string ‘Close’ 關閉按鈕的文字
labels.count string ‘of’ 組圖的文字
labels.next string ‘Next’ 下一個按鈕的文字
labels.previous string ‘Previous’ 上一個按鈕的文字
margin int 50 與瀏覽器視口的邊距
minHeight int 100 最小高度
minWidth int 100 最小寬度
mobile boolean false 是否強制使用移動模式顯示
opacity number 0.75 遮罩不透明度
retina boolean false 是否兼容 retina 高清顯示
requestKey string ‘boxer’ GET variable for ajax / iframe requests
top int 距離頂部位置
videoRadio number 0.5625 視頻的高度
videoWidth int 600 視頻的寬度
width int 100 加載時的初始寬度

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将