PhotoSwipe: bearbeiten parseThumbnailElements funktionieren zusätzliche Markup-Element

Question

Mit PhotoSwipe die Thumbnail-Galerie Markup sieht wie folgt aus analysieren:

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

Die Funktion, um die Bilder zu analysieren ist:

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

Ich habe zwei zusätzliche Elemente zwischen der my-gallery und der figur-klasse. Das Entfernen dieser Dinge funktioniert perfekt, aber mit den zusätzlichen zwei Klassen kann ich das vorherige oder nächste Element nicht auswählen, was bedeutet, dass das Array defekt ist.

Wie kann ich die gallery-grid- und li-Elemente in die Funktion aufnehmen, so dass diese Elemente für figure und childs übergangen werden.

Völlig neu zu reinem JS, irgendwelche Hinweise oder weitere Lektüre sehr willkommen. Leider habe ich bei diesem hier keine Ahnung, wo ich überhaupt anfangen soll.

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

Answer 1

ich es geschafft, durch die ursprüngliche Markup anstelle verlassen und die CSS für die Thumbnail-Galerie ändern. Es funktioniert jetzt und sieht wie folgt aus:

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

Und die CSS für die Thumbnail-Raster:

/* 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%; 
    } 
} 

aber das ist nicht wirklich eine Antwort, sondern eine Abhilfe für das Original-Markup aufzunehmen. Ich würde immer noch sehr gerne herausfinden, wie man das JS ändert, um mit dem Markup aus meiner Frage zu arbeiten.

Ich bin mit dem Beispiel von hier: http://photoswipe.com/documentation/getting-started.html An der Unterseite befindet sich ein CodePen.

Answer 2

Alte Frage und wir wenig anders Markup hatten, aber wenn jemand versucht, dies wie ich, um herauszufinden, das funktionieren könnte, wie es mir angetan hat: https://github.com/akizor/PhotoSwipe-Gallery-Improvement

Alles, was Sie tun müssen, ist Photoswipe Bibliothek enthalten, Fügen Sie ein HTML-Tag hinzu, das als Container für alle Ihre Galeriebilder dient, und verwenden Sie dieses Javascript auf Ihrer Seite.

Ich verwendete div mit einer Klasse .images-Container als Container.

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');