博客换了一套主题，发现没有图片预览的功能，花了点时间整了个全局图片预览插件（PhotoSwipe.js）
之所以选择PhotoSwipe.js，是因为它强大的兼容性，对于我这个小站来说，绰绰有余了。

简介

官方介绍

PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

为谁而用

让移动站点的相册体验和原生App一样的设计师和开发者。

绝佳特性

PhotoSwipe提供给用户一个熟悉又直观的相册交互界面。

官方网站

http://www.photoswipe.com/

源码示例

http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip

Github

https://github.com/codecomputerlove/PhotoSwipe

在线demo

http://www.photoswipe.com/latest/examples/04-jquery-mobile.html

兼容特性

PhotoSwipe兼容大量的移动设备以及所有流行的JavaScript类库/开发框架. 既有基于jQuery的版本,也有不依赖jQuery的版本，还有兼容jQuery Mobile的版本。当然，All In One，全在源码示例包里。

如何使用

PhotoSwipe是一个自身独立的JavaScript库，可以很方便地集成进你的网站。针对移动浏览器(webkit)进行了大量的优化,当然，对于桌面浏览器，以及jQueryMobile，在源码包内也提供了相应的版本.

首先，必要的js，css，html

样式及脚本

css一般放在head中，js放在底部，将对速度影响至最小

1
2
3
4
<link rel="stylesheet" href="photoswipe.css">
<link rel="stylesheet" href="default-skin/default-skin.css">
<script src="photoswipe.min.js"></script>
<script src="photoswipe-ui-default.min.js"></script>

html

这个不必要改，在body中找个地方粘贴进去就好，这个就是预览时的界面，可压缩一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	<!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
	<div class="pswp__bg">
	</div>
	<!-- Slides wrapper with overflow:hidden. -->
	<div class="pswp__scroll-wrap">
		<!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
		<div class="pswp__container">
			<div class="pswp__item">
			</div>
			<div class="pswp__item">
			</div>
			<div class="pswp__item">
			</div>
		</div>
		<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
		<div class="pswp__ui pswp__ui--hidden">
			<div class="pswp__top-bar">
				<!--  Controls are self-explanatory. Order can be changed. -->
				<div class="pswp__counter">
				</div>
				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
				<button class="pswp__button pswp__button--share" title="Share"></button>
				<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
				<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
				<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
				<!-- element will get class pswp__preloader--active when preloader is running -->
				<div class="pswp__preloader">
					<div class="pswp__preloader__icn">
						<div class="pswp__preloader__cut">
							<div class="pswp__preloader__donut">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
				<div class="pswp__share-tooltip">
				</div>
			</div>
			<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
			</button>
			<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
			</button>
			<div class="pswp__caption">
				<div class="pswp__caption__center">
				</div>
			</div>
		</div>
	</div>
</div>

其次，js初始化

最好放到最后，也就是上面代码和js的后面，使用时也可压缩一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
//拿到预览框架，也就是上面的html代码
var pswpElement = document.querySelectorAll('.pswp')[0];
//定义图片数组变量
var imgitems;
/**
* 用于显示预览界面
* @param index 图片数组下标
*/
function viewImg(index) {
	//其它选项这里不做过多阐述，详情见官网
	var pswpoptions = {
		index: parseInt(index, 10),//开始幻灯片索引。0是第一张幻灯片。必须是整数，而不是字符串。
		bgOpacity: 0.7,//背景透明度，0-1
		maxSpreadZoom: 3//缩放级别，不要太大
	};
	//初始化并打开PhotoSwipe，pswpElement对应上面预览框架，PhotoSwipeUI_Default为皮肤，imgitems为图片数组，pswpoptions为选项
	var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, imgitems, pswpoptions);
	gallery.init()
}
/**
* 用于添加图片点击事件
* @param img 图片元素
* @param index 所属下标（在imgitems中的位置）
*/
function addImgClick(img, index) {
	img.onclick = function() {
		viewImg(index)
	}
}
/**
* 轮询所有图片，获取src、width、height等数据，加入imgitems，并给图片元素添加事件
* 最好在onload中执行该方法，本站因放在最底部，所以直接初始化
* 异步加载图片可在图片元素创建完成后调用此方法
*/
function initImg() {
	//重置图片数组
	imgitems = [];
	//查找class:photoswipe-show下的所有img元素并遍历
	var imgs = document.querySelectorAll('.photoswipe-show img');
	for (var i = 0; i < imgs.length; i++) {
		var img = imgs[i];
		//本站相册初始为loading图片，真实图片放在data-src
		var ds = img.getAttribute("data-src");
		//创建image对象，用于获取图片宽高
		var imgtemp = new Image();
		//判断是否存在data-src
		if (ds != null && ds.length > 0) {
			imgtemp.src = ds
		} else {
			imgtemp.src = img.src
		}
		//判断是否存在缓存
		if (imgtemp.complete) {
			var imgobj = {
				"src": imgtemp.src,
				"w": imgtemp.width,
				"h": imgtemp.height,
				"msrc": "/static/img/preloader.gif"
			};
			imgitems[i] = imgobj;
			addImgClick(img, i);
		} else {
			imgtemp.index = i;
			imgtemp.img = img;
			imgtemp.onload = function() {
				var imgobj = {
					"src": this.src,
					"w": this.width,
					"h": this.height,
					"msrc": "/static/img/preloader.gif"
				};
				//不要使用push，因为onload前后顺序会不同
				imgitems[this.index] = imgobj
				//添加点击事件
				addImgClick(this.img, this.index);
			}
		}
	}
}
//初始化
initImg();