如何在 fancybox 中添加额外的标题

Question

这是我对 fancybox 的设置：

Fancybox.bind('[data-fancybox="media"]', {
                mouseWheel: true,
                modal: true,
                Toolbar: {
                    display: [
                    {
                        id: "counter",
                        position: "center",
                    },
                    "zoom",
                    "slideshow",
                    "fullscreen",
                    "close",
                    ],
                },
                on: {
                    initLayout: (fancybox) => {

                    // Create left column
                    const $leftCol = document.createElement("div");
                    $leftCol.classList.add("fancybox__leftCol");

                    while (fancybox.$container.firstChild) {
                        $leftCol.appendChild(fancybox.$container.firstChild);
                    }

                    // Create right column
                    const $rightCol = document.createElement("div");
                    $rightCol.classList.add("fancybox__rightCol");

                    // Create info-box
                    const $info = document.createElement("div");
                    $rightCol.appendChild($info);
                    fancybox.$info = $info;

                    // Add elements to DOM
                    fancybox.$container.appendChild(fancybox.$backdrop);

                    fancybox.$container.appendChild($leftCol);
                    fancybox.$container.appendChild($rightCol);

                    fancybox.$leftCol = $leftCol;
                    fancybox.$rightCol = $rightCol;
                    },
                    "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => {
                    // Update info-box
                    // ===

                    // Get index of the current gallery item
                    slideIndex = slideIndex || carousel.options.initialPage;

                    // Get link related to current item
                    const $trigger = fancybox.items[slideIndex].$trigger;

                    // Get data from `data-info` attribute
                    const data = $trigger.dataset.info || "";

                    $.ajax({
                        type: "get",
                        url: `{{ url('/lightbox/${data}/info') }}`,
                        global: false,
                        success: function (response) {
                            fancybox.$info.innerHTML = response;
                        }
                        // , error: function (xhr, ajaxOptions, thrownError) {
                        //  console.log(xhr.status);
                        //  console.log(thrownError);
                        // }
                    });
                    },
                },
            });

我已经成功地向 fancybox 添加了一个额外的 rightColumn（边栏）（它没有在下图中捕获），正如您从设置中看到的那样。但现在我想在下图中用红色标记围起来的区域内添加 HTML 内容。如何在带有红色标记区域的围栏中添加额外的 div 和 HTML 元素？

Answer 1

您可以在要放置内容的位置创建新元素（类似于在示例中创建其他元素），也可以只在标题中添加其他内容（主页上的文档中有示例）

如何在 fancybox 中添加额外的标题

How to add additional caption in fancybox

javascript

fancybox-3