啊,这篇 post 大概是个笔记~
其实很久之前就想把放大缩小图片的功能加到博客上来的,然而一直以来都在摸鱼,前段时间帮玲做了一个摄影的的博客,于是就正好找找看有没有合适又好用的 JS 项目
在一番搜索和试用 Demo 之后,只有 https://github.com/francoischalifour/medium-zoom 最符合需求,同时使用起来非常便利,几行代码就可以给博客加上图片放大缩小的功能
(顺便一提,在作者的网站上有说怎么一步一步写出来这个插件的,https://francoischalifour.com/lab/medium-image-zoom)
第一步是直接用 script
标签加上 medium-zoom.js
的 CDN 地址
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/medium-zoom.min.js" charset="utf-8"></script>
接下来第二步的话,现在 WordPress 的图片基本都是在 figure>img
这个 selector 下面,因此可以在 query 到这些 node 之后,直接传给 mediumZoom
初始化~
<script> mediumZoom(document.querySelectorAll("figure>img")); </script>
最后则是把这几行扔到 footer.php
的末尾~