灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。
这篇文章挑选了12款优秀的响应式 Lightbox(灯箱)效果插件分享给大家,这些插件能够帮助你在网站加入引人注目的灯箱效果。
这款响应式灯箱效果插件包含社会化媒体分享功能,效果精美!主要特色:
非常优秀的一款基于 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
>
fancyBox 是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。主要特色:
全新版本的 fancyBox,以优雅的方式浏览图片并能够进行缩放。
完全的响应式设计,能够快速响应浏览器的尺寸变化。主要特色:
MetroBox 响应式灯箱效果插件内置评论功能,主要特色:
Foobox 是一款 WordPress 插件,能够在网站中实现响应式图片灯箱展示,内置社会化媒体分享功能。
精美示例:
Shadowbox 是一个基于Web 的多媒体应用程序,支持网络上所有主流的媒体格式。
支持高度定制,使用 handleOversize 参数可以实现对浏览器尺寸的自适应,主要特色:
另外一款响应式 Lightbox 插件,界面精美,使用 MIT 许可协议,对于开发者来说是个好消息。
Colorbox 是一款轻量的 jQuery 灯箱效果插件,可以通过 scalePhotos 参数实现自适应。主要特色:
使用简单,示例代码:
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>'
;
}});
这是一款基于 jQuery UI 的响应式 Lightbox 插件,主要特色:
Fresco 是非常漂亮的一款灯箱效果插件,功能强大,界面设计经典,主要特色:
最后这款响应式 Lightbox 插件,来自 YooTheme 主题网站,主要特色: