Programmiererforum

Posted: **06 Jan 2025, 18:29**

Ich habe eine Bildergalerie auf einer WordPress-Site, die mit dem Plugin Photo Gallery by 10Web erstellt wurde. Wenn wir auf ein Bild klicken, öffnet sich eine LIGHT-BOX, ich brauche die Beschreibung der Bilder, die standardmäßig immer angezeigt werden sollen. Sie werden jedoch nur angezeigt, wenn wir auf eine Schaltfläche klicken. Standardmäßig sind diese Informationen ausgeblendet: Schaltfläche:

Code: Select all

[i][/i]

Hier haben wir bereits die Schaltfläche INFORMATIONEN angetippt:

Code: Select all

 [i][/i]

Das vollständige HTML-Element, das angezeigt wird, wenn auf die Schaltfläche geklickt wird, lautet wie folgt:

Abuelo Nicolas Fernandez
Bilder von Abuelo Nicolas Fernandez

Ich habe eine Funktion erstellt, um das Verhalten zu erzwingen, aber sie funktioniert nicht. Ich habe versucht, es mit CSS zu machen, aber es funktioniert nicht.
Wie kann ich dafür sorgen, dass die Beschreibung standardmäßig angezeigt wird?

Code: Select all

/* 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;
}

Ich habe auch versucht, JS auf verschiedene Arten zu verwenden, sogar mit Hilfe eines Experten:

Code: Select all

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

Programmiererforum

Wie mache ich die Standardbildbeschreibung in WordPress sichtbar?

Wie mache ich die Standardbildbeschreibung in WordPress sichtbar?