How to add additional caption in fancybox

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?

visualization1

Answer

You can either create new element where you would place your content (similarly to creating additional elements in your sample) or you could just add additional content to your caption (there are samples in docs on the homepage)

Advertisement

Answer