演示: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的更多相关文章

  1. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  2. 95+强悍的jQuery图形效果插件

    现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...

  3. jquery 动画效果插件

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  4. FancyBox – 经典 Lightbox 效果插件

    效果演示    插件下载

  5. jquery 滚动效果插件

    1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...

  6. 6款 jQuery Lightbox图片查看触控插件

    偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来. 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www.dowebok.com/214.html ...

  7. 12款响应式 Lightbox(灯箱)效果插件

    灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...

  8. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  9. 选择29部分有用jQuery应用程序插件(免费点数下载)

    免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...

随机推荐

  1. Docker 镜像构建的时候,应该小心的坑

    不要改文件 如果run了以后,你还需要进入到容器中,修改容器的配置,那么,这个容器是危险的.一旦容器无法启动,就再也改不了配置.那么你就需要删除和重新run这个容器,而配置要再改一遍.一个可用的镜像在 ...

  2. 一些容易记混的c++相关知识点

    一些容易记混的c++相关知识. 截图自:<王道程序员面试宝典>

  3. Android中的回调Callback

    回调就是外部设置一个方法给一个对象, 这个对象可以执行外部设置的方法, 通常这个方法是定义在接口中的抽象方法, 外部设置的时候直接设置这个接口对象即可. 例如给安卓添加按钮点击事件, 我们创建了OnC ...

  4. Beta完结--感想及吐槽

    Beta冲刺结束啦!!! Beta冲刺结束啦!!! Beta冲刺结束啦!!! 这时候每个人的心情肯定都是非常激动的.随着Beta冲刺的结束,折磨了我们一整个学期的软工实践也差不多结束了.(实在是太不容 ...

  5. 在mysql启用远程连接

    1.在ubuntu下面安装mysql. apt-get install mysql-server mysql-client -y 2.修改/etc/mysql/my.cnf文件. #bind-addr ...

  6. YaoLingJump开发者日志(三)

      开始第二关的筹建.   增加了地刺和会移动的砖块.   每次增加一个新东西都要改好多代码,好累吖.   把第二关搞出来后发现太难了,强行调整难度.   修复了一些bug.   调整难度后还是发现太 ...

  7. 【Linux】- Ubutnu UFW防火墙的简单设置

    ufw是一个主机端的iptables类防火墙配置工具,比较容易上手.一般桌面应用使用ufw已经可以满足要求了. 安装方法 sudo apt-get install ufw 使用方法 1.启用: sud ...

  8. 什么情况下需要检测预装Win8/8.1电脑内置激活密钥(即Win8/8.1 OEM key)?

    1.针对预装在品牌机中的Win8操作系统,因使用了某些软件或自己操作不当导致系统激活Key被替换而激活失效时,你需要找到内置在电脑中的OEM key,重新输入OEM key来激活系统. 2.针对预装W ...

  9. SpringBoot Web(SpringMVC)

    入门工程: package com.example.demo.controller; import com.example.demo.entity.User; import org.springfra ...

  10. cogs1667[SGU422]傻叉小明打字

    其实和CF498bName that Tune差不多 题意: 现在需要依次输入n个字符,第i个字符输入的时候有pi的概率输错,不论是第几次输入(0<=pi<=0.5).每输入一个字符的用时 ...