PhotoSwipe не может найти элемент на другом макете
Я плохо разбираюсь в javascript. У меня проблема с PhotoSwipe.js. Когда я хочу использовать Photoswipe на своей странице, он выдает ошибку "невозможно разделить...". Я понял, что не могу найти элемент с другим макетом. Макет моей галереи:
<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
Я думаю, что это найти элемент, но на самом деле не уверен. Сообщение об ошибке:
Uncaught TypeError: Невозможно прочитать свойство 'split' из null
И вот часть 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')
};
1 ответ
Решение
Я нашел ответ. Может быть, помогает тот, кто имеет ту же проблему.
Изменить этот код
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;
}
все об изменении типа узла на тэг