Magnificent Popup - 下部バーを追加する

Question

こんにちは、私は別のタブを持つウェブサイトを持っています。それぞれのタブには、クリックしてポップアップするように設定した2-5枚の画像があります。私はちょうど下に何かを追加する唯一の方法は、タイトル属性を使用することです誰かが私を助けることができるので、maginificポップアップでボトムバーを追加する方法を知っていません！下のバーの

例：https://gyazo.com/fb8039f8091e96a9d62bb89b6138be11

コード例：Code

Please Help Me! 

ありがとうございます！

Answer 1

あなたは、imageオプションでmarkupオプションを含むことにより、このような何かMagnificポップアップのマークアップを上書きすることができます。いつものように、その意志出力title属性、.mfp-title div要素を含むことにより、

$('.zoom-gallery').magnificPopup({ 
    ..., 
    image: { 
     ..., 
     markup: '<div class="mfp-figure">'+ 
        '<div class="mfp-close"></div>'+ 
        '<div class="mfp-img"></div>'+ 
        '<div class="custom-bottom-bar">'+ 
        '<div class="mfp-title"></div>'+ 
        '<ul>'+ 
         '<li>first list item</li>'+ 
         '<li>things will likely need further CSS adjustments</li>'+ 
        '</ul>'+ 
        '</div>'+ 
       '</div>' 
     } 
    }, 
    ... 
}); 

をこの場合、別のコンテキストでのみ使用できます。ここにいくつかのCSSが追加されたバイブルがあります：http://jsfiddle.net/5b01x6g2/52/