javascript - 如何通过编辑此现有代码向图片库添加标题？

Question

我在网上找到了这个画廊，目前我有一些带有标题预览（class="project-category"）和描述（class="project-name"）的图像。当弹出窗口被激活时，图像的编号出现在右下角。我还希望将图像描述（class="project-name"）显示在弹出窗口中（在图像底部）。谁能帮我修改下面的代码来实现这个显示？

$('#portfolio').magnificPopup({
  delegate: 'a',
  type: 'image',
  tLoading: 'Loading image #%curr%...',
  mainClass: 'mfp-img-mobile',
  gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [0, 1]
  },
  image: {
    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" />
<div id="portfolio">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201">
          <img class="img-fluid" src="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201" alt="" />
          <div class="portfolio-box-caption">
            <div class="project-category text-white-50">Lorem ipsum</div>
            <div class="project-name">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa mauris, rutrum et erat nec, dapibus pretium enim. Nullam non felis ut tortor euismod mattis vel id libero. Duis eget justo rutrum elit aliquam vestibulum. Sed sem sem, pulvinar
              et sapien eu, varius gravida dui.</div>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%202">
          <img class="img-fluid" src="https://via.placeholder.com/500/FF00DD/FFFFFF?text=Image%202" alt="" />
          <div class="portfolio-box-caption">
            <div class="project-category text-white-50">Lorem ipsum</div>
            <div>
              <h6 class="project-name"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa mauris, rutrum et erat nec, dapibus pretium enim. Nullam non felis ut tortor euismod mattis vel id libero. Duis eget justo rutrum elit aliquam vestibulum. Sed sem sem,
                pulvinar et sapien eu, varius gravida dui.</h6>
            </div>
          </div>
        </a>
      </div>

标签： javascripthtmljquerygalleryimage-gallery