編集履歴

質問編集履歴

リンクをコードで囲みました。

2017/01/04 16:26

投稿

araE

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
-実際にPhotoSwipeを設置したページです→http://web-box.jp/arai/index.html
+実際にPhotoSwipeを設置したページです→[http://web-box.jp/arai/index.html](http://web-box.jp/arai/index.html)
@@ -18,11 +18,11 @@
-http://web-box.jp/arai/photoswipe.html（photoswipe.jsのコード）
+[http://web-box.jp/arai/photoswipe.html](http://web-box.jp/arai/photoswipe.html)（photoswipe.jsのコード）
-http://web-box.jp/arai/photoswipe-ui-default.html（photoswipe-ui-defaultのコード）
+[http://web-box.jp/arai/photoswipe-ui-default.html](http://web-box.jp/arai/photoswipe-ui-default.html)（photoswipe-ui-defaultのコード）
-http://web-box.jp/arai/ps.html（ps.jsのコード/公式サイトhttp://photoswipe.com/documentation/getting-started.htmlからコピペしたもの）
+[http://web-box.jp/arai/ps.html](http://web-box.jp/arai/ps.html)（ps.jsのコード/公式サイト[http://photoswipe.com/documentation/getting-started.html](http://photoswipe.com/documentation/getting-started.html)からコピペしたもの）
@@ -38,9 +38,9 @@
 他にCSSファイルがあります。
-http://web-box.jp/arai/dist/photoswipe.css
+[http://web-box.jp/arai/dist/photoswipe.css](http://web-box.jp/arai/dist/photoswipe.css)
-http://web-box.jp/arai/dist/skin/skin.css
+[http://web-box.jp/arai/dist/skin/skin.css](http://web-box.jp/arai/dist/skin/skin.css)

URLを貼りました。

2017/01/04 16:26

投稿

araE

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,423 +10,19 @@
-###該当のソースコード
-公式サイトからコピペしたものをjsファイルにしました。
-```ここに言語を入力
-var initPhotoSwipeFromDOM = function(gallerySelector) {
+実際にPhotoSwipeを設置したページです→http://web-box.jp/arai/index.html
-    // 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++) {
+http://web-box.jp/arai/photoswipe.html（photoswipe.jsのコード）
+http://web-box.jp/arai/photoswipe-ui-default.html（photoswipe-ui-defaultのコード）
-            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
+http://web-box.jp/arai/ps.html（ps.jsのコード/公式サイトhttp://photoswipe.com/documentation/getting-started.htmlからコピペしたもの）
-                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 );
-    }
-};
-// execute above function
-initPhotoSwipeFromDOM('.my-gallery');
-```
@@ -440,17 +36,11 @@
 ###補足情報(言語/FW/ツール等のバージョンなど)
-distフォルダ
+他にCSSファイルがあります。
-・上記コピペファイル.js
+http://web-box.jp/arai/dist/photoswipe.css
-・photoswipe.js
-・photoswipe-ui-default.js
+http://web-box.jp/arai/dist/skin/skin.css
-・他CSSファイル
-があります。

見づらいのでminファイルを削りました。

2017/01/04 16:22

投稿

araE

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -446,12 +446,8 @@
 ・photoswipe.js
-・photoswipe.min.js
 ・photoswipe-ui-default.js
-・photoswipe-ui-default.min.js
 ・他CSSファイル
 があります。

質問文のコードをコードブロックで囲みました。

2017/01/04 13:50

投稿

araE

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,9 +14,119 @@
 公式サイトからコピペしたものをjsファイルにしました。
+```ここに言語を入力
+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) {
-http://photoswipe.com/documentation/getting-started.html
+                // <img> thumbnail element, retrieving thumbnail url
+                item.msrc = linkEl.children[0].getAttribute('src');
+            }
-Here is pure Vanilla JS implementation with IE8 support:
+            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) );
+    };
@@ -30,7 +140,261 @@
+        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 );
@@ -44,6 +408,28 @@
+    // 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 );
+    }
+};
+// execute above function
+initPhotoSwipeFromDOM('.my-gallery');
+```
 ###試したこと
 リンクをクリックしたら〜としたいので上記を始めとするすべてのThumbnailsをlinkに変更してみましたが、サムネイルクリックが生きている状態です。