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-титул в нем затем окружать весь контейнер мфу-IMG Div с помощью <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>' 
}