灯箱效果(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(灯箱)效果插件的更多相关文章

  1. 12款响应式的 jQuery 旋转木马(传送带)插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  2. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  3. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  4. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  5. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  6. 25款响应式,支持视网膜显示的 Wordpress 主题

    响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式. 多用途的响应式 ...

  7. 灯箱效果插件Magnific Popup详解

    Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...

  8. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

  9. 12款最佳的 WordPress 语法高亮插件推荐

    语法高亮工具增强了代码的可读性,美化了代码,让程序员更容易维护.语法高亮提供各种方式由以提高可读性和文本语境,尤其是对于其中可以结束跨越多个页面的代码,以及让开发者自己的程序中查找错误.在这篇文章中, ...

随机推荐

  1. gdb调试工具vi编译器命令参考网址

    vi编译器命令:参考http://www.cnblogs.com/junw_china/articles/1708967.html gbd调试命令:参考http://blog.chinaunix.ne ...

  2. LINUX 下grep命令查找

    当出现查找文件出现匹配到二进制文件时,大概是因为文件同时含有文本文件与二进制文件,需要加上 grep -a,就可以解决问题.

  3. 导向矢量(Steering Vector)

    导向矢量是阵列天线的所有阵元对具有单位能量窄带信源的响应. 由于阵列响应在不同方向上是不同的,导向矢量与信源的方向是相互关联的,这种关联的独特性依赖于阵列的几何结构.对于同一阵元阵列,导向矢量的每一个 ...

  4. 一步一步学ROP之linux_x86篇

    一步一步学ROP之linux_x86篇 作者:蒸米@阿里聚安全 ​ 一.序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过 ...

  5. .NET面试题系列[12] - C# 3.0 LINQ的准备工作

    "为了使LINQ能够正常工作,代码必须简化到它要求的程度." - Jon Skeet 为了提高园子中诸位兄弟的英语水平,我将重要的术语后面配备了对应的英文. .NET面试题系列目录 ...

  6. 使用C#给Linux写Shell脚本(下篇)

    在上篇的<使用C#给Linux写Shell脚本>结尾中,我们留下了一个关于C#如何调用BashShell的问题.在文章发布之后,我留意到有读者留言推荐使用“Pash”(一款类PowerSh ...

  7. RTSP协议转换RTMP直播协议

    RTSP协议转换RTMP直播协议 RTSP协议也是广泛使用的直播/点播流媒体协议,最近实现了一个RTSP协议转换RTMP直播协议的程序,为的是可以接收远端设备或服务器的多路RTSP直播数据,实时转换为 ...

  8. Apache-Tomcat的安装配置

    现在将使用Tomcat的一些经验和心得写到这里,作为记录和备忘.如果有朋友看到,也请不吝赐教. 1.首先是Tomcat的获取和安装. 获取当然得上Apache的官方网站下载,开源免费,而且带宽也足够. ...

  9. PHP面向对象

    面向对象 1.类由众多的对象抽象出来的    2.对象    一起皆对象    由类实例化出来的 求两个圆之间阴影的面积 $sr1=10; $sr2=5; $mj=3.14*$sr1*$sr1-3.1 ...

  10. LINQ系列:C#中与LINQ相关特性

    1. 匿名类型 通过关键字var定义匿名类型,编译器将根据运算符右侧表达式的值来发出一个强类型. 使用匿名类型时要遵守的一些基本规则: ◊ 匿名类型必须有一个初始化值,而且这个值不能是空值(null) ...