ViewImage - 响应式极简灯箱插件

一款基于JQ 的灯箱插件,Gzip后不足 1kb 的响应式极简灯箱插件

基于jQuery ,Gzip后不足 1kb 的响应式极简灯箱插件。

ViewImage.js

基于jQuery ,Gzip后不足 1kb 的响应式极简灯箱插件

在页底提供的下载文件中获取:

view-image.js or view-image.min.js

ViewImage - 响应式极简灯箱插件-Npcink
背景图片

引用

首先确保你的页面已经正确引用jQuery(建议2.0+),然后再引用ViewImage.js。

<script src="//tokinx.github.io/ViewImage/view-image.min.js"></script>

启用

我们为您提供了非常简便的初始化方法,方便您对程序进行一些个性化设置并正确启用

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target' : '.view-image img', //需要使用ViewImage的图片
            'exclude': '.exclude img',    //要排除的图片
            'delay'  : 300                //延迟时间
        });
    });
</script>

示例 :

我们提供了几个DEMO,方便您进一步了解ViewImage

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target': '.view-image img,.view-image2 a,.view-image3 a',
            'exclude': '.exc',
            'delay': 300
        });
    });
</script>

[图片]

<ul class="view-image">
    <li><img src="原图"></li>
    <li><img src="原图"></li>
    <li><img src="原图"></li>
    <li><img src="原图" class="exc"></li>
</ul>

[链接] + [文字]

<ul class="view-image2">
    <li><a href="原图">可用</a></li>
    <li><a href="原图" class="exc">不可用</a></li>
</ul>

[链接] + [缩略图]

<ul class="view-image3">
    <li><a href="原图"><img src="缩略图 或 原图"></a></li>
    <li><a href="原图" class="exc"><img src="缩略图 或 原图"></a></li>
</ul>

兼容性:

D\TFirefoxChromeMSIESafari
PC>=3.5Yes>=9>=3.1
MobileNullNullNullNull

如果您需要一款功能更加丰富的灯箱,那么还可以看看这篇:

ViewImage - 响应式极简灯箱插件-Npcink
ViewImage - 响应式极简灯箱插件-Npcink

Fancybox - 用于显示图像,视频等的jQuery灯箱脚本

JavaScript灯箱库,用于呈现各种类型的媒体。 响应式,触控式和可自定义。

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
资源

MikuTools - 轻量工具集合

2019-5-29 8:47:02

资源

恐怖游戏:失忆症:黑暗后裔、失忆症:猪猡的机器汉化包

2019-6-20 10:07:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索