放大弹出菜单-添加底部栏

Magnific Popup - adding bottom bar

本文关键字：添加 底部 菜单 放大      更新时间：2023-09-26

嗨，所以我有一个带有不同选项卡的网站，每个选项卡中都有大约2-5个图像，我设置这些图像在点击时弹出，我想知道是否有办法根据所选选项卡为每个图像设置一个单独的底部栏title属性请有人帮我！！

底部钢筋示例：https://gyazo.com/fb8039f8091e96a9d62bb89b6138be11

示例代码：代码

Please Help Me!

谢谢！

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

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

相关文章：