PhotoSwipe：編集parseThumbnailElementsは、サムネイルのギャラリーのマークアップは次のようになりますPhotoSwipeを使用して、追加のマークアップ要素

Question

を解析する機能：

<div class="wrap clearfix"> 
    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 
    <ul class="gallery-grid"> 
     <li> 
      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
       <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1200"> 
        <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" /> 
       </a> 
        <figcaption itemprop="caption description">Image caption 1</figcaption> 
      </figure> 
     </li> 
     <li> 
      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
       <a href="img/dektop/2.jpg" itemprop="contentUrl" data-size="1200x1200"> 
        <img src="img/thumb/2.jpg" itemprop="thumbnail" alt="Image description" /> 
       </a> 
        <figcaption itemprop="caption description">Image caption 2</figcaption> 
      </figure> 
     </li> 
    </ul> 
</div> <!-- mygallery --> 
</div> <!-- wrap --> 

画像を解析する機能は次のとおりです。

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; 
}; 

私は2つの付加的な要素を持っていますマイギャラリーとフィギュアクラスの間にある。これらのものを削除すると完璧に機能しますが、追加の2つのクラスでは、前または次のアイテムを選択できません。つまり、配列が壊れています。

どのように関数にgallery-grid要素とli要素を含めると、Figureと子要素の要素を超えた外観になりますか。

純粋なJSの全く新しいものです。ヒントや読んだことは大歓迎です。残念なことに、この1つでは、私はどこから始めるのかという手がかりがありません。

http://quirksmode.org/dom/core/#gettingelements https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

Answer 1

私は場所で、元のマークアップを離れると、サムネイルのギャラリーのためのCSSを変更することにより、管理されます。それが動作するようになりましたし、次のようになります。

<div class="wrap clearfix"> 
    <div class="my-gallery gallery-grid" itemscope itemtype="http://schema.org/ImageGallery"> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1200"> 
       <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
       <figcaption itemprop="caption description">Image caption 4</figcaption> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="img/dektop/2.jpg" itemprop="contentUrl" data-size="1200x1200"> 
       <img src="img/thumb/2.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
       <figcaption itemprop="caption description">Image caption 4</figcaption> 
     </figure> 
    </div> <!-- mygallery --> 
</div> <!-- wrap --> 

とサムネイルグリッドのためのCSS：

/* thumnail gallery grid */ 
.gallery-grid { 
    margin: 35px 0 0 0; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    width: 100%; 
} 

.gallery-grid figure { 
    position: relative; 
    float: left; 
    overflow: hidden; 
    width: 16.6666667%; /* Fallback */ 
    width: -webkit-calc(100%/6); 
    width: calc(100%/6); 
    height: 300px; /* pay attention to this later */ 
} 

.gallery-grid figure a, 
.gallery-grid figure a img { 
    display: block; 
    width: 100%; 
    height: auto; 
    cursor: pointer; 
} 

.gallery-grid figure a img { 
    width: 100%; 
    height: auto;  
} 



@media screen and (max-width: 1190px) { 
    .gallery-grid figure { 
     width: 20%; /* Fallback */ 
     width: -webkit-calc(100%/5); 
     width: calc(100%/5); 
    } 
} 

@media screen and (max-width: 945px) { 
    .gallery-grid figure { 
     width: 25%; /* Fallback */ 
     width: -webkit-calc(100%/4); 
     width: calc(100%/4); 
    } 
} 

@media screen and (max-width: 660px) { 
    .gallery-grid figure { 
     width: 33.3333333%; /* Fallback */ 
     width: -webkit-calc(100%/3); 
     width: calc(100%/3); 
    } 
} 

@media screen and (max-width: 660px) { 
    .gallery-grid figure { 
     width: 33.3333333%; /* Fallback */ 
     width: -webkit-calc(100%/3); 
     width: calc(100%/3); 
    } 
} 

@media screen and (max-width: 400px) { 
    .gallery-grid figure { 
     width: 50%; /* Fallback */ 
     width: -webkit-calc(100%/2); 
     width: calc(100%/2); 
    } 
} 

@media screen and (max-width: 300px) { 
    .gallery-grid figure { 
     width: 100%; 
    } 
} 

をしかし、これは本当に答えが、元のマークアップのために対応するための回避策はありません。私は、私の質問からマークアップを操作するJSをどのように変更するかを知りたいと思っています。

私はここからの例を使用しています： http://photoswipe.com/documentation/getting-started.html を底にCodePenがあります。

Answer 2

旧質問と私たちは少し異なるマークアップを持っていたが、誰かが、それは私に行ったように、これはうまくいくかもしれない私のようなこれを理解しようとしている場合： https://github.com/akizor/PhotoSwipe-Gallery-Improvement

あなたがする必要があるのはPhotoswipeライブラリが含まれています、すべてのギャラリー画像のコンテナとして機能するHTMLタグを追加し、このjavascriptをページに使用します。

divをクラス。画像のコンテナをコンテナとして使用しました。

var initPhotoSwipeFromDOM = function(gallerySelector) { 
 
       var parseThumbnailElements = function(el) { 
 
       var all = document.querySelectorAll(gallerySelector); 
 
       var items = []; 
 
       for(var j = 0 ; j < all.length; j++){ 
 
        var el = all[j]; 
 
        var thumbElements = el.parentNode.childNodes; 
 
        var numNodes = thumbElements.length, 
 
        figureEl, 
 
        linkEl, 
 
        size, 
 
        item; 
 
        for(var i = 0; i < numNodes; i++) { 
 
        figureEl = thumbElements[i]; 
 

 
        if(figureEl.nodeType !== 1) { 
 
         continue; 
 
        } 
 
        linkEl = figureEl.children[0]; 
 
        size = linkEl.getAttribute('data-size').split('x'); 
 
        item = { 
 
         src: linkEl.getAttribute('href'), 
 
         w: parseInt(size[0], 10), 
 
         h: parseInt(size[1], 10), 
 
         minZoom: 3 
 
        }; 
 
        if(figureEl.children.length > 1) { 
 
         item.title = figureEl.children[1].innerHTML; 
 
        } 
 
        if(linkEl.children.length > 0) { 
 
         item.msrc = linkEl.children[0].getAttribute('src'); 
 
        } 
 

 
        item.el = figureEl; 
 
        items.push(item); 
 
        } 
 
       } 
 
       return items; 
 
       }; 
 
       var closest = function closest(el, fn) { 
 
       return el && (fn(el) ? el : closest(el.parentNode, fn)); 
 
       }; 
 
       var onThumbnailsClick = function(e) { 
 
       e = e || window.event; 
 
       e.preventDefault ? e.preventDefault() : e.returnValue = false; 
 
       var eTarget = e.target || e.srcElement; 
 
       var clickedListItem = closest(eTarget, function(el) { 
 
        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); 
 
       }); 
 
       if(!clickedListItem) { 
 
        return; 
 
       } 
 
       var clickedGallery = clickedListItem.parentNode, 
 
        childNodes = document.querySelectorAll(gallerySelector), 
 
        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) { 
 
        openPhotoSwipe(index, clickedGallery); 
 
       } 
 
       return false; 
 
       }; 
 
       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); 
 
       options = { 
 
        maxSpreadZoom: 5, 
 
        galleryUID: galleryElement.getAttribute('data-pswp-uid'), 
 
        getThumbBoundsFn: function(index) { 
 
        var thumbnail = items[index].el.getElementsByTagName('img')[0], 
 
         pageYScroll = window.pageYOffset || document.documentElement.scrollTop, 
 
         rect = thumbnail.getBoundingClientRect(); 
 
        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; 
 
        }, 
 
        minZoom: 3 
 
       }; 
 
       if(fromURL) { 
 
        if(options.galleryPIDs) { 
 
        for(var j = 0; j < items.length; j++) { 
 
         if(items[j].pid == index) { 
 
         options.index = j; 
 
         break; 
 
         } 
 
        } 
 
        } else { 
 
        options.index = parseInt(index, 10) - 1; 
 
        } 
 
       } else { 
 
        options.index = parseInt(index, 10); 
 
       } 
 
       if(isNaN(options.index)) { 
 
        return; 
 
       } 
 
       if(disableAnimation) { 
 
        options.showAnimationDuration = 0; 
 
       } 
 
       gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
 
       return gallery.init(); 
 
       }; 
 
       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; 
 
       } 
 
       var hashData = photoswipeParseHash(); 
 
       if(hashData.pid && hashData.gid) { 
 
       openPhotoSwipe(hashData.pid , galleryElements[ hashData.gid - 1 ], true, true); 
 
       } 
 
      }; 
 

 
      // execute above function 
 
      initPhotoSwipeFromDOM('.images-container figure');