Есть два плагина, необходимо их совместить: wookmark and photoswipe?

Question

[0348raven]

Как и описано в заголовке вопроса есть два плагина:
photoswipe.com
www.wookmark.com

От wookmark полезна адаптивность и перестроение, от photoswipe естесственно swipe и тот popup который открывается.
Вызов функций брал стандартный. Есть подозрение, что где-то там и кроется проблема. Вызываю по отдельности - это может явится причиной некорректности работы.

Суть в чем: отображается и выстраивается как нужно, popup открывается... но листать совсем отказывается.
Заранее благодарю за помощь, если потребуется дополнительная информация - спрашивайте.

Comments

[Алексей Зуев]

Покажите страницу с реализацией или оформите на jsfiddle

[0348raven]

Алексей Зуев:
вот например оригинал codepen.io/anon/pen/bdLxyQ
вот мое творение codepen.io/anon/pen/qdxJWr

wookmark не срабатывает, но его нужно подключать прямо в DOM.
но суть проблемы должна быть ясна

Answer 1

[Алексей Зуев]

Посмотрел вашу демку и вывод следующий:

Если смотреть пример с официального сайта 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;
    };

Ссылка на демку

Comments

[0348raven]

Спасибо за ссылку на статью (изучаю) и на демо!
Отдельный респект за решение!