javascript - Magnific Popup - 添加底栏

Question

您好，我有一个带有不同选项卡的网站，在每个选项卡中有大约 2-5 张图像，我将它们设置为在单击时弹出，我想知道是否有一种方法可以为每个图像设置一个单独的底部栏，具体取决于选择的选项卡 我知道如何进行 php 配置 我只是不知道如何使用神奇的弹出窗口添加底部栏，因为向底部添加内容的唯一方法是使用 title 属性请有人帮助我!!

底栏示例:https://gyazo.com/fb8039f8091e96a9d62bb89b6138be11

示例代码:Code

Please Help Me!

谢谢!

Answer 1

您可以通过在 image 选项中包含 markup 选项来覆盖 Magnific 弹出窗口的标记，如下所示:

$('.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，它将照常输出 title 属性，在本例中只是在不同的上下文中。这是添加了一些 CSS 的 fiddle :http://jsfiddle.net/5b01x6g2/52/