12款响应式 Lightbox(灯箱)效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。
这篇文章挑选了12款优秀的响应式 Lightbox(灯箱)效果插件分享给大家,这些插件能够帮助你在网站加入引人注目的灯箱效果。
1.JackBox
这款响应式灯箱效果插件包含社会化媒体分享功能,效果精美!主要特色:
- 支持Retina屏幕
- 可以分享到 Twitter、Facebook、Pinterest 和 Google+
- 支持移动设备的触摸滑动
- 能够全屏展示
- 可以自定义缩略图显示
2.Flare
非常优秀的一款基于 jQuery 的响应式 Lightbox 效果插件!主要特色:
- 支持展示视频
- 支持缩略图模式
- 支持移动设备的触摸滑动
- 支持全屏显示
- 有完善和文档和使用教程
使用简单,示例代码:
1
2
3
<a data-target="flare" href="large_image.jpg" data-flare-scale="fit" >
<img src="small_image.jpg" alt="small image" />
</a>
3.fancyBox 1
fancyBox 是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。主要特色:
- 能够显示图片、HTML元素、SWF影片、iframe框架和Ajax请求的内容
- 可以通过配置和 CSS 自定义外观和功能
- 一组内容可以实现导航
- 支持滚动事件驱动浏览
- 在放大项目下方有漂亮的投影
4.fancyBox 2
全新版本的 fancyBox,以优雅的方式浏览图片并能够进行缩放。
完全的响应式设计,能够快速响应浏览器的尺寸变化。主要特色:
- 响应式设计
- 集成幻灯片功能
- 漂亮的图片切换效果
- 文档完整,使用简单
- 支持高度自定义
5.MetroBox
MetroBox 响应式灯箱效果插件内置评论功能,主要特色:
- 每项内容都带有评论框
- 能够轻松分组展示
- 支持移动设备的触摸滑动
- 使用 Ajax 方式加载
- 支持所有的 HTML 内容
6. Foobox
Foobox 是一款 WordPress 插件,能够在网站中实现响应式图片灯箱展示,内置社会化媒体分享功能。
精美示例:
7.Shadowbox
Shadowbox 是一个基于Web 的多媒体应用程序,支持网络上所有主流的媒体格式。
支持高度定制,使用 handleOversize 参数可以实现对浏览器尺寸的自适应,主要特色:
- 不依赖于框架,能够独立使用
- 支持用户高度自定义
- 使用灵活,可以呈现各种多媒体格式。
- 整洁、紧凑、轻量
- 能够很好的播放多媒体
8.YoxView
另外一款响应式 Lightbox 插件,界面精美,使用 MIT 许可协议,对于开发者来说是个好消息。
9.Colorbox
Colorbox 是一款轻量的 jQuery 灯箱效果插件,可以通过 scalePhotos 参数实现自适应。主要特色:
- 支持分组、幻灯片、Ajax、内联和 iframe 内容。
- 轻量,只有10KB
- 可以使用 CSS 修改外观
- 能够通过回调和事件钩子扩展
- 支持预加载图片功能
使用简单,示例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});
// Ajax
$('a#login').colorbox();
// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});
// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});
// ColorBox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
var url = $(this).attr('href');
return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});
10.rlightbox
这是一款基于 jQuery UI 的响应式 Lightbox 插件,主要特色:
- 支持图片、动画、视频等多种形式的内容
- 可以使用 ThemeRoller 定义外观
- 支持键盘快捷导航
- 良好的错误处理机制
- 轻量,使用简单
11.Fresco
Fresco 是非常漂亮的一款灯箱效果插件,功能强大,界面设计经典,主要特色:
- 支持显示图片、视频、HTML、Ajax、SWF 和 iframe 内容
- 支持 YouTube、Vimeo、MP4、WebM 和 FLV 视频
- 支持键盘和鼠标滚动导航
- 4套主题,3种不同的切换效果
- 可以集成到 Joomla 和 WordPress
12.Yootheme
最后这款响应式 Lightbox 插件,来自 YooTheme 主题网站,主要特色:
- 支持显示图片、视频、HTML、Ajax、SWF 和 iframe 内容
- 支持 YouTube、Vimeo、MP4、WebM 和 FLV 视频
- 支持键盘和鼠标滚动导航
- 4套主题,3种不同的切换效果
- 可以集成到 Joomla 和 WordPress
12款响应式 Lightbox(灯箱)效果插件的更多相关文章
- 12款响应式的 jQuery 旋转木马(传送带)插件
在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- 25款响应式,支持视网膜显示的 Wordpress 主题
响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式. 多用途的响应式 ...
- 灯箱效果插件Magnific Popup详解
Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...
- 20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
- 12款最佳的 WordPress 语法高亮插件推荐
语法高亮工具增强了代码的可读性,美化了代码,让程序员更容易维护.语法高亮提供各种方式由以提高可读性和文本语境,尤其是对于其中可以结束跨越多个页面的代码,以及让开发者自己的程序中查找错误.在这篇文章中, ...
随机推荐
- IIS和4.0安装到底有没有先后顺序解答
在很多人或许很多技术大神都会觉得IIS的安装和4.0没得先后顺序的.其错误弊端在与IIS没有注册到4.0上. 经过今天遇到了服务器安装服务端发觉报错[无法识别的属性“targetFramework”. ...
- ASP.NET Core Linux下为 dotnet 创建守护进程(必备知识)
前言 在上篇文章中介绍了如何在 Docker 容器中部署我们的 asp.net core 应用程序,本篇主要是怎么样为我们在 Linux 或者 macOs 中部署的 dotnet 程序创建一个守护进程 ...
- 一劳永逸:域名支持通配符,ASP.NET Core中配置CORS更轻松
ASP.NET Core 内置了对 CORS 的支持,使用很简单,只需先在 Startup 的 ConfigureServices() 中添加 CORS 策略: public void Configu ...
- Expert 诊断优化系列------------------你的CPU高么?
现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...
- Hadoop学习笔记—18.Sqoop框架学习
一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...
- 三周,用长轮询实现Chat并迁移到Azure测试
公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- Java伪界面操作数据库的小实例
首先在Mysql中有两个表fruit和login: package com.zuoye; import java.sql.*; import java.util.*; public class Tes ...
- 使用Emit把Datatable转换为对象集合(List<T>)
Emit生成动态方法部分摘自网上,但是经过修改,加入了对委托的缓存以及类结构的调整,使之调用更简洁方便.大致的思路是:要实现转换datatable到某个指定对象的集合,本质是实现转换一个datarow ...
- 在Package中处理 bit column
SQL Server没有boolean类型,使用bit 类型来代替,bit类型有两个值:0 和 1. SSIS package中有boolean类型,SSIS自动将bit 类型转换成boolean类型 ...