我正在自定义插件PhotoSwipe 4.1.1结合jquery mobile 1.4.5和jquery 2.1.4，以便在mobile上打开较大的缩略图图像。
应用程序中有一些旧代码似乎是用普通的JavaScript和jQuery编写的。
代码中的某些地方一定有问题，选择器似乎无法正常工作，因为它可能无法获取子节点。在这个问题的结尾，我将包括所有功能。
最重要的部分：
html：
<div id="demo-test-gallery" class="demo-gallery">
<div id="cl_gallery">
<a href="big.jpg" data-size="720x960" data-details="title" style="" class="ui-link">
<img src="small.jpg" width="120" height="80">
<figure>test</figure>
</a>
</div>
</div>
单击缩略图后，我会收到此错误：
无法读取null的属性“ split”
错误详细信息：
psw,psw-ui,psw-custom,v1.0.0.min.js:37 Uncaught TypeError: Cannot read property 'split' of null
at parseThumbnailElements (psw,psw-ui,psw-custom,v1.0.0.min.js:37)
at openPhotoSwipe (psw,psw-ui,psw-custom,v1.0.0.min.js:156)
at HTMLDivElement.onThumbnailsClick (psw,psw-ui,psw-custom,v1.0.0.min.js:118)
行：
37: size = el.getAttribute('data-size').split('x');
156: items = parseThumbnailElements(galleryElement);
117: if(index >= 0) {
openPhotoSwipe( index, clickedGallery );
}
// consol.log中的nodelist对象
NodeList(8) [div#cl_gallery_main, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link]
0: div#cl_gallery_main
1: a.ui-link
2: a.ui-link
3: a.ui-link
4: a.ui-link
5: a.ui-link
6: a.ui-link
7: a.ui-link
length: 8
__proto__: NodeList
// consol.log中对象的第一个拇指元素
1: a.ui-link
accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: href, 1: data-size, 2: data-details, 3: style, 4: class, href: href, data-size: data-size, data-details: data-details, style: style, class: class, …}
autocapitalize: ""
baseURI: "http://rex.watchgurus/omega/ala-kjdlkjshdl-kajsd-fkjh"
charset: ""
childElementCount: 2
childNodes: NodeList(2) [img, figure]
children: HTMLCollection(2) [img, figure]
classList: DOMTokenList ["ui-link", value: "ui-link"]
className: "ui-link"
clientHeight: 93
clientLeft: 0
clientTop: 0
clientWidth: 93
contentEditable: "inherit"
coords: ""
dataset: DOMStringMap {size: "900x1200", details: "Wiesbaden - 4.999 €"}
dir: ""
download: ""
draggable: true
firstChild: img
firstElementChild: img
hash: ""
hidden: false
整个自定义功能：
// custom integration for PhotoSwipe Gallery
(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),
details: el.getAttribute('data-details')
};
item.el = el; // save link to element for getThumbBoundsFn
if(childElements.length > 0) {
item.msrc = childElements[0].getAttribute('src'); // thumbnail url
if(childElements.length > 1) {
item.title = childElements[1].innerHTML; // caption (contents of figure)
}
}
var mediumSrc = el.getAttribute('data-med');
if(mediumSrc) {
size = el.getAttribute('data-med-size').split('x');
// "medium-sized" image
item.m = {
src: mediumSrc,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
// original image
item.o = {
src: item.src,
w: item.w,
h: item.h
};
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return el.tagName === 'A';
});
if(!clickedListItem) {
return;
}
var clickedGallery = clickedListItem.parentNode;
var 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) {
openPhotoSwipe( index, clickedGallery );
}
return false;
};
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) { // pid=1
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options->getThumbBoundsFn section of docs for more info
var thumbnail = items[index].el.children[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
},
addCaptionHTMLFn: function(item, captionEl, isFake) {
if(!item.title) {
captionEl.children[0].innerText = '';
return false;
}
captionEl.children[0].innerHTML = item.title + '<br/><small>Standort: ' + item.details + '</small>';
return true;
},
};
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
// see: http://photoswipe.com/documentation/responsive-images.html
var realViewportWidth,
useLargeImages = false,
firstResize = true,
imageSrcWillChange;
gallery.listen('beforeResize', function() {
var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
dpiRatio = Math.min(dpiRatio, 2.5);
realViewportWidth = gallery.viewportSize.x * dpiRatio;
if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
if(!useLargeImages) {
useLargeImages = true;
imageSrcWillChange = true;
}
} else {
if(useLargeImages) {
useLargeImages = false;
imageSrcWillChange = true;
}
}
if(imageSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if(firstResize) {
firstResize = false;
}
imageSrcWillChange = false;
});
gallery.listen('gettingData', function(index, item) {
// if( useLargeImages ) {
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
// } else {
// item.src = item.m.src;
// item.w = item.m.w;
// item.h = item.m.h;
// }
});
gallery.init();
};
// select all gallery elements
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );
}
};
initPhotoSwipeFromDOM('#cl_gallery');
})();
为什么Photoswipe无法检索图像尺寸？它在html元素内。