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,並會在此感謝任何幫助。