我们在 WordPress 网站上使用 Photoswipe js 插件作为灯箱画廊。一切正常，但我想在灯箱中使用图像的 alt 标签作为标题，但我不知道如何。我认为它应该自动将 alt 标签添加到标题中，但它可能不会。但我不确定我没有遗漏任何东西。

我们使用的当前代码：

我的自定义图库的 HTML/PHP：

<?php 
    $images = get_field('gallery',90);
    if( $images ): ?>
            <?php foreach( $images as $image ): ?>
            <figure class="item">
                <a href="<?php echo esc_url($image['url']); ?>" itemprop="contentUrl" data-size="1920x1080">
                    <img src="<?php echo esc_url($image['sizes']['large']); ?>" alt="test">
                    <?php if (esc_attr($image['alt'])):?>
                        <figcaption><?php echo esc_attr($image['alt']); ?></figcaption>
                    <?php endif;?>
                </a>
            </figure>
            <?php endforeach; ?>
    <?php endif; ?>

Photoswipe 灯箱的 HTML

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<!-- Background of PhotoSwipe. 
    It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>

<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">

    <!-- Container that holds slides. 
        PhotoSwipe keeps only 3 of them in the DOM to save memory.
        Don't modify these 3 pswp__item elements,data is added later on. -->
    <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
    </div>

    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">

        <div class="pswp__top-bar">

            <!--  Controls are self-explanatory. Order can be changed. -->

            <div class="pswp__counter"></div>

            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

            <button class="pswp__button pswp__button--share" title="Share"></button>

            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

            <button class="pswp__button pswp__button--zoom" title="zoom in/out"></button>

            <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- element will get class pswp__preloader--active when preloader is running -->
            <div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                    <div class="pswp__preloader__donut"></div>
                </div>
                </div>
            </div>
        </div>

        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div> 
        </div>

        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        </button>

        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        </button>

        <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
        </div>

    </div>

</div>

</div>

Javascript：

// Lightbox
var initPhotoSwipeFromDOM = function(gallerySelector) {

  // parse slide data (url,title,size ...) from DOM elements 
  // (children of gallerySelector)
  var parseThumbnailElements = function(el) {
    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
      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.children[1].innerHTML; 
      }
  
      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) );
  };
  
  // 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 = {
  
      // 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();
  };
  
  // 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');