Magnific PopUp - Пользовательский заголовок Css

Я использую всплывающее окно 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>';
        }
    }
});

});


css customization magnific-popup
person Lou    schedule 14.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

С параметрами по умолчанию вы можете установить в атрибуте title также некоторый HTML. Таким образом, вы можете изменить эти несколько слов с помощью CSS. Например:

<a href="myimage.jpg" title="Title.<span class='myclass'>Subtitle</span>"><img src="thumb.jpg" width="100" height="100"></a>
person ReSedano    schedule 14.06.2018
comment
Я не использую атрибут title, потому что не хочу, чтобы он был ни в моей галерее эскизов, ни во всплывающей подсказке. Я сделал ручку кода, чтобы показать, что, например, они работают в галерее, но не во всплывающем окне, и я могу изменить весь вид заголовка с помощью css (красный цвет) codepen.io/anon/pen/wXqWby - person Lou; 14.06.2018
comment
Ммм... вы можете изменить return item.el.find('.hide').text() в return item.el.find('.hide').html(), чтобы увидеть тег ‹em› и изменить его стиль через CSS - person ReSedano; 14.06.2018