Как сделать описание изображения по умолчанию видимым в WordPress? ⇐ Javascript

[Anonymous]

У меня есть галерея изображений на сайте WordPress, созданная с помощью плагина Photo Gallery by 10Web. Когда мы нажимаем на изображение, открывается LIGHT-BOX, мне нужно, чтобы описание изображений отображалось по умолчанию всегда. Однако они отображаются только тогда, когда мы нажимаем на кнопку, по умолчанию эта информация скрыта: button:


Это когда мы уже нажали кнопку ИНФОРМАЦИЯ:


Полный элемент html, который отображается при нажатии кнопки, выглядит следующим образом:

Абуэло Николас Фернандес
Изображение Абуэло Николас Фернандес

Я создал функцию, вызывающую такое поведение, но она не работает. Я пытался сделать это с помощью CSS, но не получилось.
Как сделать так, чтобы описание отображалось по умолчанию?
/* 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;
}

Я также пробовал использовать JS разными способами, даже с помощью эксперта:
function forzar_mostrar_info_con_css_js() {
?>

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);
}
});
});



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);
}
});
});



Подробнее здесь: https://stackoverflow.com/questions/793 ... -wordpress