Fancybox 4点击轮播图默认开启全屏模式的配置问题

解决方法 #

以下是可直接生效的修改方案：

• 首先修正配置项位置，Fancybox v4版本的自动全屏参数属于根级fullscreen配置项，直接配置autoStart: true即可实现打开时默认进入全屏模式，你之前的配置把相关参数空置在Fancybox子属性中未生效。
• 如果上述配置仍不生效，可以在Fancybox的done生命周期回调中手动调用全屏API兜底。

修改后的完整代码如下：

import {Fancybox} from "@fancyapps/ui";
import {Carousel} from "@fancyapps/ui";
import {Panzoom} from "@fancyapps/ui";
import {Fullscreen} from "@fancyapps/ui/src/shared/utils/Fullscreen";

$(document).ready(function () {
    const itemImagesDetail = new Carousel(document.querySelector(".carousel"), {
        'slidesPerPage': 1,
    });

    // Customize Fancybox
    Fancybox.bind('[data-fancybox="gallery"]', {
        // 新增根级全屏配置，开启自动进入全屏
        fullscreen: {
            autoStart: true
        },
        Carousel: {
            on: {
                change: (that) => {
                    itemImagesDetail.slideTo(itemImagesDetail.findPageForSlide(that.page), 
                    {
                        friction: 0,
                    });
                },
            },
        },
        Thumbs: {
            autoStart: false,
        },
        Toolbar: {
            display: [
                { id: "prev", position: "center" },
                { id: "counter", position: "center" },
                { id: "next", position: "center" },
                "zoom",
                "slideshow",
                "fullscreen",
                "download",
                "close",
            ],
        },
        // 可选兜底配置：生命周期回调手动触发全屏
        on: {
            done: () => {
                if (!Fullscreen.isActive()) {
                    Fullscreen.enter();
                }
            }
        }
    });
});

另外注意确认页面中轮播图的每个触发元素都正确添加了data-fancybox="gallery"以及data-src属性，绑定才会正常生效。

内容的提问来源于stack exchange，提问作者Martin Ambrož