灯箱效果(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. Public key for mysql....rpm is not installed

    解决方案: 此时导入rpm的签名信息即可,用root登录,执行下面命令(我的linux版本是centos 5.1) 原文地址: http://my.oschina.net/u/555639/blog/ ...

  2. myeclipse中导入js报如下错误Syntax error on token "Invalid Regular Expression Options", no accurate correc

    今天在使用bootstrap的时候引入的js文件出现错误Syntax error on token "Invalid Regular Expression Options", no ...

  3. .NET中XML序列化的总结

    [题外话] 以前虽然常用.NET中的序列化,但是常用的BinaryFormatter,也就是二进制文件的序列化,却鲜用XML的序列化.对于XML序列化,.NET中同样提供了一个非常方便的工具XmlSe ...

  4. Java Collections.sort方法对list集合排序

    1.排序测试类 package com.ljq.test; import java.util.ArrayList; import java.util.Collections; import java. ...

  5. GitHub的使用记录

    前言: 该贴为笔者在使用GItHub中的一些使用注意,及Git的基本命令,会一直记录笔者在使用GitHub中可能产生的错误及解决方法(会一直更新中),待一些Git初使用者参考,如果有说明不详细或不对的 ...

  6. Atitit常见的标准化组织与规范数量jcp ecma iso

    Atitit常见的标准化组织与规范数量jcp ecma iso 1. 常见的标准化组织1 1.1. 重要的基金会apache1 1.2. 美国国家标准学会(American NationalStand ...

  7. vmware 虚拟机通信拿不到 inet addr 的解决办法

    我在虚拟机上安装完红帽之后,使用ifconfig命令来看网卡的IP,但是,输入命令之后,eht0里面只有 inet6 addr 而没有 inet addr,不多说,上图. 解决办法如下:打开 虚拟机设 ...

  8. java中对final关键字的理解以及使用场景

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.

  9. LeetCode OJ1:Reverse Words in a String

    问题描述: Given an input string, reverse the string word by word. For example,Given s = "the sky is ...

  10. Ubuntu14.04、win7双系统如何设置win7为默认启动项

    Ubuntu14.04.win7双系统如何设置win7为默认启动项 Ubuntu14.04.win7双系统设置win7为默认启动项方法: 在启动项选择菜单处记住windows 7对应的序号. 从上至下 ...