Question

我正在使用Magnific弹出窗口来显示灯箱库，我正在尝试在弹出窗口显示图像时自定义标题。我可以用css改变标题的一般外观，改变颜色，大小......但是我不能只有一些更大胆的文字，有两行文字用br，...即使我改变了标题来源titlesrc。我已经在文档的例子中看到，你可以通过直接在js中设置它来获得“副标题”但是对于每个图像它都是相同的，或者我有大约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

1 个答案: