Javascript Photosweep link.el未定义，视频嵌入存在整体问题

关于Photosweep和视频的帖子很少，我设法让它工作了，但我还是遇到了一些问题，在我的设置中，我想用低分辨率的图像制作缩略图，用大分辨率的图像制作Photosweep，但不知怎的，这不管用，它从缩略图获取尺寸数据，并获取$large图像，我仍在努力使视频宽度达到75%，高度不超过90%，但不确定如何使其响应，因为这里的图像是我的css

/* photoswipe video test  */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 100%;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
video {
  width: 100% !important;
  height: auto !important;
}

.pswp__zoom-wrap {
  text-align: center;
}
.pswp__zoom-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.pswp .wrapper {
  line-height: 0;
  width: 75%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: auto;
}

我不知道为什么没有它就不能工作，它似乎是必需的，但我认为它只是把我的展示搞砸了，因为它覆盖了我已经设置好的数据大小值

document.querySelectorAll('.my-gallery a').forEach(function(anchor) {
  anchor.setAttribute('data-size', anchor.querySelector('img').naturalWidth + 'x' + anchor.querySelector('img').naturalHeight);
});

这个小脚本覆盖了我的值，但是我已经把它们设置得很好了，我有这样的值

                    foreach($r_body->image as $image) {
                        $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium');
                        $thumb = $image->size(400, 0, $options);
                        $large = $image->size(1280, 0, $options);
                        /* echo "<p>$width</p>";
                        echo "<p>$height</p>"; */
                        echo "
                        <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'>
                          <a href='$large->url' itemprop='contentUrl' data-size='{$large->width}x{$large->height}' data-index='$aa'>
                            <img src='$thumb->url' itemprop='thumbnail' alt='Beach'>
                          </a>
                          <figcaption itemprop='caption description'>$r_body->generic_nadpis</figcaption>
                        </figure>";
                        $aa++;
                    }

foreach（$r\u body->image as$image）{
$options=array（'quality'=>80，'upscaling'=>true，'croping'=>'north'，'锐化'=>'medium'）；
$thumb=$image->size（400,0，$options）；
$large=$image->size（1280,0，$options）；
/*回声“$width
”；
回声“$height
”*/
回声“
$r_body->generic_nadpis
";
$aa++；
}

这真的让东西的工作，唯一的问题是，上述功能采取的宽度和高度缩略图，而不是全分辨率图像

另一个巨大的问题是，当Photosweep打开图像时，但在当前设置下，它会打开带有缩略图尺寸的全分辨率图像（1280宽度），因此由于某种原因，大图像会缩小。当我像这样交换的时候

                  <a href='$thumb->url' itemprop='contentUrl' data-size='{$large->width}x{$large->height}' data-index='$aa'>
                    <img src='$large->url' itemprop='thumbnail' alt='Beach'>
                  </a>

它以大尺寸全宽打开小像素图像。所以它工作起来真的很奇怪，我会在下面发布我的JS初始化代码

var initPhotoSwipeFromDOM = function(gallerySelector) {

  // parse slide data (url, title, size ...) from DOM elements
  // (children of gallerySelector)
  var parseThumbnailElements = function(el) {
    // var thumbElements = $(el).find('.photoswipe-item:not(.isotope-hidden)').get(), 
    var thumbElements = el.childNodes,

      numNodes = thumbElements.length,
      items = [],
      figureEl,
      linkEl,
      size,
      item;

    for (var i = 0; i < numNodes; i++) {

      figureEl = thumbElements[i]; // <figure> element

      // include only element nodes
      if (figureEl.nodeType !== 1) {
        continue;
      }

      linkEl = figureEl.children[0]; // <a> element

      size = linkEl.getAttribute('data-size').split('x');

      // create slide object
      if ($(linkEl).data('type') == 'video') {
        item = {
          html: $(linkEl).data('video')
        };
      } else {
        item = {
          src: linkEl.getAttribute('href'),
          w: parseInt(size[0], 10),
          h: parseInt(size[1], 10)
        };
      }

      if (figureEl.children.length > 1) {
        // <figcaption> content
        item.title = $(figureEl).find('.caption').html();
      }

      if (linkEl.children.length > 0) {
        // <img> thumbnail element, retrieving thumbnail url
        item.msrc = linkEl.children[0].getAttribute('src');
      }

      item.el = figureEl; // save link to element for getThumbBoundsFn
      items.push(item);
    }

    return items;
  };

  // find nearest parent element
  var closest = function closest(el, fn) {
    return el && (fn(el) ? el : closest(el.parentNode, fn));
  };

  function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }

  // triggers when user clicks on thumbnail
  var onThumbnailsClick = function(e) {
    e = e || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;

    var eTarget = e.target || e.srcElement;

    // find root element of slide
    var clickedListItem = closest(eTarget, function(el) {
        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
    });

    if (!clickedListItem) {
      return;
    }

    // find index of clicked item by looping through all child nodes
    // alternatively, you may define index via data- attribute
  var clickedGallery = clickedListItem.parentNode,
        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) {
      // open PhotoSwipe if valid index found
      openPhotoSwipe(index, clickedGallery);
    }
    return false;
  };

  // parse picture index and gallery index from URL (#&pid=1&gid=2)
  var photoswipeParseHash = function() {
    var hash = window.location.hash.substring(1),
      params = {};

    if (hash.length < 5) {
      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 = {
    showHideOpacity:true,
    animateTransitions: true, 
      closeOnScroll: false,
      
      // define gallery index (for URL)
      galleryUID: galleryElement.getAttribute('data-pswp-uid'),

      getThumbBoundsFn: function(index) {
        // See Options -> getThumbBoundsFn section of documentation for more info
        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
          pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
          rect = thumbnail.getBoundingClientRect();

        return {
          x: rect.left,
          y: rect.top + pageYScroll,
          w: rect.width
        };
      }

    };

    // PhotoSwipe opened from URL
    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 {
        // in URL indexes start from 1
        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);
    gallery.init();

    gallery.listen('beforeChange', function() {
      var currItem = $(gallery.currItem.container);
      $('.pswp__video').removeClass('active');
      var currItemIframe = currItem.find('.pswp__video').addClass('active');
      $('.pswp__video').each(function() {
        if (!$(this).hasClass('active')) {
          $(this).attr('src', $(this).attr('src'));
        }
      });
    });

    gallery.listen('close', function() {
      $('.pswp__video').each(function() {
        $(this).attr('src', $(this).attr('src'));
      });
    });

  };

  // loop through all gallery elements and bind events
  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);
  }

};

// execute above function

initPhotoSwipeFromDOM('.my-gallery');

var initPhotoSwipeFromDOM=函数（gallerySelector）{
//从DOM元素解析幻灯片数据（url、标题、大小…）
//（厨房的孩子）
var parseThumbnailElements=函数（el）{
//var thumbElements=$（el）.find（'.photosweep项：未（.isotophended'）.get（），
var thumbElements=el.childNodes，
节点=thumbElements.length，
项目=[]，
菲格尔，
linkEl，
大小，
项目；
对于（变量i=0；i1）{
//内容
item.title=$（figureEl.find（'.caption'）.html（）；
}
如果（linkEl.childrence.length>0）{
//  -1;
}
//当用户单击缩略图时触发
var onThumbnailsClick=函数（e）{
e=e | | window.event；
e、 preventDefault？e.preventDefault（）：e.returnValue=false；
var eTarget=e.target | | e.src元素；
//查找幻灯片的根元素
var clickedListItem=最近（ETAGET，函数（el）{
返回（el.tagName&&el.tagName.toUpperCase（）='FIGURE'）；
});
如果（！clickedListItem）{
返回；
}
//通过在所有子节点中循环查找已单击项的索引
//或者，您可以通过数据属性定义索引
var clickedGallery=clickedListItem.parentNode，
childNodes=clickedListItem.parentNode.childNodes，
numChildNodes=childNodes.length，
nodeIndex=0，
指数
对于（变量i=0；i=0）{
//如果找到有效索引，请打开Photosweep
openphotosweep（索引，clickedGallery）；
}
返回false；
};
//从URL解析图片索引和图库索引（#&pid=1&gid=2）
var photoswipparsehash=函数（）{
var hash=window.location.hash.substring（1），
params={}；
if（hash.length<5）{
返回参数；
}
var vars=hash.split（'&'）；
对于（变量i=0；igetThumbBoundsFn”部分
var thumbnail=items[index].el.getElementsByTagName（'img'）[0]，//查找缩略图
pageYScroll=window.pageYOffset | | document.documentElement.scrollTop，
rect=thumbnail.getBoundingClientRect（）；
返回{
x:rect.left，
y:rect.top+pageYScroll，
w：矩形宽度
};
}
};
//从URL打开Photosweep
如果（从）