Add Image Zoom In/Out Feature with medium-zoom.js

啊，这篇 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 的末尾～

Cocoa