Magnific Popup：在圖像上標題

Question

我想使用Magnific Popup以及圖像上方的標題。

我在documentation下圖像類型財產標記發現我能夠把圖像上方的標題，如果我使用此代碼

然後我得到這個結果

但是，我希望標題不應該大於圖像。下面是它的外觀時，我不改變的標記：

如何防止標題設置窗口的寬度是多少？我希望窗口能夠符合圖像的寬度。

$('.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>

Answer 1

使用HTML5 <figcaption>標籤和包裝起來MFP-稱號，它然後使用環繞標籤<figure>這樣

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>' 
} 

整個容器MFP-IMG的div