【网站开发必备】——12款响应式 Lightbox(灯箱)效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。
这篇文章挑选了12款优秀的响应式 Lightbox(灯箱)效果插件分享给大家,这些插件能够帮助你在网站加入引人注目的灯箱效果。
- 12款经典的白富美型 jQuery 图片轮播插件
- 精心挑选的优秀jQuery Ajax分页插件和教程
- 推荐几款非常棒的 jQuery 全景图片展示插件
- 分享30个最佳 jQuery Lightbox 效果插件
- 精心挑选优秀的 JavaScript 日历和时间插件
1.JackBox
这款响应式灯箱效果插件包含社会化媒体分享功能,效果精美!主要特色:
- ✓ 支持Retina屏幕
- ✓ 可以分享到 Twitter、Facebook、Pinterest 和 Google+
- ✓ 支持移动设备的触摸滑动
- ✓ 能够全屏展示
- ✓ 可以自定义缩略图显示
插件下载 效果演示
2.Flare
非常优秀的一款基于 jQuery 的响应式 Lightbox 效果插件!主要特色:
- ✓ 支持展示视频
- ✓ 支持缩略图模式
- ✓ 支持移动设备的触摸滑动
- ✓ 支持全屏显示
- ✓ 有完善和文档和使用教程
使用简单,示例代码:
<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 插件,能够在网站中实现响应式图片灯箱展示,内置社会化媒体分享功能。
精美示例:
- ✓ 响应式设备
- ✓ WordPress相册
- ✓ NextGen示例
- ✓ 剧中的图片网格
插件下载 效果演示
7.Shadowbox
Shadowbox 是一个基于Web 的多媒体应用程序,支持网络上所有主流的媒体格式。
支持高度定制,使用 handleOversize 参数可以实现对浏览器尺寸的自适应,主要特色:
- ✓ 不依赖于框架,能够独立使用
- ✓ 支持用户高度自定义
- ✓ 使用灵活,可以呈现各种多媒体格式。
- ✓ 整洁、紧凑、轻量
- ✓ 能够很好的播放多媒体
插件下载 效果演示
8.YoxView
另外一款响应式 Lightbox 插件,界面精美,使用 MIT 许可协议,对于开发者来说是个好消息。
9.Colorbox
Colorbox 是一款轻量的 jQuery 灯箱效果插件,可以通过 scalePhotos 参数实现自适应。主要特色:
- ✓ 支持分组、幻灯片、Ajax、内联和 iframe 内容。
- ✓ 轻量,只有10KB
- ✓ 可以使用 CSS 修改外观
- ✓ 能够通过回调和事件钩子扩展
- ✓ 支持预加载图片功能
使用简单,示例代码:
// 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
插件下载 效果演示
您可能感兴趣的相关文章
- 10个最佳jQuery Lightbox效果插件收集
- 分享30个最佳 jQuery Lightbox 效果插件
- 60款非常酷的 jQuery 幻灯片演示和下载
- 8款非常棒的响应式 jQuery 幻灯片插件推荐
- 推荐23款美轮美奂的 jQuery 图片特效插件
如果您觉得这些文章对您有用,记得轻轻点击一下右下角的【推荐】哦:)
本文链接:Web开发必备:12款响应式图片 Lightbox 效果插件
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
【网站开发必备】——12款响应式 Lightbox(灯箱)效果插件相关推荐
- 12款响应式的 jQuery 旋转木马(传送带)插件
在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- 75款响应式国外漂亮网站建设中模板(上线倒计时模板)
一些关于国外漂亮网站建设中模板,希望大家能使用得上,大家喜欢就点个赞吧. 1. [网站开通中]黑夜飘雪背景响应式网页倒计时模板 大小:2.09 MB 下载地址:http://www.177347. ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- 17款响应式布局框架
响应式页面设计的运用越来越广泛,做为一名WEB前端开发人员,我们有必要了解更多相关的响应式布局的工具和资源,从而使我们更容易地创建具有响应式布局特性的网站,今天就为大家分享几款响应式布局框架吧. 1. ...
- 20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
- 【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
写在前面 今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...
最新文章
- linux php mysql.so_在linux下php挂接mysql.so扩展的方法
- 高通linux内核目录,高通 android 源代码以及目标系统目录结构
- python常用类型的内置函数列表
- 腾讯云安全组规则导出
- qq互动视频页面加载失败_互动案例技术分析(2)
- [译] 想帮助用户做决定?你的APP可以这样设计!
- jsp调试,异常行数不匹配
- 立即更新 Chrome 浏览器!这个 0day 已遭在野利用
- mysql 修改多表数据库_mysql数据库:mysql增删改、单表、多表及子查询
- matlab 8750h,[多图]九代i7-9750H笔记本标压处理器与前代8750H性能对比
- 2021-08-26小白笔记2
- eve为什么服务器还在维护,EVE无法进入
- 我的世界java版版本号_我的世界JAVA版1.17版本内容预览
- Qt图像处理技术二:对QImage图片简单滤镜(暖色,冷色,反色,老照片,灰度)
- 商城后台管理系统学习日志-02
- 基于Vue2.x的前端架构,我们是这么做的
- 20220319编译OpenHarmony-v3.1-beta出错的解决方法
- 比特大陆面临破产,吴忌寒:兄弟,把你简历寄过来
- Java需求出发:tk mybatis example
- 【计算机和UNIX汇编原理④】——指令系统(上)【标志寄存器 立即寻址 寄存器寻址 直接/寄存器/基址/变址寻址 万字总结】
热门文章
- 有效的括号——字符串匹配问题
- spring+springmvc+hibernate 整合
- python 数据格式转换_python常用数据格式转换
- stata 线性回归分析基本操作
- web前端新手最容易出现的4个错误,你有出错过吗?
- 其他转成十进制,十进制转其他进制
- python queue函数_Python模块:queue
- 宝塔定时任务执行php源码任务_在WINDOWS任务计划程序下执行PHP文件 PHP定时功能的实现...
- php中统一编码语句,统一编码
- cp oracle,Oracle ASM使用asmcmd中的cp命令来执行远程复制