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

मैं दो अतिरिक्त तत्वों है मेरी गैलरी और आकृति वर्ग के बीच। उन चीजों को हटाने के लिए सही काम करना, हालांकि अतिरिक्त दो वर्गों के साथ मैं पिछले या अगले आइटम का चयन नहीं कर सकता, जिसका अर्थ है कि सरणी टूट गई है।

मैं फ़ंक्शन में गैलरी-ग्रिड और ली तत्वों को कैसे शामिल कर सकता हूं ताकि यह आंकड़े और बच्चों के लिए उन तत्वों को देख सकें।

शुद्ध जेएस के लिए बिल्कुल नया, कोई संकेत या आगे पढ़ने का बहुत स्वागत है। दुर्भाग्य से इस के साथ मुझे कोई सुराग नहीं है कि यहां तक ​​कि देखना शुरू करना भी है।

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

Answer 1

मैं जगह में मूल मार्कअप छोड़ने और थंबनेल गैलरी के लिए सीएसएस बदल द्वारा प्रबंधित। अब यह काम करता है और इस तरह दिखता है:

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

और थंबनेल ग्रिड के लिए सीएसएस:

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

हालांकि यह वास्तव में एक जवाब है, लेकिन मूल मार्कअप के लिए समायोजित करने के लिए एक समाधान नहीं है। मैं अभी भी अपने प्रश्न से मार्कअप के साथ काम करने के लिए जेएस को बदलने के बारे में जानना बहुत प्यार करता हूं।

मैं यहाँ से उदाहरण का उपयोग कर रहा: http://photoswipe.com/documentation/getting-started.html नीचे एक CodePen है।

Answer 2

पुराना सवाल और हम थोड़ा अलग मार्कअप था, लेकिन के रूप में यह मेरे लिए किया था इस काम हो सकता है अगर किसी ने मुझसे इस तरह यह पता लगाने की कोशिश कर रहा है: https://github.com/akizor/PhotoSwipe-Gallery-Improvement

आपको बस इतना करना Photoswipe पुस्तकालय शामिल है की जरूरत है, एक HTML टैग जोड़ें जो आपकी सभी गैलरी छवियों के लिए एक कंटेनर के रूप में कार्य करता है और अपने पृष्ठ में इस जावास्क्रिप्ट का उपयोग करें।

मैंने एक कक्षा के साथ 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');