0. 前言
PhotoSwipe 是一个前端显示图片的一个框架，不依赖其他额外框架便可以单独运行。此文大部分翻译自官方文档。自己写的demo Github，图片文件存储在firebase上。
1. 安装
在 Github 页面下载整个zip。有关的代码在dist文件夹下面。把相应的文件添加进你的HTML页面。如下面代码所示，把path/to这里修改为你自己相应路径。
1 | <!-- Core CSS file --> |
你在哪里引入这些JS和CSS文件并不影响。重要的代码只会在你运行new PhotoSwipe()的时候运行。
2. 引入 PhotoSwipe
1 | <!-- Root element of PhotoSwipe. Must have class pswp. --> |
这里要注意，一定得在一个class="pswp"的DOM里面。而且pswp__bg，pswp__scroll-wrap， pswp__container和pswp__item的顺序是不能改变的。
3. JS 运行 PhotoSwipe
PhotoSwipe接受4个参数：
.pswp元素，这个已经在第二个阶段加进了DOM，需要进行选择一下就行。PhotoSwipe UI的类。如果你已经引入了默认的photoswipe-ui-default.js（在第一步的时候引入的），那么值就是PhotoSwipeUI_Default。这个值可以是false。- 一个
Array类型的数据，包括图片文件以及图片大小的objects（slides）。 - 选项设置，更多可以参考文档。
1 | var pswpElement = document.querySelectorAll('.pswp')[0]; |
对于items主要有几个选项，可以参考如下代码：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
29var items = [
// item 1
{
src: 'path/to/image1.jpg', // path to image
w: 1024, // image width
h: 768, // image height
msrc: 'path/to/small-image.jpg', // small image placeholder,
// main (large) image loads on top of it,
// if you skip this parameter - grey rectangle will be displayed,
// try to define this property only when small image was loaded before
title: 'Image Caption' // used by Default PhotoSwipe UI
// if you skip it, there won't be any caption
// You may add more properties here and use them.
// For example, demo gallery uses "author" property, which is used in the caption.
// author: 'John Doe'
},
// item 2
{
src: 'path/to/image2.jpg',
w: 600,
h: 600
// etc.
}
// etc.
];
4. 引用网页里面图片
这需要在网页HTML里面预先定义好图片源和格式，然后在JS里面定义好.pswp元素就行。1
2
3
4
5
6
7
8
9
10
11<div class="wrapper">
<div class="demo-content cf">
<div id="photo-gallery" class="picture three cf">
<figure itemprop="associatedMedia">
<a href="img/office-1-thumb.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="img/office-1-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="Beach">
</a>
</figure>
</div>
</div>
</div>
如下是一个接受上面HTML的figure并进行显示的的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
47function openPhotoSwipe() {
var $pswp = $('.pswp')[0];
var image = [];
$('.picture').each(function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src: $href,
w: $width,
h: $height
}
items.push(item);
});
return items;
}
var items = getItems();
console.log(items);
$.each(items, function(index, value) {
image[index] = new Image();
image[index].src = value['src'];
});
$pic.on('click', 'figure', function(event) {
event.preventDefault();
var $index = $(this).index();
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true
}
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
});
});
};
注意：如果是jQuery或者请求过来的网络资源，一定要资源载完以后再运行new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options)否则会出现资源加载不完全的情况。
5. Firebase 配置
图片存在Firebase Storage里面。按照文档教程，先在代码里进行config。1
2
3
4
5
6
7
8
9
10// Initialize Firebase
var config = {
apiKey: "AIzaSyDmZAYedNvi2RATsx20WYb29OvyUCH-FVw",
authDomain: "lichamnesia.firebaseapp.com",
databaseURL: "https://lichamnesia.firebaseio.com",
projectId: "lichamnesia",
storageBucket: "lichamnesia.appspot.com",
messagingSenderId: "997536981175"
};
firebase.initializeApp(config);
1 | // Get a reference to the storage service, which is used to create references in your storage bucket |
参考
[1] the perfect lightbox using photoswipe
[2] photoswipe document