Fancybox“标题”设置（外部/内部、空、顶部、...）+ 提示和技巧答案

【问题标题】：Fancybox "title" settings (outside/inside, null, top, ... ) + Tips and tricksFancybox“标题”设置（外部/内部、空、顶部、...）+ 提示和技巧
【发布时间】：2016-12-23 08:32:54
【问题描述】：

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

Test page

【问题讨论】：

标签： jquery fancybox

【解决方案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

【讨论】：