← 返回项目
PROJECT · 05

PHOTO / SWIPE

在浏览器内整理图片、全屏查看并进行缩放,不上传任何文件。

状态
Working prototype
角色
交互设计、前端工程
周期
2 天
年份
2026
06初始画廊卡片
0服务端上传
3查看模式
CASE STUDY
ProductImagesVanilla JS

它解决什么

做作品集、设计评审或素材整理时,逐张打开图片会打断浏览节奏。这个 Demo 把图片变成一个可以连续浏览的工作区:先看缩略图,再进入沉浸式查看。

里面可以做什么

  • 点击任意卡片进入全屏查看。
  • 用左右方向键切换图片,用 + / − 缩放。
  • 选择本地图片追加到画廊,文件只留在当前浏览器里。

技术取舍

交互参考 PhotoSwipe 的轻量画廊模型,当前版本用原生 HTML、CSS 和浏览器文件 API 重写,保持静态部署和零上传边界。

结果

它不是一个单纯的图片墙,而是一种适合展示视觉项目、移动端截图和设计迭代的浏览方式。

SANDBOXED EXPERIENCE

可交互 Demo

Demo 在隔离的沙箱中运行。