Magnific PopUp - 自定义标题 Css

Question

我正在使用 Magnific 弹出窗口来显示灯箱画廊，并且我正在尝试在弹出窗口显示图像时自定义标题外观。我可以用 css 改变标题的整体外观，改变颜色，大小，...带有 titlesrc 的标题源。我在文档的示例中看到，您可以通过直接在 js 中设置它来获得 "subtitle" 但它对于每张图像都是相同的，或者我有大约 50 张图像，每张图像都有不同的标题：

$(document).ready(function() {
$('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
        }
    }
});

});

Answer 1

使用默认选项，您可以在 title 属性中设置一些 HTML。所以你可以用CSS来改变这几个字。例如：

<a href="myimage.jpg" title="Title.<span class='myclass'>Subtitle</span>"><img src="thumb.jpg" width="100" height="100"></a>

Magnific PopUp - 自定义标题 Css

Magnific PopUp - Custom title Css

css

customization

magnific-popup