Saber 酱的抱枕

点击文章里的图片时会显示一个简单的图片查看器。
可以使用鼠标滚轮进行缩放，移动鼠标进行拖拽，单击退出。
大家可以试试，有问题的话欢迎评论指出。

制作此功能的原因

本站文章区域的图片宽度只有 960px，在电脑屏幕上可能只有屏幕宽度的一半，甚至更少:

这就导致在看一些原图尺寸比较大、有细节的图片时看的不够清楚，不够过瘾，所以现在我添加了这个功能，想看的更清楚的话点一下就好了：

功能说明

• 可以使用鼠标滚轮缩放图片
• 可以通过鼠标移动拖拽图片
• 可以点击按钮或通过按键切换图片（w a ↑ ← 上一张，s d ↓ → 下一张）

v4 版本添加了一个功能：在图片底部的信息栏里会显示图片的名字（文件名），点击可以复制。
这是为了方便我编辑文章而添加的功能，因为有时我发布文章之后，可能需要调整或删除一些图片，就需要复制图片的文件名，以便在编辑器里定位到这张图片。

可移植

这个功能可以移植到其他网站上（假如真的有人需要的话……），不过现在我没有单独拆分代码。可以查看 footer.js 的源代码，在里面搜索 function imageViewer，这个函数就是图片查看器的函数。

在开头部分可以配置几个变量：

imageSelectors

这是图片的选择器数组，我的设置会选择文章区域和评论里的图片。可以根据需要修改成你要使用的选择器。

realSrcAttrs

有时图片的真实路径有可能不在 src 属性上（常见于图片懒加载）。比如本站的图片处于懒加载时，真实路径保存在 file 属性里：

<img class="sl_lazyimg" src="" file="/f/image_editor_1739252332327.jpg">

如果要优先使用 file 属性，就在这个数组里添加 'file' 即可。

其他变量

剩下的几个变量看注释就行了，改不改都行。

其他说明

• 可以自动添加动态生成的图片（查看途中也可以动态变化。根据实际情况，可能需要修改 observer() 里的代码）
• 可以自动移除从页面中删除的图片（在每次启动图片查看器时检查，查看途中不会检查）
• 对移动端进行了一定适配，但是体验不完美。缺少双击缩放功能（不过可以使用双指缩放）。要支持移动端页面的话，需要引入 hammer.min.js。

如有需要可以自行改造，不过代码写的比较乱。

有一个 observer() 函数用于监听动态添加的元素，尝试从中找到需要的目标图片，为其绑定事件。

其实本站用不上，因为本站没有无刷新加载文章的功能，不过我还是简单写了一下。现在的处理是这样的：

如果有必要可以自行修改。

看图模式已成历史

以前在文章页面的右侧有个“进入看图模式”的按钮，可以查看和切换所有图片：

这个看图模式是 2016 年做的，它没有放大功能，而且存在一些小 bug（不过界面看起来更精致些）。相比现在的图片查看器的优点就是有缩略图了，但是在滚动切换图片时经常乱套，而且所谓的缩略图其实加载的是原图（因为我没有给本站的图片自动生成缩略图，所以只能加载原图）。

现在我已经把这个功能关掉了，感谢 8 年多的陪伴。话说真的有人用过这个功能吗？

给文章里的图片添加了点击查看大图的功能