2016-06-11 77 views
0

參照photoswipe js:http://photoswipe.com/documentation/getting-started.html如何將data-index屬性傳遞給photoswipe js的索引?

我無法將data-index屬性傳遞給photoswipe的索引。

HTML:

<td> 
     <div class="picture" itemscope="" itemtype="http://schema.org/ImageGallery"> 
      <figure style="display:initial;" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"> 
       <a class="picture" href="images/AN241_02.jpg" itemprop="contentUrl" data-size="2000x1200" data-index="0" data-title="AN241 02 55"> 
        <img class="lazy thumbnail " data-original="image_cache/AN241_02-cache.jpg" itemprop="thumbnail" alt="Image description" src="image_cache/AN241_02-cache.jpg" style="display: inline;"> 
       </a> 
      <figcaption itemprop="caption description">description</figcaption> 
      </figure> 
     </div> 
    </td> 

JS:

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

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

您可以在上面的「數據索引」屬性位於看到在「一」的標籤,我想這傳遞給JS中的索引。

道歉,因爲我不熟悉JS,並會在此感謝任何幫助。

回答

0

,如果你需要獲取數據索引,你必須從你點擊的元素得到這個屬性的值前年「如果」的聲明,然後將它傳遞給openPhotoSwipe初始化函數:)

var newIndex = parseInt(eTarget.parentNode.getAttribute("data-index")); 

if(newIndex >= 0) { 
    // open PhotoSwipe if valid index found 
    openPhotoSwipe(newIndex, clickedGallery); 
}