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

我的设计要求我拥有一个标题＆amp;每个图片幻灯片的描述因此我需要一个自定义标题的大胆弹出，我尝试了@krizna的答案，但我只得到标题，调试我进入了magnefic弹出窗口的js文件（jquery.magnefic-popup.js）并且找到了在解析自定义标记时调用的函数，它被正确调用＆＃34; _getTitle＆＃34;。它获取一个项目对象作为参数。我记录了这个项目对象，发现它有数据属性，我们的项参数在

我使用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图像，标题和＆amp;一个描述，现在我的titleSrc函数是

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

我还修改了＆＃34; _getTitle＆＃34;函数因为它只解析了item对象中的title属性（注释了前两行），我的＆＃34; _getTitle＆＃34;现在看起来像这样

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

现在我可以控制标记＆amp;标题属性有2个动态src。

Magnific Popup的自定义标题

2 个答案: