CSS图书馆 » HTML & CSS » 响应式Lightbox灯箱插件—Strip

响应式Lightbox灯箱插件—Strip

发表于: HTML & CSS. 评论 (1)
赞助商链接

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

响应式Lightbox灯箱插件—Strip

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

responsive lightbox

使用方法

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>

 

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。