jQuery Lightbox效果插件Boxer
演示:http://www.jq22.com/yanshi1139
下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy
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 | 加载时的初始宽度 |
jQuery Lightbox效果插件Boxer的更多相关文章
- 20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...
- 95+强悍的jQuery图形效果插件
现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...
- jquery 动画效果插件
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- FancyBox – 经典 Lightbox 效果插件
效果演示 插件下载
- jquery 滚动效果插件
1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...
- 6款 jQuery Lightbox图片查看触控插件
偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来. 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www.dowebok.com/214.html ...
- 12款响应式 Lightbox(灯箱)效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 选择29部分有用jQuery应用程序插件(免费点数下载)
免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...
随机推荐
- vue 与jq 的对比
vue.react和angular,众所周知,他们是前端框架的3个大佬.这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细. 我算是独自用vue写过一个小型项 ...
- Python3 小工具-ARP欺骗
在kali中使用 from scapy.all import * import optparse import os def send(pkt,interface): for p in pkt: se ...
- 给你的WP应用加上帮助文档
背景 这算是Windows Phone编程回顾续篇, 接着给大家聊WP开发经验. 在开发了数个WP应用并发布后, 陆续收到很多反馈邮件, 其中接近一半的邮件是在问"某某功能有没有?" ...
- 20145214 《Java程序设计》第1周学习总结
20145214 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 了解了Java的诞生和版本演进的历史,目前的最新版本是Java SE8. java的三大平台分别是Java ...
- iOS- 利用UIImageView自己整了个不会说话的汤姆猫
1.实现思路 先说说我实现它的主要思路,很简单,主要利用UIImageView连续动画播放,和按钮的点击事件,就可以完成了这么一个简单的不会说话的汤姆猫. 2.实现细节 2.1.加载本地字典里保存的本 ...
- DVD与CD区别
经常听朋友说什么DVD什么CD什么的,不知道到底有什么区别,专门百度找了下,找到以下资料 ======================================================= ...
- MongoDB、ElasticSearch、Redis、HBase这四种热门数据库的优缺点及应用场景
MongoDB MongoDB是当今最火爆的NoSQL数据库.MongoDB最早在09年发布,算得上是早期大数据时代的数据库代表作了.随着MongoDB的火爆,研发MongoDB的团队还专门成立了Mo ...
- [剑指Offer] 66.机器人的运动范围
题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...
- HUAS 1483 mex(离线+线段树)
实在是太弱了.... 考虑离线,从mex[l,r]向mex[l,r+1]转移,显然是没啥东西可以记录的... 从mex[l,r]向mex[l+1,r]转移,记x=mex[l,r],如果[l+1,r]不 ...
- 【bzoj1507】[NOI2003]Editor /【bzoj1269】[AHOI2006]文本编辑器editor Splay
[bzoj1507][NOI2003]Editor 题目描述 输入 输入文件editor.in的第一行是指令条数t,以下是需要执行的t个操作.其中: 为了使输入文件便于阅读,Insert操作的字符串中 ...