Magnific Popup：在图像上添加标题答案

【问题标题】：Magnific Popup: Make title over imageMagnific Popup：在图像上添加标题
【发布时间】：2016-11-05 12:18:08
【问题描述】：

我想在图片上方使用带有标题的Magnific Popup。

我在 Image Type 下的documentation 中找到了 markup 属性，如果我使用此代码，我可以将标题放在图像上方

然后我得到这个结果

但是，我希望标题不应该比图片大。以下是我不更改标记时的外观：

如何防止标题设置窗口的宽度？我希望窗口符合图像的宽度。

$('.grid').magnificPopup({
  delegate: 'a',
  type: 'image',
  image: {
    markup: '<div class="mfp-figure">' +
      '<div class="mfp-close"></div>' +
      '<div class="mfp-title"></div>' +
      '<div class="mfp-img"></div>' +
      '<div class="mfp-bottom-bar">' +
      '<div class="mfp-counter"></div>' +
      '</div>' +
      '</div>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <a class="popup-link" href="ENTE-611.jpg" data-effect="mfp-zoom-in" title='A lot of text - A lot of text - - A lot of textext -  - A lot of text -  - A lot of text -  - A lot of text -  - A lot of text -  - A lot of text -  - A lot of text -  '>
    <img class='link img-link' src="ENTE-611s.jpg">
  </a>
</div>

【问题讨论】：

标签： jquery html css magnific-popup

【解决方案1】：

使用 HTML5 <figcaption> 标记并将 mfp-title 包裹在其中，然后使用 <figure> 标记包围整个容器 mfp-img div

image: {
   markup: '<div class="mfp-figure">' +
             '<div class="mfp-close"></div>' +
             '<figure>'+
             '<div class="mfp-img"></div>' +  
             '<figcaption>'+
               '<div class="mfp-bottom-bar">' +
                 '<div class="mfp-title"></div>' +
                 '<div class="mfp-counter"></div>' +
               '</div>'+
             '</figcaption>'+
             '</figure>' +
           '</div>'
}

【讨论】：