Question

我想在Magnific Popup图像下获得一个HTML标题（带链接），但似乎无法完成它（我认为这是可能的，因为它在Magnific Popup网站上有描述）。截至目前，我可以通过title =“这是一个标题”包含一些内联文本，但我显然不能将HTML放在那里。

根据我从其他Stack Overflow帖子收集的内容，您可以包含以下内容：

titleSrc: function(item){
    return item.el.find('p').text()
}

然后将您的HTML代码放入P标签中，但是当我将这段代码插入到我的Javascript中时，Magnific Popup功能会消失，图像就会成为常规链接。

这是我目前正在使用的HTML：

<figure>
    <a class="image-popup-no-margins" href="image.png" title="This is a non-HTML caption">
        <img src="image-small.png">
    </a>
</figure>

这是Javascript：

<script>
    $(document).ready(function () {
        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            delegate: 'a',
            closeOnContentClick: true,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }
        });
        $('.parent-container').magnificPopup({
            delegate: 'a', // child items selector, by clicking on it popup will open
            type: 'image'
            // other options
        });
        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }

        });

        $('.image-popup-fit-width').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            image: {
                verticalFit: false
            }
        });

        $('.image-popup-no-margins').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            closeBtnInside: false,
            fixedContentPos: true,
            mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
            image: {
                verticalFit: true
            },
            zoom: {
                enabled: true,
                duration: 300 // don't foget to change the duration also in CSS
            }
        });
    });
</script>

我不知道Javascript是否臃肿，但这是我从previous Stack Overflow post得到的，看看我对Javascript一无所知。如果它有任何区别，我确实有多个Popup在同一页面上工作。

感谢您的帮助。

P.S。如果这实际上是可行的，那么可以用CSS中心HTML标题吗？

如何添加带有HTML链接的标题到Magnific Popup图像？

0 个答案: