Use Medium-Zoom in Hexo Blog

Intro

Icarus 主题对图片处理时使用 wrap 方法将图片用<a>标签包裹、href(hypertext reference)设为图片的 src，这样点击图片时会跳转到图片的原图地址。

// File: main.js(function($, moment, ClipboardJS, config) {    $('.article img:not(".not-gallery-item")').each(function() {        // wrap images with link and add caption if possible        if ($(this).parent('a').length === 0) {            $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');            if (this.alt) {                $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');            }        }    });    ......}(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

使用 href 链接会导致网页的跳转，在移动端体验不佳，电脑端差强人意。在 Icarus 的GitHub Issue中有人提出了这个问题，为了增强用户点击图片后的交互体验，我们可以使用medium-zoom这一轻量级库，medium-zoom 在点击图片时会在当前页面内创建一个平滑的放大效果，提供更优的视觉体验，查看图片的体验也更直观&沉浸，

Steps

• 引入medium-zoom，以 Icarus 为例，可以在layout.jsx添加如下代码
  <script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>

• 在main.js初始化

  main.js

  (function($, moment, ClipboardJS, config) {   $('.article img:not(".not-gallery-item")').each(function() {       // wrap images with link and add caption if possible // [!code --]       if ($(this).parent('a').length === 0) {           $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"> </a>');           if (this.alt) {               $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt  + '</p>');           }       }   });    ......    document.addEventListener("DOMContentLoaded", function () {        mediumZoom('.content img', {            background: 'rgba(30, 30, 46, 0.5)',        });    });}(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

• 根据个人喜好，添加相应样式。建议调整 z-index 以确保放大后的图片在最上层。此外，可通过利用backdrop-filter实现模糊效果

  .medium-zoom-overlay {  backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  z-index: 150 !important;}.medium-zoom-image--opened {  z-index: 151;  position: fixed;}

Q&A

图片放大后位置不在可视页面内

目前遇到这些问题的图片，都使用了style="zoom: 30%"^[1]来控制缩放，但这与 medium-zoom 存在兼容性问题，导致放大后的图片位置偏移，无法居中显示。 解决方法是将zoom属性替换为width: 30%或使用transform: scale(0.3)来实现缩放效果。

PJAX Issue

Hexo 一些主题（例如 Icarus）时，多采用 PJAX 或局部刷新加载页面。对于使用 PJAX 或异步加载的博客页面，需要在内容更新后重新初始化 medium-zoom。假设使用 PJAX，可以在 PJAX 完成事件中重新调用 mediumZoom：

document.addEventListener('pjax:complete', () => {    mediumZoom('.content img', {        background: 'rgba(30, 30, 46, 0.5)',    });    // TODO pace stop loading animation});