Magnific Popup - добавление нижней панели

Question

Привет, у меня есть веб-сайт с различными вкладками, и на каждой вкладке есть около 2-5 изображений, которые я настроил на всплывающее окно, и мне было интересно, есть ли способ иметь отдельное дно bar для каждого изображения в зависимости от выбранной вкладки. Я знаю, как делать php config. Я просто не знаю, как добавить нижний план с магическим всплывающим окном, потому что только способ добавить что-то в нижнюю часть - использовать атрибут title, пожалуйста, кто-нибудь может мне помочь !!

Пример нижней панели: https://gyazo.com/fb8039f8091e96a9d62bb89b6138be11

Пример кода: Code

Please Help Me! 

Спасибо!

Answer 1

Вы можете отменить наценку всплывающего окна Magnific путем включения markup опции в опции image, что-то вроде этого:

$('.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>' 
     } 
    }, 
    ... 
}); 

включения .mfp-title DIV, что выход будет атрибут заголовка, как обычно, , в данном случае только в другом контексте. Вот скрипка с некоторыми CSS добавлена: http://jsfiddle.net/5b01x6g2/52/