Посмотрел вашу демку и вывод следующий:
Если смотреть пример с официального сайта photoswipe, то можно заметить, что html галереи имеет вид
.demo-gallery>a>img+figure. И если посмотреть javascript код, который инициализирует photoswipe, то можно заметить, что там идет парсинг элементов галереи строго по дереву DOM.
А если посмотреть на вашу разметку, то у вас еще каждая ссылка обернута тегом li, вот из-за этого и проблема. В скрипте много где используются такие свойства-ссылки для навигации по дереву, как parentNode, childNodes и тд.
Вобщем советую почитать хорошую статью про
навигацию по DOM дереву
Чтобы заставить работать ваш код, нужно поменять маленько в двух функциях (помечено // todo)
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];
if (el.nodeType !== 1) {
continue;
}
el = el.firstElementChild; // todo
childElements = el.children;
size = el.getAttribute('data-size').split('x');
item = {
src: el.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
author: el.getAttribute('data-author')
};
item.el = el;
if (childElements.length > 0) {
item.msrc = childElements[0].getAttribute('src');
if (childElements.length > 1) {
item.title = childElements[1].innerHTML;
}
}
var mediumSrc = el.getAttribute('data-med');
if (mediumSrc) {
size = el.getAttribute('data-med-size').split('x');
item.m = {
src: mediumSrc,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
item.o = {
src: item.src,
w: item.w,
h: item.h
};
items.push(item);
}
return items;
};
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.parentNode; // todo
var childNodes = clickedGallery.childNodes, // todo
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if (childNodes[i].nodeType !== 1) {
continue;
}
if (childNodes[i] === clickedListItem.parentNode) { // todo
index = nodeIndex;
break;
}
nodeIndex++;
}
if (index >= 0) {
openPhotoSwipe(index, clickedGallery);
}
return false;
};
Ссылка на
демку