Saber 酱的抱枕

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

制作此功能的原因

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

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

功能说明

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

可移植

这个功能可以移植到其他网站上（假如真的有人需要的话……）。可以在这个文件里查看代码：
imageViewer.js

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

imageSelector

这是图片的选择器，我设置的 '.post_t img' 就是本站文章区域里的图片。改成 'img' 的话就是通用的代码；也可以改成自定义的选择器。

realSrcAttrs

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

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

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

其他变量

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

其他说明

• 可以自动添加动态生成的图片（查看途中也可以动态变化。根据实际情况，可能需要修改 observer() 里的代码）
• 可以自动移除从页面中删除的图片（在每次启动图片查看器时检查，查看途中不会检查）
• 对移动端进行了一定适配，但是体验不是很好（其实在手机上也没太大必要使用这个图片查看器，想放大图片的话直接双指放大网页即可）

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

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

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

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

看图模式已成历史

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

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

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

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