灯箱效果(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. java学习之面向对象(4)

    之前介绍了java面向对象三大特性之一封装,现在来说说三大特性之一继承和抽象类.这些只是我个人的认识,不足之处还请见谅. 1. 继承是面向对象的三大特征之一,那么何为继承呢? 继承是指一个对象直接使用 ...

  2. HDU1039-Easier Done Than Said?(字符串处理)

    一,题意: 判断三个条件 1:有元音字母 2:不能三个连续元音或辅音 3:不能连续两个相同的字母,除非ee或oo二,思路 写函数一个条件一个条件去判断 #include<iostream> ...

  3. SSRS(rdl报表)分页显示表头和对表头的冻结处理

    基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...

  4. 如何让用户只能访问特定的数据库(MSSQL)

    背景 客户的SQL Server实例上有多个厂商的数据库,每个数据库由各自的进行厂进行商维护, 为了限定不同厂商的维护人员只能访问自己的数据库,现需要给各个厂商限定权限,让他们登录SQL Server ...

  5. 备忘-Sql server Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置

    select * from sysprocesses where dbid= db_id('数据库名') 通过此语句可查看目前所有的连接进程 不够了就必须设置Max Pool Size,理论最大值为3 ...

  6. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  7. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  8. Win8换成Win7系统问题小结(修改主板BIOS方法)

    问题描述: 笔记本电脑W8系统使用不习惯,想要换成W7系统,但不管是用光盘安装亦或是用U盘安装,在设置系统启动项的时候,选择从光盘启动或从U盘启动,但是回车点了之后没反应. 下面就说说问题的原因及解决 ...

  9. Google Chrome调试js入门

    平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...

  10. 基于zipkin分布式链路追踪系统预研第一篇

    本文为博主原创文章,未经博主允许不得转载. 分布式服务追踪系统起源于Google的论文“Dapper, a Large-Scale Distributed Systems Tracing Infras ...