Magnific Popup 的自定义标题

Question

我正在尝试让 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'，它确实有效，但这不是我想要的行为，因为它让我不得不在标记中复制内容.

Answer 1

根据文档 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();
        }
    }
});

Answer 2

我的设计要求我在每张图片幻灯片上都有一个标题和描述，因此我需要在放大的弹出窗口中自定义标题，我尝试了@krizna 的答案，但我只得到了标题，为了调试我进入了 js 文件磁性弹出窗口（jquery.magnefic-popup.js）并找到在解析自定义标记时调用的函数，它被适当地称为“_getTitle”。它获取一个项目对象作为参数。我记录了这个项目对象以发现它有数据我们的 item 参数所在的属性。

我使用 items 选项初始化弹出窗口（在文档中初始化的第三种方式）这是我的自定义项目对象

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'
            }
        ],

每个项目都有图像的 src，一个标题和一个描述，现在我的 titleSrc 函数是

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

我还修改了“_getTitle”函数，因为它只解析项目对象中的标题属性（前两行注释），我的“_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。