Question

我使用Fancybox（3 beta），标题设置不会更改任何内容，但其他设置适用于其他属性（thumb，overlaycolor，..）。

<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”属性设置为链接的标题，但它根本不起作用。（但我不确定它是编写函数的正确位置）

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“标题”设置（外/内，空，顶部......）+提示和技巧

1 个答案: