Magnificent 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>タグと、それは、この

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

よう <figure>タグを使用して容器全体MFP-IMGのdivを囲む中MFP-タイトルを包みます