PhotoSwipe 无法在不同的布局中找到元素

Question

我不擅长 javascript.I 我对 PhotoSwipe.js 有疑问当我想在我的页面上使用 Photoswipe 时，它会抛出错误 "cannot split ..." 我知道它无法在不同的布局中找到元素。我的画廊布局：

     <div  class="demo-gallery">
          <asp:PlaceHolder ID="placeFoto1" Visible='<%# Eval("Foto1_HasFile") %>'                          runat="server">

              <h3 class="bold600"> <%#Eval("Foto1_Title")%></h3>
                <a href='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk1/" + Eval("Post_Foto_Buyuk1") %>' data-size="1222x12220" data-med-size="1024x1024" data-author="xxx"  data-med='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk1/" + Eval("Post_Foto_Buyuk1") %>'><img itemprop="image" src='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk1/" + Eval("Post_Foto_Buyuk1") %>' alt='<%# Eval("post_baslik") + " tasarımları" %>' title='<%# Eval("post_baslik") + " tasarımları" %>' class="img-responsive" style="width:100%;margin-left:auto;margin-right:auto"/></a>
                <br/>
               <p> <%#Eval("Foto1_Icerik")%></p>
          </asp:PlaceHolder>    
          <asp:PlaceHolder ID="PlaceHolder2" Visible='<%# Eval("Foto2_HasFile") %>' runat="server">
              <h3 class="bold600"> <%#Eval("Foto2_Title")%></h3>
              <a href='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk2/" + Eval("Post_Foto_Buyuk2") %>'  data-size="1222x12220" data-med-size="1024x1024" data-author="xxx"  data-med='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk1/" + Eval("Post_Foto_Buyuk1") %>'><img src='<%= Page.ResolveUrl("~")%><%# "Foto/post/foto_buyuk2/" + Eval("Post_Foto_Buyuk2") %>' alt='<%# Eval("post_baslik") + " tasarımları" %>' title='<%# Eval("post_baslik") + " tasarımları" %>' class="img-responsive" style="width:100%;margin-left:auto;margin-right:auto"/></a>
              <br />
              <p> <%#Eval("Foto2_Icerik")%></p>
          </asp:PlaceHolder>
    </div>

以及他们的示例布局：

<div  class="demo-gallery">
    <a href="https://farm4..com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024" data-author="Folkert Gorter" class="demo-gallery__img--main">
              <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" />
              <figure>This is dummy caption.</figure>
            </a>

            <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-tip="galeri" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x683" data-author="Samuel Rohl">
              <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
              <figure>This is dummy caption. It has been placed here solely to demonstrate the look and feel of finished, typeset text.</figure>
            </a>
    </div

我认为这是关于查找元素的，但真的不确定。错误信息：

未捕获类型错误：无法读取属性 'split' of null

这是关于 error.How 的 js 的一部分，我可以解决这个问题吗？

(function () {
var initPhotoSwipeFromDOM = function (gallerySelector) {
    var parseThumbnailElements = function (el) {
        var thumbElements = el.childNodes,
            numNodes = thumbElements.length,
            items = [],
            el,
            childElements,
            thumbnailEl,
            size,
            item;
        for (var i = 0; i < numNodes; i++) {
            el = thumbElements[i];
            // include only element nodes 
            if (el.nodeType !== 1) {
                continue;
            }
            childElements = el.children;
            size = el.getAttribute('data-size').split('x');
            // create slide object
            item = {
                src: el.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10),
                author: el.getAttribute('data-author')
            };

Answer 1

我发现 answer.Maybe 可以帮助遇到同样问题的人。

更改此代码

   for (var i = 0; i < numNodes; i++) {
            el = thumbElements[i];
            // include only element nodes 
            if (el.nodeType !== 1) {
                continue;
            }

至：

for (var i = 0; i < numNodes; i++) {
                el = thumbElements[i];
                // include only element nodes 
                if (el.tagName !== 'A') {
                    continue;
                }

所有关于将节点类型更改为标记名

PhotoSwipe 无法在不同的布局中找到元素

PhotoSwipe Can't Find Element At Different Layout

javascript

jquery

asp.net

webforms

photoswipe