How to add additional caption in fancybox

Question

Here's my setup for the 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);
                        // }
                    });
                    },
                },
            });

I've successfully added an additional rightColumn (sidebar) to the fancybox (it's not captured in the image below) as you can see from the setup. But now I want to add HTML content inside the area which fenced with a red marker on the image below. How can I add additional div with HTML elements in the fenced with a red marker area?

Answer 1

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