前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >zblog响应式极简图片灯箱插件viewimglee,不足1kb的ViewImage.js超效率

zblog响应式极简图片灯箱插件viewimglee,不足1kb的ViewImage.js超效率

作者头像
李洋博客
发布2022-04-17 11:05:30
1.3K0
发布2022-04-17 11:05:30
举报
文章被收录于专栏:李洋博客李洋博客

对于图片灯箱插件我之前一直无感,直到慢慢越来越多的人联系我说它的重要性,所以主题慢慢的都开启了 Fancybox 图片灯箱插件,效果和功能都很强大,但是最近发现了“ViewImage.js”,这是基于jQuery开发的插件,使用Gzip压缩后不足 1kb,还支持响应式的一款极简灯箱插件,打算把主题都集成这个插件,真的超级精简,使用了几次效果挺好,在此基础上又简单优化了几处css,想着每个人要求不同就顺手做了这款极简插件(插件地址下文章底部)

如果不需要使用插件,那么自己集成在主题也很简单,教程如下:

获取

你可以直接访问ViewImage的  GitHub 来获取最新版插件,当然你也可以通过下面的链接下载ViewImage: view-image.js or  view-image.min.js

引用

首先确保你的页面已经正确引用jQuery(建议2.0+),然后再引用ViewImage.js(不喜欢本地就用这个CDN加速js)。

代码语言:javascript
复制
<script src="//tokinx.github.io/ViewImage/view-image.min.js"></script>

启用

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

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

手动操作完成,结合实际情况把“.view-image img”换成自己图片的class就可以,当然如果懒得手动修改就下载插件吧,免费的,应用中心搜索“图片灯箱”然后获取插件,启用插件即可,什么都不需要修改,仅仅是安装和启用插件,是不是没有比这个更加懒人操作的吧,最后看看插件的兼容性吧,

关于插件的兼容性

D\T

Firefox

Chrome

MSIE

Safari

PC

>=3.5

Yes

>=9

>=3.1

Mobile

Null

Null

Null

Null

目前测试一切正常,如果在使用过程中有任何问题欢迎留言反馈,我们的宗旨就是,能简则简,应该是没有比“ViewImage.js”更为精简的啦,有的话,,,就当我没说!!!

插件地址:

图片灯箱(极简插件)应用中心下载

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 获取
  • 引用
  • 启用
    • 关于插件的兼容性
      • 插件地址:
      相关产品与服务
      内容分发网络 CDN
      内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档