开发者社区> 秋天风景> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【网站开发必备】——12款响应式 Lightbox(灯箱)效果插件

简介:   灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。
+关注继续查看

  灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。

  这篇文章挑选了12款优秀的响应式 Lightbox(灯箱)效果插件分享给大家,这些插件能够帮助你在网站加入引人注目的灯箱效果。

您可能感兴趣的相关文章

 

1.JackBox

JackBox - Responsive Lightbox

这款响应式灯箱效果插件包含社会化媒体分享功能,效果精美!主要特色:

  •  支持Retina屏幕
  •  可以分享到 Twitter、Facebook、Pinterest 和 Google+
  •  支持移动设备的触摸滑动
  •  能够全屏展示
  •  可以自定义缩略图显示

插件下载     效果演示

 

2.Flare

Flare Responsive Mobile-Optimized Lightbox Plugin

非常优秀的一款基于 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 download

fancyBox 是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。主要特色:

  •  能够显示图片、HTML元素、SWF影片、iframe框架和Ajax请求的内容
  •  可以通过配置和 CSS 自定义外观和功能
  •  一组内容可以实现导航
  •  支持滚动事件驱动浏览
  •  在放大项目下方有漂亮的投影

插件下载     效果演示

 

4.fancyBox 2

responsive fancybox2

全新版本的 fancyBox,以优雅的方式浏览图片并能够进行缩放。

完全的响应式设计,能够快速响应浏览器的尺寸变化。主要特色:

  •  响应式设计
  •  集成幻灯片功能
  •  漂亮的图片切换效果
  •  文档完整,使用简单
  •  支持高度自定义

插件下载     效果演示

 

5.MetroBox

MetroBox - Responsive LightBox

MetroBox 响应式灯箱效果插件内置评论功能,主要特色:

  •  每项内容都带有评论框
  •  能够轻松分组展示
  •  支持移动设备的触摸滑动
  •  使用 Ajax 方式加载
  •  支持所有的 HTML 内容

插件下载     效果演示

 

6. Foobox

100% Mobile Responsive, Socially Integrated jQuery Image Lightboxes

Foobox 是一款 WordPress 插件,能够在网站中实现响应式图片灯箱展示,内置社会化媒体分享功能。

精美示例:

插件下载     效果演示

 

7.Shadowbox

shadowbox responsive lightbox

Shadowbox 是一个基于Web 的多媒体应用程序,支持网络上所有主流的媒体格式。

支持高度定制,使用 handleOversize 参数可以实现对浏览器尺寸的自适应,主要特色:

  •  不依赖于框架,能够独立使用
  •  支持用户高度自定义
  •  使用灵活,可以呈现各种多媒体格式。
  •  整洁、紧凑、轻量
  •  能够很好的播放多媒体

插件下载     效果演示

 

8.YoxView

YoxView jQuery image viewer plugin

另外一款响应式 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

lightbox responsive lightbox

这是一款基于 jQuery UI 的响应式 Lightbox 插件,主要特色:

  •  支持图片、动画、视频等多种形式的内容
  •  可以使用 ThemeRoller 定义外观
  •  支持键盘快捷导航
  •  良好的错误处理机制
  •  轻量,使用简单

插件下载     效果演示

 

11.Fresco

fresco responsive jquery modal

Fresco 是非常漂亮的一款灯箱效果插件,功能强大,界面设计经典,主要特色:

  •  支持显示图片、视频、HTML、Ajax、SWF 和 iframe 内容
  •  支持 YouTube、Vimeo、MP4、WebM 和 FLV 视频
  •  支持键盘和鼠标滚动导航
  •  4套主题,3种不同的切换效果
  •  可以集成到 Joomla 和 WordPress

插件下载     效果演示

 

12.Yootheme

Widgetkit Lightbox

最后这款响应式 Lightbox 插件,来自 YooTheme 主题网站,主要特色:

  •  支持显示图片、视频、HTML、Ajax、SWF 和 iframe 内容
  •  支持 YouTube、Vimeo、MP4、WebM 和 FLV 视频
  •  支持键盘和鼠标滚动导航
  •  4套主题,3种不同的切换效果
  •  可以集成到 Joomla 和 WordPress

插件下载     效果演示

 

您可能感兴趣的相关文章

 

  如果您觉得这些文章对您有用,记得轻轻点击一下右下角的推荐哦:)

 

本文链接:Web开发必备:12款响应式图片 Lightbox 效果插件

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
baguetteBox.js - 简单易用的 lightbox 插件
  baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用。纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧。       在线演示      免费下载   您可能感兴趣的相关文章 网站开发中很...
1853 0
美国计算机安全应急响应组(CERT):需警惕朝鲜黑客组织“隐藏眼镜蛇”
本文讲的是美国计算机安全应急响应组(CERT):需警惕朝鲜黑客组织“隐藏眼镜蛇”,近日,美国计算机安全应急响应组(CERT)发布了一条罕见的警戒通知(TA17-164A),内容有关一支朝鲜政府支持的黑客组织,名为“隐藏眼镜蛇”(Hidden Cobra,商业公司报告将该黑客组织称为Lazarus Group或Guardians of Peace)。
1485 0
Chocolat.js – 响应式的 jQuery Lightbox 插件
  Chocolat.js 使您能够显示一个或多个图像在同一页面上。给用户展示一组图片缩略图,可以显示全页或块。Chocolat.js 可以很好地处理所有主要的浏览器。它在下面这些浏览器测试通过:IE7+,火狐,Chrome,Opera 和 Safari 浏览器。
945 0
轻量的、可自定义 CSS 的 Lightbox 相册插件
  jQuery LightGallery是一个轻量级的,可定制的,模块化的,响应式的 jQuery 相册插件。它采用 CSS 来实现图像和视频的大小调整。因此,这将是非常灵活的,并且比使用 JavaScript 方法相当快。
909 0
12款高质量的响应式 HTML5/CSS3 网站模板
  HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员。今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站。
1004 0
Swipebox – 用于触屏设备的精美 jQuery Lightbox 插件
  Swipebox 是一款可触摸的 jQuery 灯箱效果插件,可用于桌面,移动和平板电脑。它移动设备支持滑动手势导航,桌面电脑上可以用键盘导航,不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制。
877 0
计算机病毒中心:大量存在漏洞的Web网站被挂马
国家计算机病毒应急处理中心通过对互联网的监测发现,近期没有重大病毒出现,但很多存在漏洞的Web网站纷纷被挂马,用户应注意防范。 专家说,恶意攻击者大多数是利用网站当前存在的漏洞进行木马程序的植入,这些漏洞大部分是利用动画播放软件Flash漏洞、操作系统近期新出现的MS09-002、媒体播放软件RealPlayer9、10版本的漏洞等。
891 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载