完全轻量级图片灯箱-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 条评论

  1. :?: 很久之前一个客户点名要这个灯箱,看你的function写的那么繁琐啊。。。
    function zoomjs($content) {
    if(!is_feed()||!is_robots) {
    $content=preg_replace('//i',"n",$content);
    }
    return $content;
    }
    add_filter ('the_content', 'zoomjs');

    这是我写的,另外其实完全可以用js加data-action:
    $(".gallery-item img").attr("data-action","zoom");

    1. @Tokin 这个确实是不错的 其实很多代码都可以直接利用带 比如图片自动添加alt 或者图片添加lazyload 那么直接在这个基础上面修改一下就会生效了 是最简单的了

    1. @大发 发神 :wink: 来了。欢迎欢迎。你的博客就是我进阶css的典范。好多新的属性都是用审查元素看你主题里怎么写的,很好用。

发表评论

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

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