灯箱效果(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. VB.net 2010下关联与程序图标设置

    '*************************************************************************'**模 块 名:VB.net 2010下关联与程序 ...

  2. ABP理论学习之领域服务

    返回总目录 本篇目录 介绍 IDomainService接口和DomainService类 样例 创建一个接口 服务实现 调用应用服务 一些讨论 何不只使用应用服务 如何强制使用领域服务 介绍 领域服 ...

  3. Microsoft Azure Web Sites应用与实践【1】—— 打造你的第一个Microsoft Azure Website

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  4. Step by Step 创建一个新的Dynamics CRM Organization

    原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...

  5. EF6 Power Tools的妙用和问题

    环境:vs2013+EF:6.1.3.0+Power Tools:Beta 4 power tools:是一个反向工程,在已有数据库的情况下,可以利用它生成Code Frist模式的代码. 问题: 它 ...

  6. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

  7. Over:窗口函数(滑动聚合)

    Over 窗口函数在Select 子句中,对查询的结果集进行“滑动-聚合”运算:如果使用count,那么基于滑动窗口的聚合语义同 base+1 累加:如果使用sum,那么基于滑动窗口的聚合语义等同于数 ...

  8. 吐槽:基于PhoneGap开发移动项目

    目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...

  9. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  10. java的栈图形演示

    import java.awt.*; import javax.swing.*; import java.awt.event.*; /* 指示发生了组件定义的动作的语义事件.当特定于组件的动作(比如被 ...