响应式Lightbox灯箱插件—Strip

Sponsor

今天和大家分享一款支持智能手机的灯箱(lightbox)插件—Strip，该插件图像展示方式体验友好，使用它可以轻松查看网页上的大图片或视频。

这个Strip灯箱插件兼容性非常好，特别是从侧边展示图像的方式很优雅。兼容性方面支持IE 7+, Firefox 3+, Chrome 5+, Opera 9+, Safari 3+, iOS 5+ and Android 3+

使用方法

Step 1: 嵌入外部文件

载入jQuery插件和strip的JS和CSS样式文件

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/strip/strip.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/strip/strip.css"/>

Step 2: HTML

给要展示大图的链接添加「.strip」样式。

<a href="image.jpg" class="strip">Show image</a>

如果你需要显示标题文字，把「data-strip-caption」加上，代码如下：

<a href="image.jpg" class="strip" data-strip-caption="Caption below the image">Caption</a>

优化Strip的展示方式，添加「data-strip-options」属性。下面代码就是让图像从左边显示，最大宽度为500像素。

<a href="image.jpg"
class="strip"
data-strip-options="side: 'left', maxWidth: 500">Options</a>

图像组，则使用「data-strip-group-options」属性。

<a href="art1.jpg"
class="strip"
data-strip-group="shared-options"
data-strip-group-options="side: 'bottom'">This group</a>
<a href="art2.jpg"
class="strip"
data-strip-group="shared-options">has shared options</a>

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。