Пользовательский заголовок для Magnific Popup

Я пытаюсь заставить Magnific Popup отображать заголовок на основе других элементов вокруг цели, которую он использует. Учитывая следующую разметку, я хочу, чтобы заголовок был «Foobar».

<div class="container">

    <article>
        <h2>Foo</h2>
        <figure>
            <a href="img/img-1.jpg">
                <img src="img/img-1.jpg" /> 
            </a>
            <figcaption>
                bar1
            </figcaption>                                   
        </figure>
    </article>

    <article>
        <h2>Foo</h2>
        <figure>
            <a href="img/img-2.jpg">
                <img src="img/img-2.jpg" /> 
            </a>
            <figcaption>
                bar2
            </figcaption>                                   
        </figure>
    </article>

</div>

Что я пробовал, ища решения в Интернете (включая это на StackOverflow ) следующий код:

$('.container').magnificPopup({
    delegate: 'article figure a',
    type: 'image',
    titleSrc: function(item) {
        return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text();
    },
    gallery:{enabled:true}
});

Выяснение функции могло быть проблемой. Я даже пытался просто вернуть постоянную строку, но это, похоже, ничего не дало:

titleSrc: function(item) {
    return "fake Foobar";
}

Кто-нибудь знает, что я делаю неправильно?

ПРИМЕЧАНИЕ. Это работает, если я использую titleSrc: 'title', но это не то поведение, которое мне нужно, так как мне приходится дублировать содержимое в разметке.


javascript html jquery magnific-popup
person radu.luchian    schedule 22.01.2014    source источник
comment
не могли бы вы просто создать jsfiddle для того же, jsfiddle.net   -  person dreamweiver    schedule 22.01.2014
comment
Вы уверены, что titleSrc работает только со строкой? Глядя на документацию, вы должны поместить ее под изображением, например image: { titleSrc: ... }.   -  person jazZRo    schedule 22.01.2014

Ответы (2)


arrow_upward
19
arrow_downward

Согласно документации titleSrc:{} должен находиться внутри image:{}, и вы можете использовать item.el.parents() вместо item.el.parent().

Исправленный код

$('.container').magnificPopup({
    delegate: 'article figure a',
    type: 'image',
    gallery:{enabled:true},
    image: {
        titleSrc: function(item) {
        return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html();
        }
    }
});
person krizna    schedule 22.01.2014
comment
Вы правы, проблема заключалась в размещении titleSrc:{} за пределами изображения:{}. Так что проблема была на самом деле в моей невнимательности. Спасибо за помощь @krizna. - person radu.luchian; 23.01.2014

arrow_upward
1
arrow_downward

Мой дизайн требовал, чтобы у меня был заголовок и описание для каждого слайда изображения, поэтому мне требовался собственный заголовок во всплывающем окне magnific, я попробовал ответ от @krizna, но я получил только заголовок, для отладки я зашел в js-файл всплывающего окна magnific (jquery.magnefic-popup.js) и нашел функцию, которая вызывается при анализе пользовательской разметки, она называется соответствующим образом «_getTitle». Она получает объект элемента в качестве параметра. Я зарегистрировал этот объект элемента, чтобы найти, что он имеет атрибут данных, в котором наш параметр элемента идет.

Я инициализировал всплывающее окно, используя опцию элементов (третий способ инициализации в документах), вот мой пользовательский объект элемента

items: [
            {
                src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"',
                title: 'We buy Nike shoes',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            },
            {
                src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"',
                title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\'s done on the demo page)',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            },
            {
                src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
                title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            }
        ],

каждый элемент имеет источник изображения, заголовок и описание, теперь моя функция titleSrc

titleSrc: function(item) {
               return '<p id="gallery-image-title">' + item.data.title  +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>';
        }

Я также изменил функцию «_getTitle», потому что она анализировала только свойство title в объекте элемента (прокомментировал первые две строки), мой «_getTitle» теперь выглядит так

_getTitle = function(item) {
    console.log(item);
    /*if(item.data && item.data.title !== undefined)
        return item.data.title;*/

    var src = mfp.st.image.titleSrc;

    if(src) {
        if($.isFunction(src)) {
            return src.call(mfp, item);
        } else if(item.el) {
            return item.el.attr(src) || '';
        }
    }
    return '';
};

Теперь у меня есть контроль над разметкой и 2 динамических src для свойства title.

person Abhinav Singh    schedule 10.09.2016