javascript - How to make the default image description visible in WordPress? - Stack Overflow

admin管理员组

文章数量:1122846

I have an image gallery on a WordPress site created with the Photo Gallery by 10Web plugin. When we click on an image, a LIGHT-BOX opens, I need the description of the images to be displayed by default, always. However, they are only displayed when we click on a button, by default, this information is hidden: button:

<i title="Mostrar info" class="bwg-icon-info-circle bwg_ctrl_btn bwg_info"></i>

This is when we have already touched the INFORMATION button:

 <i title="Anterior información" class="bwg-icon-info-circle bwg_ctrl_btn bwg_info"></i>

The complete html element that is displayed when the button is clicked is as follows:

Abuelo Nicolas Fernandez Imagen de Abuelo Nicolas Fernandez

I've created a function to force the behavior, but it doesn't work. I've tried to do it with css, but it doesn't work.

How can I make the description show by default?

/* Force visibility of information in the lightbox */
.bwg_lightbox .bwg_image_info_container1 {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force visibility of inner content *
.bwg_lightbox .mCSB_container {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure synchronization of the info button */
.bwg_lightbox .bwg_info {
    display: inline-block !important;
}

I have also tried using JS in various ways, even with the help of an expert:

function forzar_mostrar_info_con_css_js() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
           // Function to force visibility
            function forzarVisibilidad() {
                const lightbox = document.querySelector(".bwg_lightbox");
                if (lightbox && lightbox.style.display !== "none") {
                    // Information container
                    const infoContainer = lightbox.querySelector(".bwg_image_info_container1");
                    if (infoContainer) {
                        infoContainer.style.setProperty("display", "table-cell", "important");
                        infoContainer.style.setProperty("visibility", "visible", "important");
                        infoContainer.style.setProperty("opacity", "1", "important");
                    }

                    // Info button
                    const infoButton = lightbox.querySelector(".bwg_info");
                    if (infoButton) {
                        infoButton.classList.add("active");
                    }
                }
            }

            // Watch for changes in the DOM to detect the lightbox opening
            const observer = new MutationObserver(() => forzarVisibilidad());

            observer.observe(document.body, {
                attributes: true,
                childList: true,
                subtree: true,
            });

            // Also run on clicks inside the lightbox
            document.body.addEventListener("click", function (event) {
                if (event.target.closest(".bwg_lightbox")) {
                    setTimeout(forzarVisibilidad, 100);
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'forzar_mostrar_info_con_css_js', 100);

//////////////////////

More proven options:

function forzar_mostrar_info_contenedor() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            function forzarInformacionActiva() {
                // Identify the parent container and its children
                const lightbox = document.querySelector(".bwg_lightbox");
                if (lightbox && lightbox.style.display !== "none") {
                    const infoContainer = lightbox.querySelector("#mCSB_1_container");
                    const parentContainer = lightbox.querySelector("#mCSB_1");

                    if (infoContainer && parentContainer) {
                        // Remove classes that hide information
                        infoContainer.classList.remove("mCS_y_hidden", "mCS_no_scrollbar_y");
                        parentContainer.classList.remove("mCS_y_hidden", "mCS_no_scrollbar_y");

                        // Force styles to ensure visibility
                        parentContainer.style.setProperty("max-height", "none", "important");
                        parentContainer.style.setProperty("visibility", "visible", "important");
                        parentContainer.style.setProperty("opacity", "1", "important");

                        infoContainer.style.setProperty("position", "relative", "important");
                        infoContainer.style.setProperty("top", "0", "important");
                        infoContainer.style.setProperty("left", "0", "important");
                        infoContainer.style.setProperty("visibility", "visible", "important");
                    }
                }
            }

          // Observer to detect changes in the DOM
            const observer = new MutationObserver(() => forzarInformacionActiva());
            observer.observe(document.body, {
                attributes: true,
                childList: true,
                subtree: true,
            });

            // Also run on clicks related to the lightbox
            document.body.addEventListener("click", function (event) {
                if (event.target.closest(".bwg_lightbox")) {
                    setTimeout(forzarInformacionActiva, 100);
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'forzar_mostrar_info_contenedor', 100);

本文标签： javascriptHow to make the default image description visible in WordPressStack Overflow