編集履歴

質問編集履歴

javascriptコピーし直し

2021/09/14 13:35

投稿

bbtdp027

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -140,408 +140,376 @@
 		},
-var initPhotoSwipeFromDOM = function (gallerySelector) {
-  // parse slide data (url, title, size ...) from DOM elements
-  // (children of gallerySelector)
-  var parseThumbnailElements = function (el) {
-    var thumbElements = el.childNodes,
-      numNodes = thumbElements.length,
-      items = [],
-      figureEl,
-      linkEl,
-      size,
-      item;
-    for (var i = 0; i < numNodes; i++) {
-      figureEl = thumbElements[i]; // <figure> element
-      // include only element nodes
-      if (figureEl.nodeType !== 1) {
-        continue;
-      }
-      linkEl = figureEl.children[0]; // <a> element
-      size = linkEl.getAttribute('data-size').split('x');
-      // create slide object
-      item = {
-        src: linkEl.getAttribute('href'),
-        w: parseInt(size[0], 10),
-        h: parseInt(size[1], 10)
-      };
-      if (figureEl.children.length > 1) {
-        // <figcaption> content
-        item.title = figureEl.children[1].innerHTML;
-      }
-      if (linkEl.children.length > 0) {
-        // <img> thumbnail element, retrieving thumbnail url
-        item.msrc = linkEl.children[0].getAttribute('src');
-      }
-      item.el = figureEl; // save link to element for getThumbBoundsFn
-      items.push(item);
+var initPhotoSwipeFromDOM = function( gallerySelector ) {
+    // parse slide data (url, title, size ...) from DOM elements
+    // (children of gallerySelector)
+    var parseThumbnailElements = function(el) {
+        var thumbElements = el.childNodes,
+            numNodes = thumbElements.length,
+            items = [],
+            figureEl,
+            linkEl,
+            size,
+            item;
+        for(var i = 0; i < numNodes; i++) {
+            figureEl = thumbElements[i]; // <figure> element
+            // include only element nodes
+            if(figureEl.nodeType !== 1) {
+                continue;
+            }
+            linkEl = figureEl.children[0]; // <a> element
+            size = linkEl.getAttribute('data-size').split('x');
+            // create slide object
+            item = {
+                src: linkEl.getAttribute('href'),
+                w: parseInt(size[0], 10),
+                h: parseInt(size[1], 10)
+            };
+            if(figureEl.children.length > 1) {
+                // <figcaption> content
+                item.title = figureEl.children[1].innerHTML;
+            }
+            if(linkEl.children.length > 0) {
+                // <img> thumbnail element, retrieving thumbnail url
+                item.msrc = linkEl.children[0].getAttribute('src');
+            }
+            item.el = figureEl; // save link to element for getThumbBoundsFn
+            items.push(item);
+        }
+        return items;
+    };
+    // find nearest parent element
+    var closest = function closest(el, fn) {
+        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
+    };
+    // triggers when user clicks on thumbnail
+    var onThumbnailsClick = function(e) {
+        e = e || window.event;
+        e.preventDefault ? e.preventDefault() : e.returnValue = false;
+        var eTarget = e.target || e.srcElement;
+        // find root element of slide
+        var clickedListItem = closest(eTarget, function(el) {
+            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+        });
+        if(!clickedListItem) {
+            return;
+        }
+        // find index of clicked item by looping through all child nodes
+        // alternatively, you may define index via data- attribute
+        var clickedGallery = clickedListItem.parentNode,
+            childNodes = clickedListItem.parentNode.childNodes,
+            numChildNodes = childNodes.length,
+            nodeIndex = 0,
+            index;
+        for (var i = 0; i < numChildNodes; i++) {
+            if(childNodes[i].nodeType !== 1) {
+                continue;
+            }
+            if(childNodes[i] === clickedListItem) {
+                index = nodeIndex;
+                break;
+            }
+            nodeIndex++;
+        }
+        if(index >= 0) {
+            // open PhotoSwipe if valid index found
+            openPhotoSwipe( index, clickedGallery );
+        }
+        return false;
+    };
+    // parse picture index and gallery index from URL (#&pid=1&gid=2)
+    var photoswipeParseHash = function() {
+        var hash = window.location.hash.substring(1),
+        params = {};
+        if(hash.length < 5) {
+            return params;
+        }
+        var vars = hash.split('&');
+        for (var i = 0; i < vars.length; i++) {
+            if(!vars[i]) {
+                continue;
+            }
+            var pair = vars[i].split('=');
+            if(pair.length < 2) {
+                continue;
+            }
+            params[pair[0]] = pair[1];
+        }
+        if(params.gid) {
+            params.gid = parseInt(params.gid, 10);
+        }
+        if(!params.hasOwnProperty('pid')) {
+            return params;
+        }
+        params.pid = parseInt(params.pid, 10);
+        return params;
+    };
+    var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
+        var pswpElement = document.querySelectorAll('.pswp')[0],
+            gallery,
+            options,
+            items;
+        items = parseThumbnailElements(galleryElement);
+        // define options (if needed)
+        options = {
+            index: index,
+            // define gallery index (for URL)
+            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+            getThumbBoundsFn: function(index) {
+                // See Options -> getThumbBoundsFn section of documentation for more info
+                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                    rect = thumbnail.getBoundingClientRect();
+                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+            }
+        };
+        if(disableAnimation) {
+            options.showAnimationDuration = 0;
+        }
+        // Pass data to PhotoSwipe and initialize it
+        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+        gallery.init();
+    };
+    // loop through all gallery elements and bind events
+    var galleryElements = document.querySelectorAll( gallerySelector );
+    for(var i = 0, l = galleryElements.length; i < l; i++) {
+        galleryElements[i].setAttribute('data-pswp-uid', i+1);
+        galleryElements[i].onclick = onThumbnailsClick;
     }
-    return items;
-  };
-  // find nearest parent element
+    // Parse URL and open gallery if it contains #&pid=3&gid=1
-  var closest = function closest(el, fn) {
+    var hashData = photoswipeParseHash();
+    if(hashData.pid > 0 && hashData.gid > 0) {
-    return el && (fn(el) ? el : closest(el.parentNode, fn));
+        openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
-  };
-  // triggers when user clicks on thumbnail
-  var onThumbnailsClick = function (e) {
-    e = e || window.event;
-    e.preventDefault ? e.preventDefault() : e.returnValue = false;
-    var eTarget = e.target || e.srcElement;
-    // find root element of slide
-    var clickedListItem = closest(eTarget, function (el) {
-      return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
-    });
-    if (!clickedListItem) {
-      return;
     }
-    // find index of clicked item by looping through all child nodes
-    // alternatively, you may define index via data- attribute
-    var clickedGallery = clickedListItem.parentNode,
-      childNodes = clickedListItem.parentNode.childNodes,
-      numChildNodes = childNodes.length,
-      nodeIndex = 0,
-      index;
-    for (var i = 0; i < numChildNodes; i++) {
-      if (childNodes[i].nodeType !== 1) {
-        continue;
-      }
-      if (childNodes[i] === clickedListItem) {
-        index = nodeIndex;
-        break;
-      }
-      nodeIndex++;
-    }
-    if (index >= 0) {
-      // open PhotoSwipe if valid index found
-      openPhotoSwipe(index, clickedGallery);
-    }
-    return false;
-  };
-  // parse picture index and gallery index from URL (#&pid=1&gid=2)
-  var photoswipeParseHash = function () {
-    var hash = window.location.hash.substring(1),
-      params = {};
-    if (hash.length < 5) {
-      return params;
-    }
-    var vars = hash.split('&');
-    for (var i = 0; i < vars.length; i++) {
-      if (!vars[i]) {
-        continue;
-      }
-      var pair = vars[i].split('=');
-      if (pair.length < 2) {
-        continue;
-      }
-      params[pair[0]] = pair[1];
-    }
-    if (params.gid) {
-      params.gid = parseInt(params.gid, 10);
-    }
-    return params;
-  };
-  var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
-    var pswpElement = document.querySelectorAll('.pswp')[0],
-      gallery,
-      options,
-      items;
-    items = parseThumbnailElements(galleryElement);
-    // define options (if needed)
-    options = {
-      // define gallery index (for URL)
-      galleryUID: galleryElement.getAttribute('data-pswp-uid'),
-      getThumbBoundsFn: function (index) {
-        // See Options -> getThumbBoundsFn section of documentation for more info
-        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
-          pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
-          rect = thumbnail.getBoundingClientRect();
-        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
-      }
-    };
-    // PhotoSwipe opened from URL
-    if (fromURL) {
-      if (options.galleryPIDs) {
-        // parse real index when custom PIDs are used
-        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
-        for (var j = 0; j < items.length; j++) {
-          if (items[j].pid == index) {
-            options.index = j;
-            break;
-          }
-        }
-      } else {
-        // in URL indexes start from 1
-        options.index = parseInt(index, 10) - 1;
-      }
-    } else {
-      options.index = parseInt(index, 10);
-    }
-    // exit if index not found
-    if (isNaN(options.index)) {
-      return;
-    }
-    if (disableAnimation) {
-      options.showAnimationDuration = 0;
-    }
-    // Pass data to PhotoSwipe and initialize it
-    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
-    gallery.init();
-  };
-  // loop through all gallery elements and bind events
-  var galleryElements = document.querySelectorAll(gallerySelector);
-  for (var i = 0, l = galleryElements.length; i < l; i++) {
-    galleryElements[i].setAttribute('data-pswp-uid', i + 1);
-    galleryElements[i].onclick = onThumbnailsClick;
-  }
-  // Parse URL and open gallery if it contains #&pid=3&gid=1
-  var hashData = photoswipeParseHash();
-  if (hashData.pid && hashData.gid) {
-    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
-  }
 };
+// PhotoSwipeを起動する
+initPhotoSwipeFromDOM( '.my-gallery' ) ;
 ```

javascript追記

2021/09/14 13:35

投稿

bbtdp027

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,8 @@
 どこをいじって消えてしまったのかわからず、。見た目だけならｃｓｓでdisplay：ｎｏｎｅをけしたら出てきましたがスワイプしません。どのあたりを確認したら良いのか教えていただきたいです。
+  ```ここに言語を入力
-  ```<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="pswp__bg"></div>
@@ -138,9 +140,365 @@
 		},
+var initPhotoSwipeFromDOM = function (gallerySelector) {
+  // parse slide data (url, title, size ...) from DOM elements
+  // (children of gallerySelector)
+  var parseThumbnailElements = function (el) {
+    var thumbElements = el.childNodes,
+      numNodes = thumbElements.length,
+      items = [],
+      figureEl,
+      linkEl,
+      size,
+      item;
+    for (var i = 0; i < numNodes; i++) {
+      figureEl = thumbElements[i]; // <figure> element
+      // include only element nodes
+      if (figureEl.nodeType !== 1) {
+        continue;
+      }
+      linkEl = figureEl.children[0]; // <a> element
+      size = linkEl.getAttribute('data-size').split('x');
+      // create slide object
+      item = {
+        src: linkEl.getAttribute('href'),
+        w: parseInt(size[0], 10),
+        h: parseInt(size[1], 10)
+      };
+      if (figureEl.children.length > 1) {
+        // <figcaption> content
+        item.title = figureEl.children[1].innerHTML;
+      }
+      if (linkEl.children.length > 0) {
+        // <img> thumbnail element, retrieving thumbnail url
+        item.msrc = linkEl.children[0].getAttribute('src');
+      }
+      item.el = figureEl; // save link to element for getThumbBoundsFn
+      items.push(item);
+    }
+    return items;
+  };
+  // find nearest parent element
+  var closest = function closest(el, fn) {
+    return el && (fn(el) ? el : closest(el.parentNode, fn));
+  };
+  // triggers when user clicks on thumbnail
+  var onThumbnailsClick = function (e) {
+    e = e || window.event;
+    e.preventDefault ? e.preventDefault() : e.returnValue = false;
+    var eTarget = e.target || e.srcElement;
+    // find root element of slide
+    var clickedListItem = closest(eTarget, function (el) {
+      return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+    });
+    if (!clickedListItem) {
+      return;
+    }
+    // find index of clicked item by looping through all child nodes
+    // alternatively, you may define index via data- attribute
+    var clickedGallery = clickedListItem.parentNode,
+      childNodes = clickedListItem.parentNode.childNodes,
+      numChildNodes = childNodes.length,
+      nodeIndex = 0,
+      index;
+    for (var i = 0; i < numChildNodes; i++) {
+      if (childNodes[i].nodeType !== 1) {
+        continue;
+      }
+      if (childNodes[i] === clickedListItem) {
+        index = nodeIndex;
+        break;
+      }
+      nodeIndex++;
+    }
+    if (index >= 0) {
+      // open PhotoSwipe if valid index found
+      openPhotoSwipe(index, clickedGallery);
+    }
+    return false;
+  };
+  // parse picture index and gallery index from URL (#&pid=1&gid=2)
+  var photoswipeParseHash = function () {
+    var hash = window.location.hash.substring(1),
+      params = {};
+    if (hash.length < 5) {
+      return params;
+    }
+    var vars = hash.split('&');
+    for (var i = 0; i < vars.length; i++) {
+      if (!vars[i]) {
+        continue;
+      }
+      var pair = vars[i].split('=');
+      if (pair.length < 2) {
+        continue;
+      }
+      params[pair[0]] = pair[1];
+    }
+    if (params.gid) {
+      params.gid = parseInt(params.gid, 10);
+    }
+    return params;
+  };
+  var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
+    var pswpElement = document.querySelectorAll('.pswp')[0],
+      gallery,
+      options,
+      items;
+    items = parseThumbnailElements(galleryElement);
+    // define options (if needed)
+    options = {
+      // define gallery index (for URL)
+      galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+      getThumbBoundsFn: function (index) {
+        // See Options -> getThumbBoundsFn section of documentation for more info
+        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+          pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+          rect = thumbnail.getBoundingClientRect();
+        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
+      }
+    };
+    // PhotoSwipe opened from URL
+    if (fromURL) {
+      if (options.galleryPIDs) {
+        // parse real index when custom PIDs are used
+        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+        for (var j = 0; j < items.length; j++) {
+          if (items[j].pid == index) {
+            options.index = j;
+            break;
+          }
+        }
+      } else {
+        // in URL indexes start from 1
+        options.index = parseInt(index, 10) - 1;
+      }
+    } else {
+      options.index = parseInt(index, 10);
+    }
+    // exit if index not found
+    if (isNaN(options.index)) {
+      return;
+    }
-``if (disableAnimation) {
+    if (disableAnimation) {
       options.showAnimationDuration = 0;
@@ -184,6 +542,6 @@
   }
-};```
+};
 ```

javascript追記

2021/09/14 09:31

投稿

bbtdp027

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -138,9 +138,9 @@
 		},
-``````ここに言語を入力
-if (disableAnimation) {
+``if (disableAnimation) {
       options.showAnimationDuration = 0;

javascript追記

2021/09/14 09:04

投稿

bbtdp027

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -138,4 +138,52 @@
 		},
+``````ここに言語を入力
+if (disableAnimation) {
+      options.showAnimationDuration = 0;
+    }
+    // Pass data to PhotoSwipe and initialize it
+    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+    gallery.init();
+  };
+  // loop through all gallery elements and bind events
+  var galleryElements = document.querySelectorAll(gallerySelector);
+  for (var i = 0, l = galleryElements.length; i < l; i++) {
+    galleryElements[i].setAttribute('data-pswp-uid', i + 1);
+    galleryElements[i].onclick = onThumbnailsClick;
+  }
+  // Parse URL and open gallery if it contains #&pid=3&gid=1
+  var hashData = photoswipeParseHash();
+  if (hashData.pid && hashData.gid) {
+    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
+  }
+};```
 ```

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

2021/09/14 09:03

投稿

bbtdp027

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,6 @@
 どこをいじって消えてしまったのかわからず、。見た目だけならｃｓｓでdisplay：ｎｏｎｅをけしたら出てきましたがスワイプしません。どのあたりを確認したら良いのか教えていただきたいです。
-  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+  ```<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="pswp__bg"></div>
@@ -136,8 +136,6 @@
 onTap: pswp.next
-		},ここに言語を入力
-コード
+		},
 ```