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 的末尾~

声明: 本文为0xBBC原创, 转载注明出处喵~

Leave a Reply

Your email address will not be published. Required fields are marked *