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

talklee

温馨提示:这篇文章已超过169天没有更新,请注意相关的内容是否还可用!

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

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

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

获取

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

引用

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

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

关于插件的兼容性

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

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

插件地址:

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

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,6520人围观)

还没有评论,来说两句吧...

目录[+]