PhotoSwipe：编辑parseThumbnailElements函数来解析额外的标记元素 [英] PhotoSwipe: edit parseThumbnailElements function to parse additional markup element
问题描述
使用PhotoSwipe缩略图画廊标记看起来是这样的：
Using PhotoSwipe the thumbnail gallery markup looks like this:
<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 -->
解析图像的功能是：
The function to parse the images is:
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;
};
我有我的图库和数字类之间的两个额外的元素。删除这些事情的工作完美，但与另外两个班，我不能选择previous或下一个项目，这意味着数组是坏了。
I have two additional elements between the my-gallery and the figure class. Removing those things work perfect, however with the additional two classes I cannot select the previous or next item, meaning the array is broken.
我怎样才能在函数库网和李元素，这样看起来是对过去的人物，孩子们的那些元素。
How can I include the gallery-grid and li elements in the function so that is looks past those elements for figure and children.
全新的纯JS，任何暗示或进一步阅读非常欢迎。不幸的是这一个我不知道在哪里甚至开始寻找。
Totally new to pure JS, any hints or further reading very welcome. Unfortunately with this one I have no clue where to even start looking.
<一个href=\"http://quirksmode.org/dom/core/#gettingelements\">http://quirksmode.org/dom/core/#gettingelements
<一href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName\">https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
推荐答案
我留下代替原来的标记和更改缩略图画廊CSS管理。现在它看起来像这样的：
I managed by leaving the original markup in place and change the CSS for the thumbnail gallery. It now works and looks like this:
<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的为缩略图网格：
And the CSS for the the thumbnail grid:
/* 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与来自我的问题的标记工作。
However this is not really an answer but a workaround to accommodate for the original markup. I would still very much love to find out about how to change the JS to work with the markup from my question.
我使用从这里的例子：
http://photoswipe.com/documentation/getting-started.html
在底部有一个 codePEN 。
I am using the example from here: http://photoswipe.com/documentation/getting-started.html At the bottom there is a CodePen.
这篇关于PhotoSwipe：编辑parseThumbnailElements函数来解析额外的标记元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
