PhotoSwipe图片画廊组件

全屏滑动的图片画廊用起来爽，Photoswipe就是这么个东西，开源的，功能也挺全。支持图片放大、手势缩放、全屏查看这些常规操作，响应也快，体验还不错。你只需要准备几张图片、加点 DOM 结构，再引入几个 CSS 和 JS 文件就能跑起来，没那么多弯弯绕绕。

压缩包里有几个关键文件：photoswipe.js 是核心逻辑，控制图片怎么加载、怎么切换；photoswipe-ui-default.js 是界面层的操作，像关闭、全屏、下一张这些按钮都在这儿；样式都写在 photoswipe.css，可以按你自己网站的风格改一改；还有个 photoswipe.html 是个例子，看完就知道怎么写结构了。

用法也不复杂，先把资源引进来，再写好图片数据，初始化一下，像下面这样：

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

你可以配多参数，比如默认打开第几张、是否开启全屏、动画速度啥的；甚至还能监听事件，搞一些自定义操作，想点开某张图弹个提示框？也能搞。

另外，它的扩展性也挺强，你可以自定义皮肤，把默认 UI 改得更个性化；也能接插件，比如视频播放、评论系统都能接进来；有 API 能调用，写个跳转到某张图片的按钮也是小意思。

如果你是用 Angular、jQuery 之类的，也有现成的指令或插件能直接上，像这个 Angular 版本，省不少事。

，如果你有一堆图想在网页上展示，用户还要能点开放大、滑动切图，那 Photoswipe 真的还蛮适合，简单、干净、可定制。

如果你想下资源，可以看这个压缩包：photoswipe.rar，里面都配好了；更多细节也可以去它的 GitHub 上瞧瞧，文档写得还挺清楚。