完全轻量级图片灯箱-Zoom

完全轻量级在我心中的定义就是只用引用一个js就可以完成相应功能的实现,不用再去为了响应式再去做各种css调试,一个js就可以实现各个不同分辨率下的适应。

在制作这款主题的时候,图片灯箱功能一直迟迟未增加进来,在挑选灯箱插件的时候,本地也测试了好几款灯箱。不过效果都差强人意。各种bug,然而我又是一个完美主义者,不找到一个很满意的灯箱,我是不会轻易加进主题里的,这也是为了以后可维护的方便性。小bug小改,大bug大改。真的是让人很烦恼的。何不一次性直接解决呢?

解决方案

百度了好久,终于找到了一个比较满意的灯箱-Zoom。只用加载相应js就可以实现。不过对于img图片属性来说,还得增加一个属性来调用起来。在每个img属性里加上data-action="zoom"就ok了。如果是在做企业站的话,直接在img里加入就好,但是对于wordpress来说,还得在functions.php文件里加入以下函数。

// 文章图片灯箱
	add_filter('the_content', 'mimelove_zoom');
	function mimelove_zoom ($content)
	{ global $post;
	    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)/i";
	    $replacement = '<img$1src=$2$3.$4$5 data-action="zoom" $6>';
	    $content = preg_replace($pattern, $replacement, $content);
	    return $content;
	}

Zoom灯箱js下载

下载地址 zoom.min.js(请不要直接使用本地址,请保存至你自己的js文件夹中并引用。)

具体Zoom灯箱如何使用请点击:https://mrju.cn/js-demo/zoomimg/ 并将源文件保存到本地,请查看源代码是如何使用zoom的。(demo中jQuery是用的谷歌cdn,查看图片没有效果的话,请科学上网。)

其他说明

灯箱,顾名思义就是查看图片更多详情,能够更详细的看到图片里的内容,一般由于主题布局的原因,图片无法展示出最大的尺寸。这款zoom灯箱功能只能说是“言简意赅”,还原灯箱最初的功能。原谅我的成语用的不规范。虽然跟别的灯箱来比的话,少了查看下一张上一张的功能,但是我觉得这些都是多余的,用户想看哪一张详图,直接点击图片就是了,其他功能都是附属品(相册功能还是蛮需要这个功能的,但是我不放相册到博客。毕竟是比较私人的东西。),对我来说都是多余的。不知道大家是怎么想的?

23 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫