Fancybox "title" 设置 (outside/inside, null, top, ... ) + 提示和技巧

Question

我使用 Fancybox（3 beta），标题设置不会改变任何东西，但其他设置适用于其他属性（缩略图、覆盖颜色、..）。

<script type="text/javascript">
    jQuery(function ($){
        $(document).ready(function(){
            $(".fancybox-thumbs").fancybox({
                padding: 0, 
                margin: 10,
                closeBtn  : true,
                helpers :   
                    {    
                        title: {
                            position: 'top',
                                },
                        thumbs:
                            {
                             width  : 40,
                             height : 40,
                            }
                        },
                beforeShow : function() {
                        var alt = this.element.find('img').attr('alt');
                        this.inner.find('img').attr('alt', alt);
                        this.title = alt;
                    },
            });
        });
    });
</script>

我也试过将图像的 "alt" 属性设置为 link 的标题，但根本不起作用。（但我不确定这是写函数的正确位置）

Test page

Answer 1

Fancybox 3 的提示不一样。这是一个从图像中获取 alt 属性的方法。

$(".fancybox").fancybox({
beforeLoad : function() {
    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

    /*
        "this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
        this.title = $(this.element).find('img').attr('alt');
    */
}
});

来自https://libraries.io/npm/fancybox/3.0.0

Fancybox "title" 设置 (outside/inside, null, top, ... ) + 提示和技巧

Fancybox "title" settings (outside/inside, null, top, ... ) + Tips and tricks

jquery

fancybox