Magnific酒店的弹出自定义标题

Question

我试图让弹出Magnific酒店根据它使用的目标周围的其他元素显示标题。考虑下面的标记，我想要的标题是“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：“标题”，但是这不是我想要的行为，因为它让我有重复的标记内容。

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的答案，但我只是得到了冠军，调试我走进magnefic弹出的js文件（jquery.magnefic-popup.js），并发现，当自定义标记被解析它被恰当地称作“_getTitle”。它获得一个项目的对象parameter.I记录此项目目的是找到它的数据属性在其中被调用的函数我们的项目参数去。

我使用初始化选项的项目（在文档初始化3路），在弹出这里是我的自定义项目目标

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”功能，因为它只有在项目对象解析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 '';
};

现在，我可以控制的标记及有title属性2动态SRC。