Question

嗨所以我有一个带有不同标签的网站，每个标签中有大约2-5张图片，我设置为点击弹出，我想知道是否有办法为每个图像设置一个单独的底栏取决于选中的选项卡我知道如何做php配置我只是不知道如何添加带有maginific弹出窗口的底栏，因为只有这样才能添加到底部的东西是使用title属性请有人帮助我!!

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

示例代码：Code

Please Help Me!

谢谢！

Answer 1

您可以通过在markup选项中添加image选项来覆盖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：http://jsfiddle.net/5b01x6g2/52/

Magnific Popup - 添加底栏

1 个答案: