Javascript 用于放大弹出窗口的自定义标题

我试图让放大弹出窗口显示一个基于目标周围其他元素的标题。给定以下标记，我希望标题为“Foobar”

计算函数可能是一个问题，我甚至尝试简单地返回一个常量字符串，但这似乎没有任何作用：

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

有人知道我做错了什么吗

---

注意：如果我使用titleSrc:'title'，它确实有效，但这不是我想要的行为，因为它使我不得不在标记中复制内容。

根据文档

titleSrc:{}

应该在

图像中：{}

并且你可以使用

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();
        }
    }
});

---

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

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

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>';
        }

---

现在我已经控制了标记，并为title属性创建了两个动态src。

您能为相同的属性创建JSFIDLE吗？您确定titleSrc只处理一个字符串吗？查看文档时，应该将其放在image下，比如

image:{titleSrc:…}

。没错，问题在于titleSrc:{}在image:{}之外的位置。所以问题其实是我没有注意到。谢谢你的帮助@krizna。

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

_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 '';
};