入门
您应知道之前先做起事情：
1. PhotoSwipe不是一个简单的jQuery插件，至少基本的JavaScript知识才能安装。
2. PhotoSwipe需要预定义的图像尺寸（更多关于这一点）。
3. 如果您在非回应网站上使用PhotoSwipe - 控制将在移动进行换算（整页缩放）。所以你需要实现自定义控件（在右上角例如单个大关闭按钮）。
4. 文档中所有的代码是纯香草JS和支持IE8及以上。如果您的网站或应用程序使用了一些JavaScript框架（像jQuery或MooTools的），或者你并不需要支持旧的浏览器 - 随意简化代码。
5. 避免对移动服务的大图像（大于2000x1500px），因为它们会极大地降低动画性能，并可能导致崩溃（尤其是iOS上的Safari浏览器）。可能的解决方案：一个单独的网页上投放响应图像，或者打开的图像，或者（在常见问题解答更多）使用支持平铺图像（如传单）库。
初始化
第1步：包括JS和CSS文件
您可以在GitHub的信息库DIST/文件夹中找到它们。萨斯和未编译的JS文件夹中的src /。我建议使用无礼的话，如果你打算修改现有的样式，有代码的结构和评述。https://github.com/dimsemenov/PhotoSwipe
1 <!-- Core CSS file --> 2 <link rel="stylesheet" href="path/to/photoswipe.css"> 3 4 <!-- Skin CSS file (styling of UI - buttons, caption, etc.) 5 In the folder of skin CSS file there are also: 6 - .png and .svg icons sprite, 7 - preloader.gif (for browsers that do not support CSS animations) --> 8 <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 9 10 <!-- Core JS file --> 11 <script src="path/to/photoswipe.min.js"></script> 12 13 <!-- UI JS file --> 14 <script src="path/to/photoswipe-ui-default.min.js"></script>
不要紧，如何以及在哪里将包括JS和CSS文件。只有当你调用新PhotoSwipe代码被执行（）。可以随意推迟文件加载，如果你不需要PhotoSwipe被初步打开。
PhotoSwipe还支持AMD装载机（如RequireJS）和CommonJS的，使用起来就像这样：
1 require([
2 ‘path/to/photoswipe.js‘,
3 ‘path/to/photoswipe-ui-default.js‘
4 ], function( PhotoSwipe, PhotoSwipeUI_Default ) {
5
6 // var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
7 // gallery.init()
8 // ...
9
10 });
而且，您可以通过鲍尔安装（安装鲍尔photoswipe），或NPM（NPM安装photoswipe）。
第2步：PhotoSwipe（.pswp）元素添加到DOM
您可以通过JS动态添加HTML代码（直接在初始化之前），或者有它的页面开始（喜欢它的演示页面上完成）。该代码可以在任何地方附加，但理想的结束</ body>之前。 （你用相同的UI类只要）你可以重复使用它在多个画廊。
1 <!-- Root element of PhotoSwipe. Must have class pswp. --> 2 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 3 4 <!-- Background of PhotoSwipe. 5 It‘s a separate element as animating opacity is faster than rgba(). --> 6 <div class="pswp__bg"></div> 7 8 <!-- Slides wrapper with overflow:hidden. --> 9 <div class="pswp__scroll-wrap"> 10 11 <!-- Container that holds slides. 12 PhotoSwipe keeps only 3 of them in the DOM to save memory. 13 Don‘t modify these 3 pswp__item elements, data is added later on. --> 14 <div class="pswp__container"> 15 <div class="pswp__item"></div> 16 <div class="pswp__item"></div> 17 <div class="pswp__item"></div> 18 </div> 19 20 <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 21 <div class="pswp__ui pswp__ui--hidden"> 22 23 <div class="pswp__top-bar"> 24 25 <!-- Controls are self-explanatory. Order can be changed. --> 26 27 <div class="pswp__counter"></div> 28 29 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 30 31 <button class="pswp__button pswp__button--share" title="Share"></button> 32 33 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 34 35 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 36 37 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> 38 <!-- element will get class pswp__preloader--active when preloader is running --> 39 <div class="pswp__preloader"> 40 <div class="pswp__preloader__icn"> 41 <div class="pswp__preloader__cut"> 42 <div class="pswp__preloader__donut"></div> 43 </div> 44 </div> 45 </div> 46 </div> 47 48 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 49 <div class="pswp__share-tooltip"></div> 50 </div> 51 52 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 53 </button> 54 55 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 56 </button> 57 58 <div class="pswp__caption"> 59 <div class="pswp__caption__center"></div> 60 </div> 61 62 </div> 63 64 </div> 65 66 </div>
pswp__bg，pswp__scroll换行，pswp__container和pswp__item元素的顺序不应改变。
你可能会问，为什么PhotoSwipe不通过JS自动添加该代码，原因很简单 - 只是为了节省文件大小的情况下，如果你需要的布局做一些修改。
步骤3：初始化
执行PhotoSwipe构造函数。它接受4个参数：
1. 从步骤2（它必须被添加到DOM）.pswp元件。
2. PhotoSwipe UI类。如果包括了默认photoswipe-UI-default.js，类将是PhotoSwipeUI_Default。可以是假的。
3. 与对象（幻灯片）阵列。
4. options
1 var pswpElement = document.querySelectorAll(‘.pswp‘)[0];
2
3 // build items array
4 var items = [
5 {
6 src: ‘https://placekitten.com/600/400‘,
7 w: 600,
8 h: 400
9 },
10 {
11 src: ‘https://placekitten.com/1200/900‘,
12 w: 1200,
13 h: 900
14 }
15 ];
16
17 // define options (if needed)
18 var options = {
19 // optionName: ‘option value‘
20 // for example:
21 index: 0 // start at first slide
22 };
23
24 // Initializes and opens PhotoSwipe
25 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
26 gallery.init();
在最后你应该得到的东西是这样的：
html:
1 <button id="btn">Open PhotoSwipe</button> 2 3 <!-- Root element of PhotoSwipe. Must have class pswp. --> 4 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 5 6 <!-- Background of PhotoSwipe. 7 It‘s a separate element, as animating opacity is faster than rgba(). --> 8 <div class="pswp__bg"></div> 9 10 <!-- Slides wrapper with overflow:hidden. --> 11 <div class="pswp__scroll-wrap"> 12 13 <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> 14 <div class="pswp__container"> 15 <!-- don‘t modify these 3 pswp__item elements, data is added later on --> 16 <div class="pswp__item"></div> 17 <div class="pswp__item"></div> 18 <div class="pswp__item"></div> 19 </div> 20 21 <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 22 <div class="pswp__ui pswp__ui--hidden"> 23 24 <div class="pswp__top-bar"> 25 26 <!-- Controls are self-explanatory. Order can be changed. --> 27 28 <div class="pswp__counter"></div> 29 30 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 31 32 <button class="pswp__button pswp__button--share" title="Share"></button> 33 34 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 35 36 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 37 38 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> 39 <!-- element will get class pswp__preloader--active when preloader is running --> 40 <div class="pswp__preloader"> 41 <div class="pswp__preloader__icn"> 42 <div class="pswp__preloader__cut"> 43 <div class="pswp__preloader__donut"></div> 44 </div> 45 </div> 46 </div> 47 </div> 48 49 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 50 <div class="pswp__share-tooltip"></div> 51 </div> 52 53 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 54 </button> 55 56 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 57 </button> 58 59 <div class="pswp__caption"> 60 <div class="pswp__caption__center"></div> 61 </div> 62 63 </div> 64 65 </div> 66 67 </div>
js :
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll(‘.pswp‘)[0];
// build items array
var items = [
{
src: ‘https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg‘,
w: 964,
h: 1024
},
{
src: ‘https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg‘,
w: 1024,
h: 683
}
];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
openPhotoSwipe();
document.getElementById(‘btn‘).onclick = openPhotoSwipe;
结果：
创建幻灯片对象的数组
数组应包含有关幻灯片数据中的每个对象，也可以是你希望在PhotoSwipe显示任何东西 - 路径图像，标题字符串，股数，评论等。
默认情况下PhotoSwipe只使用了5个属性：SRC（路径图），W（图像宽度），H（图像高度），MSRC（路径的小图像占位符，大的图像会在上面装），HTML（自定义HTML，更 关于它）。
在导航，PhotoSwipe增加自己的属性到这个对象（如MINZOOM或加载）。
1 var slides = [
2
3 // slide 1
4 {
5
6 src: ‘path/to/image1.jpg‘, // path to image
7 w: 1024, // image width
8 h: 768, // image height
9
10 msrc: ‘path/to/small-image.jpg‘, // small image placeholder,
11 // main (large) image loads on top of it,
12 // if you skip this parameter - grey rectangle will be displayed,
13 // try to define this property only when small image was loaded before
14
15
16
17 title: ‘Image Caption‘ // used by Default PhotoSwipe UI
18 // if you skip it, there won‘t be any caption
19
20
21 // You may add more properties here and use them.
22 // For example, demo gallery uses "author" property, which is used in the caption.
23 // author: ‘John Doe‘
24
25 },
26
27 // slide 2
28 {
29 src: ‘path/to/image2.jpg‘,
30 w: 600,
31 h: 600
32
33 // etc.
34 }
35
36 // etc.
37
38 ];
您可以动态地定义幻灯片对象的属性PhotoSwipe读取它们直接之前，使用gettingData事件（在文档的API部分的更多信息）。例如，该技术可用于为不同的屏幕尺寸不同的图像。
如何从一个链接列表建立幻灯片的数组
让我们假设你有一个看起来像这样（约画廊的标记更多信息）的链接/缩略图列表：
1 <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 2 3 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 4 <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 5 <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 6 </a> 7 <figcaption itemprop="caption description">Image caption</figcaption> 8 </figure> 9 10 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 11 <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 12 <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 13 </a> 14 <figcaption itemprop="caption description">Image caption</figcaption> 15 </figure> 16 17 18 </div>
...你要点击缩略图与大型图像打开PhotoSwipe（喜欢它的演示页上完成）。所有你需要做的是：
1. 绑定click事件链接/缩略图。
2. 用户点击缩略图后，找到它的索引。
3. 创建DOM元素幻灯片对象的数组 - 通过各环节循环和检索href属性（大图像URL），数据大小属性（其大小），缩略图的SRC和字幕的内容。
PhotoSwipe并不真正关心你将如何做到这一点。如果你使用像jQuery或MooTools的框架，或者如果你不需要支持IE8，代码可以大大简化。
这里是纯香草JS实现与IE8的支持：
1 var initPhotoSwipeFromDOM = function(gallerySelector) {
2
3 // parse slide data (url, title, size ...) from DOM elements
4 // (children of gallerySelector)
5 var parseThumbnailElements = function(el) {
6 var thumbElements = el.childNodes,
7 numNodes = thumbElements.length,
8 items = [],
9 figureEl,
10 linkEl,
11 size,
12 item;
13
14 for(var i = 0; i < numNodes; i++) {
15
16 figureEl = thumbElements[i]; // <figure> element
17
18 // include only element nodes
19 if(figureEl.nodeType !== 1) {
20 continue;
21 }
22
23 linkEl = figureEl.children[0]; // <a> element
24
25 size = linkEl.getAttribute(‘data-size‘).split(‘x‘);
26
27 // create slide object
28 item = {
29 src: linkEl.getAttribute(‘href‘),
30 w: parseInt(size[0], 10),
31 h: parseInt(size[1], 10)
32 };
33
34
35
36 if(figureEl.children.length > 1) {
37 // <figcaption> content
38 item.title = figureEl.children[1].innerHTML;
39 }
40
41 if(linkEl.children.length > 0) {
42 // <img> thumbnail element, retrieving thumbnail url
43 item.msrc = linkEl.children[0].getAttribute(‘src‘);
44 }
45
46 item.el = figureEl; // save link to element for getThumbBoundsFn
47 items.push(item);
48 }
49
50 return items;
51 };
52
53 // find nearest parent element
54 var closest = function closest(el, fn) {
55 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
56 };
57
58 // triggers when user clicks on thumbnail
59 var onThumbnailsClick = function(e) {
60 e = e || window.event;
61 e.preventDefault ? e.preventDefault() : e.returnValue = false;
62
63 var eTarget = e.target || e.srcElement;
64
65 // find root element of slide
66 var clickedListItem = closest(eTarget, function(el) {
67 return (el.tagName && el.tagName.toUpperCase() === ‘FIGURE‘);
68 });
69
70 if(!clickedListItem) {
71 return;
72 }
73
74 // find index of clicked item by looping through all child nodes
75 // alternatively, you may define index via data- attribute
76 var clickedGallery = clickedListItem.parentNode,
77 childNodes = clickedListItem.parentNode.childNodes,
78 numChildNodes = childNodes.length,
79 nodeIndex = 0,
80 index;
81
82 for (var i = 0; i < numChildNodes; i++) {
83 if(childNodes[i].nodeType !== 1) {
84 continue;
85 }
86
87 if(childNodes[i] === clickedListItem) {
88 index = nodeIndex;
89 break;
90 }
91 nodeIndex++;
92 }
93
94
95
96 if(index >= 0) {
97 // open PhotoSwipe if valid index found
98 openPhotoSwipe( index, clickedGallery );
99 }
100 return false;
101 };
102
103 // parse picture index and gallery index from URL (#&pid=1&gid=2)
104 var photoswipeParseHash = function() {
105 var hash = window.location.hash.substring(1),
106 params = {};
107
108 if(hash.length < 5) {
109 return params;
110 }
111
112 var vars = hash.split(‘&‘);
113 for (var i = 0; i < vars.length; i++) {
114 if(!vars[i]) {
115 continue;
116 }
117 var pair = vars[i].split(‘=‘);
118 if(pair.length < 2) {
119 continue;
120 }
121 params[pair[0]] = pair[1];
122 }
123
124 if(params.gid) {
125 params.gid = parseInt(params.gid, 10);
126 }
127
128 return params;
129 };
130
131 var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
132 var pswpElement = document.querySelectorAll(‘.pswp‘)[0],
133 gallery,
134 options,
135 items;
136
137 items = parseThumbnailElements(galleryElement);
138
139 // define options (if needed)
140 options = {
141
142 // define gallery index (for URL)
143 galleryUID: galleryElement.getAttribute(‘data-pswp-uid‘),
144
145 getThumbBoundsFn: function(index) {
146 // See Options -> getThumbBoundsFn section of documentation for more info
147 var thumbnail = items[index].el.getElementsByTagName(‘img‘)[0], // find thumbnail
148 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
149 rect = thumbnail.getBoundingClientRect();
150
151 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
152 }
153
154 };
155
156 // PhotoSwipe opened from URL
157 if(fromURL) {
158 if(options.galleryPIDs) {
159 // parse real index when custom PIDs are used
160 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
161 for(var j = 0; j < items.length; j++) {
162 if(items[j].pid == index) {
163 options.index = j;
164 break;
165 }
166 }
167 } else {
168 // in URL indexes start from 1
169 options.index = parseInt(index, 10) - 1;
170 }
171 } else {
172 options.index = parseInt(index, 10);
173 }
174
175 // exit if index not found
176 if( isNaN(options.index) ) {
177 return;
178 }
179
180 if(disableAnimation) {
181 options.showAnimationDuration = 0;
182 }
183
184 // Pass data to PhotoSwipe and initialize it
185 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
186 gallery.init();
187 };
188
189 // loop through all gallery elements and bind events
190 var galleryElements = document.querySelectorAll( gallerySelector );
191
192 for(var i = 0, l = galleryElements.length; i < l; i++) {
193 galleryElements[i].setAttribute(‘data-pswp-uid‘, i+1);
194 galleryElements[i].onclick = onThumbnailsClick;
195 }
196
197 // Parse URL and open gallery if it contains #&pid=3&gid=1
198 var hashData = photoswipeParseHash();
199 if(hashData.pid && hashData.gid) {
200 openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
201 }
202 };
203
204 // execute above function
205 initPhotoSwipeFromDOM(‘.my-gallery‘);
例如在CodePen（重点和历史选项被禁用，由于嵌入的问题）：
1 <h2>First gallery:</h2> 2 3 <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 4 5 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 6 <a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024"> 7 <img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" /> 8 </a> 9 <figcaption itemprop="caption description">Image caption 1</figcaption> 10 11 </figure> 12 13 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 14 <a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024"> 15 <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" /> 16 </a> 17 <figcaption itemprop="caption description">Image caption 2</figcaption> 18 </figure> 19 20 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 21 <a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683"> 22 <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" /> 23 </a> 24 <figcaption itemprop="caption description">Image caption 3</figcaption> 25 </figure> 26 27 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 28 <a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768"> 29 <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" /> 30 </a> 31 <figcaption itemprop="caption description">Image caption 4</figcaption> 32 </figure> 33 34 35 </div> 36 37 <h2>Second gallery:</h2> 38 39 <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 40 41 42 43 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 44 <a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024"> 45 <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" /> 46 </a> 47 <figcaption itemprop="caption description">Image caption 2.1</figcaption> 48 </figure> 49 50 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 51 <a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683"> 52 <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" /> 53 </a> 54 <figcaption itemprop="caption description">Image caption 2.2</figcaption> 55 </figure> 56 57 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 58 <a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768"> 59 <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" /> 60 </a> 61 <figcaption itemprop="caption description">Image caption 2.3</figcaption> 62 </figure> 63 64 65 </div> 66 67 68 69 <!-- Root element of PhotoSwipe. Must have class pswp. --> 70 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 71 72 <!-- Background of PhotoSwipe. 73 It‘s a separate element, as animating opacity is faster than rgba(). --> 74 <div class="pswp__bg"></div> 75 76 <!-- Slides wrapper with overflow:hidden. --> 77 <div class="pswp__scroll-wrap"> 78 79 <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> 80 <!-- don‘t modify these 3 pswp__item elements, data is added later on. --> 81 <div class="pswp__container"> 82 <div class="pswp__item"></div> 83 <div class="pswp__item"></div> 84 <div class="pswp__item"></div> 85 </div> 86 87 <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 88 <div class="pswp__ui pswp__ui--hidden"> 89 90 <div class="pswp__top-bar"> 91 92 <!-- Controls are self-explanatory. Order can be changed. --> 93 94 <div class="pswp__counter"></div> 95 96 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 97 98 <button class="pswp__button pswp__button--share" title="Share"></button> 99 100 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 101 102 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 103 104 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> 105 <!-- element will get class pswp__preloader--active when preloader is running --> 106 <div class="pswp__preloader"> 107 <div class="pswp__preloader__icn"> 108 <div class="pswp__preloader__cut"> 109 <div class="pswp__preloader__donut"></div> 110 </div> 111 </div> 112 </div> 113 </div> 114 115 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 116 <div class="pswp__share-tooltip"></div> 117 </div> 118 119 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 120 </button> 121 122 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 123 </button> 124 125 <div class="pswp__caption"> 126 <div class="pswp__caption__center"></div> 127 </div> 128 129 </div> 130 131 </div> 132 133 </div>
1 .my-gallery {
2 width: 100%;
3 float: left;
4 }
5 .my-gallery img {
6 width: 100%;
7 height: auto;
8 }
9 .my-gallery figure {
10 display: block;
11 float: left;
12 margin: 0 5px 5px 0;
13 width: 150px;
14 }
15 .my-gallery figcaption {
16 display: none;
17 }
1 var initPhotoSwipeFromDOM = function(gallerySelector) {
2
3 // parse slide data (url, title, size ...) from DOM elements
4 // (children of gallerySelector)
5 var parseThumbnailElements = function(el) {
6 var thumbElements = el.childNodes,
7 numNodes = thumbElements.length,
8 items = [],
9 figureEl,
10 linkEl,
11 size,
12 item;
13
14 for(var i = 0; i < numNodes; i++) {
15
16 figureEl = thumbElements[i]; // <figure> element
17
18 // include only element nodes
19 if(figureEl.nodeType !== 1) {
20 continue;
21 }
22
23 linkEl = figureEl.children[0]; // <a> element
24
25 size = linkEl.getAttribute(‘data-size‘).split(‘x‘);
26
27 // create slide object
28 item = {
29 src: linkEl.getAttribute(‘href‘),
30 w: parseInt(size[0], 10),
31 h: parseInt(size[1], 10)
32 };
33
34
35
36 if(figureEl.children.length > 1) {
37 // <figcaption> content
38 item.title = figureEl.children[1].innerHTML;
39 }
40
41 if(linkEl.children.length > 0) {
42 // <img> thumbnail element, retrieving thumbnail url
43 item.msrc = linkEl.children[0].getAttribute(‘src‘);
44 }
45
46 item.el = figureEl; // save link to element for getThumbBoundsFn
47 items.push(item);
48 }
49
50 return items;
51 };
52
53 // find nearest parent element
54 var closest = function closest(el, fn) {
55 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
56 };
57
58 // triggers when user clicks on thumbnail
59 var onThumbnailsClick = function(e) {
60 e = e || window.event;
61 e.preventDefault ? e.preventDefault() : e.returnValue = false;
62
63 var eTarget = e.target || e.srcElement;
64
65 // find root element of slide
66 var clickedListItem = closest(eTarget, function(el) {
67 return (el.tagName && el.tagName.toUpperCase() === ‘FIGURE‘);
68 });
69
70 if(!clickedListItem) {
71 return;
72 }
73
74 // find index of clicked item by looping through all child nodes
75 // alternatively, you may define index via data- attribute
76 var clickedGallery = clickedListItem.parentNode,
77 childNodes = clickedListItem.parentNode.childNodes,
78 numChildNodes = childNodes.length,
79 nodeIndex = 0,
80 index;
81
82 for (var i = 0; i < numChildNodes; i++) {
83 if(childNodes[i].nodeType !== 1) {
84 continue;
85 }
86
87 if(childNodes[i] === clickedListItem) {
88 index = nodeIndex;
89 break;
90 }
91 nodeIndex++;
92 }
93
94
95
96 if(index >= 0) {
97 // open PhotoSwipe if valid index found
98 openPhotoSwipe( index, clickedGallery );
99 }
100 return false;
101 };
102
103 // parse picture index and gallery index from URL (#&pid=1&gid=2)
104 var photoswipeParseHash = function() {
105 var hash = window.location.hash.substring(1),
106 params = {};
107
108 if(hash.length < 5) {
109 return params;
110 }
111
112 var vars = hash.split(‘&‘);
113 for (var i = 0; i < vars.length; i++) {
114 if(!vars[i]) {
115 continue;
116 }
117 var pair = vars[i].split(‘=‘);
118 if(pair.length < 2) {
119 continue;
120 }
121 params[pair[0]] = pair[1];
122 }
123
124 if(params.gid) {
125 params.gid = parseInt(params.gid, 10);
126 }
127
128 return params;
129 };
130
131 var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
132 var pswpElement = document.querySelectorAll(‘.pswp‘)[0],
133 gallery,
134 options,
135 items;
136
137 items = parseThumbnailElements(galleryElement);
138
139 // define options (if needed)
140 options = {
141
142 // define gallery index (for URL)
143 galleryUID: galleryElement.getAttribute(‘data-pswp-uid‘),
144
145 getThumbBoundsFn: function(index) {
146 // See Options -> getThumbBoundsFn section of documentation for more info
147 var thumbnail = items[index].el.getElementsByTagName(‘img‘)[0], // find thumbnail
148 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
149 rect = thumbnail.getBoundingClientRect();
150
151 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
152 }
153
154 };
155
156 // PhotoSwipe opened from URL
157 if(fromURL) {
158 if(options.galleryPIDs) {
159 // parse real index when custom PIDs are used
160 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
161 for(var j = 0; j < items.length; j++) {
162 if(items[j].pid == index) {
163 options.index = j;
164 break;
165 }
166 }
167 } else {
168 // in URL indexes start from 1
169 options.index = parseInt(index, 10) - 1;
170 }
171 } else {
172 options.index = parseInt(index, 10);
173 }
174
175 // exit if index not found
176 if( isNaN(options.index) ) {
177 return;
178 }
179
180 if(disableAnimation) {
181 options.showAnimationDuration = 0;
182 }
183
184 // Pass data to PhotoSwipe and initialize it
185 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
186 gallery.init();
187 };
188
189 // loop through all gallery elements and bind events
190 var galleryElements = document.querySelectorAll( gallerySelector );
191
192 for(var i = 0, l = galleryElements.length; i < l; i++) {
193 galleryElements[i].setAttribute(‘data-pswp-uid‘, i+1);
194 galleryElements[i].onclick = onThumbnailsClick;
195 }
196
197 // Parse URL and open gallery if it contains #&pid=3&gid=1
198 var hashData = photoswipeParseHash();
199 if(hashData.pid && hashData.gid) {
200 openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
201 }
202 };
203
204 // execute above function
205 initPhotoSwipeFromDOM(‘.my-gallery‘);
提示：您可以从CodePen例如下载在本地发挥它（编辑上CodePen - >分享 - >导出.zip文件）。
如果您使用的标记，从这个例子不同，你需要编辑功能解析缩略图元素。
如果你没有在纯JavaScript经验，不知道如何解析DOM，请参阅怪异模式和文档在MSDN上。
需要注意的是IE8不支持HTML5<图>和<figcaption>元素，所以你需要在<head>部分（托管版本的例子中使用cdnjs）html5shiv：
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
时间： 2024-09-30 19:22:14