teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Photoswipeの矢印が消えたので復活したい

編集履歴

質問編集履歴

5

javascriptコピーし直し

2021/09/14 13:35

投稿

bbtdp027
bbtdp027

スコア10

title CHANGED
File without changes
body CHANGED
@@ -69,206 +69,190 @@
69
69
  option: 'arrowEl',
70
70
  onTap: pswp.next
71
71
  },
72
- var initPhotoSwipeFromDOM = function (gallerySelector) {
72
+ var initPhotoSwipeFromDOM = function( gallerySelector ) {
73
73
 
74
- // parse slide data (url, title, size ...) from DOM elements
74
+ // parse slide data (url, title, size ...) from DOM elements
75
- // (children of gallerySelector)
75
+ // (children of gallerySelector)
76
- var parseThumbnailElements = function (el) {
76
+ var parseThumbnailElements = function(el) {
77
- var thumbElements = el.childNodes,
77
+ var thumbElements = el.childNodes,
78
- numNodes = thumbElements.length,
78
+ numNodes = thumbElements.length,
79
- items = [],
79
+ items = [],
80
- figureEl,
80
+ figureEl,
81
- linkEl,
81
+ linkEl,
82
- size,
82
+ size,
83
- item;
83
+ item;
84
84
 
85
- for (var i = 0; i < numNodes; i++) {
85
+ for(var i = 0; i < numNodes; i++) {
86
86
 
87
- figureEl = thumbElements[i]; // <figure> element
87
+ figureEl = thumbElements[i]; // <figure> element
88
88
 
89
- // include only element nodes
89
+ // include only element nodes
90
- if (figureEl.nodeType !== 1) {
90
+ if(figureEl.nodeType !== 1) {
91
- continue;
91
+ continue;
92
- }
92
+ }
93
93
 
94
- linkEl = figureEl.children[0]; // <a> element
94
+ linkEl = figureEl.children[0]; // <a> element
95
95
 
96
- size = linkEl.getAttribute('data-size').split('x');
96
+ size = linkEl.getAttribute('data-size').split('x');
97
97
 
98
- // create slide object
98
+ // create slide object
99
- item = {
99
+ item = {
100
- src: linkEl.getAttribute('href'),
100
+ src: linkEl.getAttribute('href'),
101
- w: parseInt(size[0], 10),
101
+ w: parseInt(size[0], 10),
102
- h: parseInt(size[1], 10)
102
+ h: parseInt(size[1], 10)
103
- };
103
+ };
104
104
 
105
105
 
106
106
 
107
- if (figureEl.children.length > 1) {
107
+ if(figureEl.children.length > 1) {
108
- // <figcaption> content
108
+ // <figcaption> content
109
- item.title = figureEl.children[1].innerHTML;
109
+ item.title = figureEl.children[1].innerHTML;
110
- }
110
+ }
111
111
 
112
- if (linkEl.children.length > 0) {
112
+ if(linkEl.children.length > 0) {
113
- // <img> thumbnail element, retrieving thumbnail url
113
+ // <img> thumbnail element, retrieving thumbnail url
114
- item.msrc = linkEl.children[0].getAttribute('src');
114
+ item.msrc = linkEl.children[0].getAttribute('src');
115
- }
115
+ }
116
116
 
117
- item.el = figureEl; // save link to element for getThumbBoundsFn
117
+ item.el = figureEl; // save link to element for getThumbBoundsFn
118
- items.push(item);
118
+ items.push(item);
119
- }
119
+ }
120
120
 
121
- return items;
121
+ return items;
122
- };
122
+ };
123
123
 
124
- // find nearest parent element
124
+ // find nearest parent element
125
- var closest = function closest(el, fn) {
125
+ var closest = function closest(el, fn) {
126
- return el && (fn(el) ? el : closest(el.parentNode, fn));
126
+ return el && ( fn(el) ? el : closest(el.parentNode, fn) );
127
- };
127
+ };
128
128
 
129
- // triggers when user clicks on thumbnail
129
+ // triggers when user clicks on thumbnail
130
- var onThumbnailsClick = function (e) {
130
+ var onThumbnailsClick = function(e) {
131
- e = e || window.event;
131
+ e = e || window.event;
132
- e.preventDefault ? e.preventDefault() : e.returnValue = false;
132
+ e.preventDefault ? e.preventDefault() : e.returnValue = false;
133
133
 
134
- var eTarget = e.target || e.srcElement;
134
+ var eTarget = e.target || e.srcElement;
135
135
 
136
- // find root element of slide
136
+ // find root element of slide
137
- var clickedListItem = closest(eTarget, function (el) {
137
+ var clickedListItem = closest(eTarget, function(el) {
138
- return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
138
+ return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
139
- });
139
+ });
140
140
 
141
- if (!clickedListItem) {
141
+ if(!clickedListItem) {
142
- return;
142
+ return;
143
- }
143
+ }
144
144
 
145
- // find index of clicked item by looping through all child nodes
145
+ // find index of clicked item by looping through all child nodes
146
- // alternatively, you may define index via data- attribute
146
+ // alternatively, you may define index via data- attribute
147
- var clickedGallery = clickedListItem.parentNode,
147
+ var clickedGallery = clickedListItem.parentNode,
148
- childNodes = clickedListItem.parentNode.childNodes,
148
+ childNodes = clickedListItem.parentNode.childNodes,
149
- numChildNodes = childNodes.length,
149
+ numChildNodes = childNodes.length,
150
- nodeIndex = 0,
150
+ nodeIndex = 0,
151
- index;
151
+ index;
152
152
 
153
- for (var i = 0; i < numChildNodes; i++) {
153
+ for (var i = 0; i < numChildNodes; i++) {
154
- if (childNodes[i].nodeType !== 1) {
154
+ if(childNodes[i].nodeType !== 1) {
155
- continue;
155
+ continue;
156
- }
156
+ }
157
157
 
158
- if (childNodes[i] === clickedListItem) {
158
+ if(childNodes[i] === clickedListItem) {
159
- index = nodeIndex;
159
+ index = nodeIndex;
160
- break;
160
+ break;
161
- }
161
+ }
162
- nodeIndex++;
162
+ nodeIndex++;
163
- }
163
+ }
164
164
 
165
165
 
166
166
 
167
- if (index >= 0) {
167
+ if(index >= 0) {
168
- // open PhotoSwipe if valid index found
168
+ // open PhotoSwipe if valid index found
169
- openPhotoSwipe(index, clickedGallery);
169
+ openPhotoSwipe( index, clickedGallery );
170
- }
170
+ }
171
- return false;
171
+ return false;
172
- };
172
+ };
173
173
 
174
- // parse picture index and gallery index from URL (#&pid=1&gid=2)
174
+ // parse picture index and gallery index from URL (#&pid=1&gid=2)
175
- var photoswipeParseHash = function () {
175
+ var photoswipeParseHash = function() {
176
- var hash = window.location.hash.substring(1),
176
+ var hash = window.location.hash.substring(1),
177
- params = {};
177
+ params = {};
178
178
 
179
- if (hash.length < 5) {
179
+ if(hash.length < 5) {
180
- return params;
180
+ return params;
181
- }
181
+ }
182
182
 
183
- var vars = hash.split('&');
183
+ var vars = hash.split('&');
184
- for (var i = 0; i < vars.length; i++) {
184
+ for (var i = 0; i < vars.length; i++) {
185
- if (!vars[i]) {
185
+ if(!vars[i]) {
186
- continue;
186
+ continue;
187
- }
187
+ }
188
- var pair = vars[i].split('=');
188
+ var pair = vars[i].split('=');
189
- if (pair.length < 2) {
189
+ if(pair.length < 2) {
190
- continue;
190
+ continue;
191
- }
191
+ }
192
- params[pair[0]] = pair[1];
192
+ params[pair[0]] = pair[1];
193
- }
193
+ }
194
194
 
195
- if (params.gid) {
195
+ if(params.gid) {
196
- params.gid = parseInt(params.gid, 10);
196
+ params.gid = parseInt(params.gid, 10);
197
- }
197
+ }
198
198
 
199
+ if(!params.hasOwnProperty('pid')) {
199
- return params;
200
+ return params;
201
+ }
202
+ params.pid = parseInt(params.pid, 10);
203
+ return params;
200
- };
204
+ };
201
205
 
202
- var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
206
+ var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
203
- var pswpElement = document.querySelectorAll('.pswp')[0],
207
+ var pswpElement = document.querySelectorAll('.pswp')[0],
204
- gallery,
208
+ gallery,
205
- options,
209
+ options,
206
- items;
210
+ items;
207
211
 
208
- items = parseThumbnailElements(galleryElement);
212
+ items = parseThumbnailElements(galleryElement);
209
213
 
210
- // define options (if needed)
214
+ // define options (if needed)
211
- options = {
215
+ options = {
216
+ index: index,
212
217
 
213
- // define gallery index (for URL)
218
+ // define gallery index (for URL)
214
- galleryUID: galleryElement.getAttribute('data-pswp-uid'),
219
+ galleryUID: galleryElement.getAttribute('data-pswp-uid'),
215
220
 
216
- getThumbBoundsFn: function (index) {
221
+ getThumbBoundsFn: function(index) {
217
- // See Options -> getThumbBoundsFn section of documentation for more info
222
+ // See Options -> getThumbBoundsFn section of documentation for more info
218
- var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
223
+ var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
219
- pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
224
+ pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
220
- rect = thumbnail.getBoundingClientRect();
225
+ rect = thumbnail.getBoundingClientRect();
221
226
 
222
- return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
227
+ return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
223
- }
228
+ }
224
229
 
225
- };
230
+ };
226
231
 
227
- // PhotoSwipe opened from URL
228
- if (fromURL) {
229
- if (options.galleryPIDs) {
232
+ if(disableAnimation) {
230
- // parse real index when custom PIDs are used
231
- // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
232
- for (var j = 0; j < items.length; j++) {
233
- if (items[j].pid == index) {
234
- options.index = j;
233
+ options.showAnimationDuration = 0;
235
- break;
236
- }
237
234
  }
238
- } else {
239
- // in URL indexes start from 1
240
- options.index = parseInt(index, 10) - 1;
241
- }
242
- } else {
243
- options.index = parseInt(index, 10);
244
- }
245
235
 
246
- // exit if index not found
236
+ // Pass data to PhotoSwipe and initialize it
237
+ gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
247
- if (isNaN(options.index)) {
238
+ gallery.init();
248
- return;
239
+ };
240
+
241
+ // loop through all gallery elements and bind events
242
+ var galleryElements = document.querySelectorAll( gallerySelector );
243
+
244
+ for(var i = 0, l = galleryElements.length; i < l; i++) {
245
+ galleryElements[i].setAttribute('data-pswp-uid', i+1);
246
+ galleryElements[i].onclick = onThumbnailsClick;
249
247
  }
250
248
 
251
- if (disableAnimation) {
249
+ // Parse URL and open gallery if it contains #&pid=3&gid=1
252
- options.showAnimationDuration = 0;
250
+ var hashData = photoswipeParseHash();
251
+ if(hashData.pid > 0 && hashData.gid > 0) {
252
+ openPhotoSwipe( hashData.pid - 1 , galleryElements[ hashData.gid - 1 ], true );
253
253
  }
254
+ };
254
255
 
255
- // Pass data to PhotoSwipe and initialize it
256
+ // PhotoSwipeを起動する
256
- gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
257
- gallery.init();
258
- };
259
-
260
- // loop through all gallery elements and bind events
261
- var galleryElements = document.querySelectorAll(gallerySelector);
262
-
263
- for (var i = 0, l = galleryElements.length; i < l; i++) {
264
- galleryElements[i].setAttribute('data-pswp-uid', i + 1);
257
+ initPhotoSwipeFromDOM( '.my-gallery' ) ;
265
- galleryElements[i].onclick = onThumbnailsClick;
266
- }
267
-
268
- // Parse URL and open gallery if it contains #&pid=3&gid=1
269
- var hashData = photoswipeParseHash();
270
- if (hashData.pid && hashData.gid) {
271
- openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
272
- }
273
- };
274
258
  ```

4

javascript追記

2021/09/14 13:35

投稿

bbtdp027
bbtdp027

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  どこをいじって消えてしまったのかわからず、。見た目だけならｃｓｓでdisplay：ｎｏｎｅをけしたら出てきましたがスワイプしません。どのあたりを確認したら良いのか教えていただきたいです。
2
+ ```ここに言語を入力
2
- ```<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
3
+ <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
3
4
  <div class="pswp__bg"></div>
4
5
  <div class="pswp__scroll-wrap">
5
6
  <div class="pswp__container">
@@ -68,8 +69,186 @@
68
69
  option: 'arrowEl',
69
70
  onTap: pswp.next
70
71
  },
72
+ var initPhotoSwipeFromDOM = function (gallerySelector) {
71
73
 
74
+ // parse slide data (url, title, size ...) from DOM elements
75
+ // (children of gallerySelector)
76
+ var parseThumbnailElements = function (el) {
77
+ var thumbElements = el.childNodes,
78
+ numNodes = thumbElements.length,
79
+ items = [],
80
+ figureEl,
81
+ linkEl,
82
+ size,
83
+ item;
84
+
85
+ for (var i = 0; i < numNodes; i++) {
86
+
87
+ figureEl = thumbElements[i]; // <figure> element
88
+
89
+ // include only element nodes
90
+ if (figureEl.nodeType !== 1) {
91
+ continue;
92
+ }
93
+
94
+ linkEl = figureEl.children[0]; // <a> element
95
+
96
+ size = linkEl.getAttribute('data-size').split('x');
97
+
98
+ // create slide object
99
+ item = {
100
+ src: linkEl.getAttribute('href'),
101
+ w: parseInt(size[0], 10),
102
+ h: parseInt(size[1], 10)
103
+ };
104
+
105
+
106
+
107
+ if (figureEl.children.length > 1) {
108
+ // <figcaption> content
109
+ item.title = figureEl.children[1].innerHTML;
110
+ }
111
+
112
+ if (linkEl.children.length > 0) {
113
+ // <img> thumbnail element, retrieving thumbnail url
114
+ item.msrc = linkEl.children[0].getAttribute('src');
115
+ }
116
+
117
+ item.el = figureEl; // save link to element for getThumbBoundsFn
118
+ items.push(item);
119
+ }
120
+
121
+ return items;
122
+ };
123
+
124
+ // find nearest parent element
125
+ var closest = function closest(el, fn) {
126
+ return el && (fn(el) ? el : closest(el.parentNode, fn));
127
+ };
128
+
129
+ // triggers when user clicks on thumbnail
130
+ var onThumbnailsClick = function (e) {
131
+ e = e || window.event;
132
+ e.preventDefault ? e.preventDefault() : e.returnValue = false;
133
+
134
+ var eTarget = e.target || e.srcElement;
135
+
136
+ // find root element of slide
137
+ var clickedListItem = closest(eTarget, function (el) {
138
+ return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
139
+ });
140
+
141
+ if (!clickedListItem) {
142
+ return;
143
+ }
144
+
145
+ // find index of clicked item by looping through all child nodes
146
+ // alternatively, you may define index via data- attribute
147
+ var clickedGallery = clickedListItem.parentNode,
148
+ childNodes = clickedListItem.parentNode.childNodes,
149
+ numChildNodes = childNodes.length,
150
+ nodeIndex = 0,
151
+ index;
152
+
153
+ for (var i = 0; i < numChildNodes; i++) {
154
+ if (childNodes[i].nodeType !== 1) {
155
+ continue;
156
+ }
157
+
158
+ if (childNodes[i] === clickedListItem) {
159
+ index = nodeIndex;
160
+ break;
161
+ }
162
+ nodeIndex++;
163
+ }
164
+
165
+
166
+
167
+ if (index >= 0) {
168
+ // open PhotoSwipe if valid index found
169
+ openPhotoSwipe(index, clickedGallery);
170
+ }
171
+ return false;
172
+ };
173
+
174
+ // parse picture index and gallery index from URL (#&pid=1&gid=2)
175
+ var photoswipeParseHash = function () {
176
+ var hash = window.location.hash.substring(1),
177
+ params = {};
178
+
179
+ if (hash.length < 5) {
180
+ return params;
181
+ }
182
+
183
+ var vars = hash.split('&');
184
+ for (var i = 0; i < vars.length; i++) {
185
+ if (!vars[i]) {
186
+ continue;
187
+ }
188
+ var pair = vars[i].split('=');
189
+ if (pair.length < 2) {
190
+ continue;
191
+ }
192
+ params[pair[0]] = pair[1];
193
+ }
194
+
195
+ if (params.gid) {
196
+ params.gid = parseInt(params.gid, 10);
197
+ }
198
+
199
+ return params;
200
+ };
201
+
202
+ var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
203
+ var pswpElement = document.querySelectorAll('.pswp')[0],
204
+ gallery,
205
+ options,
206
+ items;
207
+
208
+ items = parseThumbnailElements(galleryElement);
209
+
210
+ // define options (if needed)
211
+ options = {
212
+
213
+ // define gallery index (for URL)
214
+ galleryUID: galleryElement.getAttribute('data-pswp-uid'),
215
+
216
+ getThumbBoundsFn: function (index) {
217
+ // See Options -> getThumbBoundsFn section of documentation for more info
218
+ var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
219
+ pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
220
+ rect = thumbnail.getBoundingClientRect();
221
+
222
+ return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
223
+ }
224
+
225
+ };
226
+
227
+ // PhotoSwipe opened from URL
228
+ if (fromURL) {
229
+ if (options.galleryPIDs) {
230
+ // parse real index when custom PIDs are used
231
+ // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
232
+ for (var j = 0; j < items.length; j++) {
233
+ if (items[j].pid == index) {
234
+ options.index = j;
235
+ break;
236
+ }
237
+ }
238
+ } else {
239
+ // in URL indexes start from 1
240
+ options.index = parseInt(index, 10) - 1;
241
+ }
242
+ } else {
243
+ options.index = parseInt(index, 10);
244
+ }
245
+
246
+ // exit if index not found
247
+ if (isNaN(options.index)) {
248
+ return;
249
+ }
250
+
72
- ``if (disableAnimation) {
251
+ if (disableAnimation) {
73
252
  options.showAnimationDuration = 0;
74
253
  }
75
254
 
@@ -91,5 +270,5 @@
91
270
  if (hashData.pid && hashData.gid) {
92
271
  openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
93
272
  }
94
- };```
273
+ };
95
274
  ```

3

javascript追記

2021/09/14 09:31

投稿

bbtdp027
bbtdp027

スコア10

title CHANGED
File without changes
body CHANGED
@@ -68,8 +68,8 @@
68
68
  option: 'arrowEl',
69
69
  onTap: pswp.next
70
70
  },
71
- ``````ここに言語を入力
71
+
72
- if (disableAnimation) {
72
+ ``if (disableAnimation) {
73
73
  options.showAnimationDuration = 0;
74
74
  }
75
75
 

2

javascript追記

2021/09/14 09:04

投稿

bbtdp027
bbtdp027

スコア10

title CHANGED
File without changes
body CHANGED
@@ -68,4 +68,28 @@
68
68
  option: 'arrowEl',
69
69
  onTap: pswp.next
70
70
  },
71
+ ``````ここに言語を入力
72
+ if (disableAnimation) {
73
+ options.showAnimationDuration = 0;
74
+ }
75
+
76
+ // Pass data to PhotoSwipe and initialize it
77
+ gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
78
+ gallery.init();
79
+ };
80
+
81
+ // loop through all gallery elements and bind events
82
+ var galleryElements = document.querySelectorAll(gallerySelector);
83
+
84
+ for (var i = 0, l = galleryElements.length; i < l; i++) {
85
+ galleryElements[i].setAttribute('data-pswp-uid', i + 1);
86
+ galleryElements[i].onclick = onThumbnailsClick;
87
+ }
88
+
89
+ // Parse URL and open gallery if it contains #&pid=3&gid=1
90
+ var hashData = photoswipeParseHash();
91
+ if (hashData.pid && hashData.gid) {
92
+ openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
93
+ }
94
+ };```
71
95
  ```

1

すみません、直しました！

2021/09/14 09:03

投稿

bbtdp027
bbtdp027

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  どこをいじって消えてしまったのかわからず、。見た目だけならｃｓｓでdisplay：ｎｏｎｅをけしたら出てきましたがスワイプしません。どのあたりを確認したら良いのか教えていただきたいです。
2
- <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
2
+ ```<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
3
3
  <div class="pswp__bg"></div>
4
4
  <div class="pswp__scroll-wrap">
5
5
  <div class="pswp__container">
@@ -67,6 +67,5 @@
67
67
  name: 'button--arrow--right',
68
68
  option: 'arrowEl',
69
69
  onTap: pswp.next
70
- },ここに言語を入力
71
- コード
70
+ },
72
71
  ```