Steve48 Posted August 7, 2023 Share Posted August 7, 2023 I want a script for pages that have slideshow galleries. the site is https://www.theartofphotographyus.net/ A typical gallery page is https://www.theartofphotographyus.net/galleries/transcendental If a page has a gallery there will be only one on the page.. Any gallery image, but usually the first or the last may have an asterisk in the caption. On load, or when an image is selected, if the caption has an "*" I want a footer block to display, otherwise not. After about ten iterations with chat gpt I arrived at the script (placed in the footer) below. Unfortunately, it didn't work. The footer is displayed for images without captions. I have a different script that disables the block if a page doesn't have a gallery. Please advise. Thank you <script> //Get the block element by its ID var block = document.getElementById("block-yui_3_17_2_1_1691321700096_2268"); // Hide the block by default block.style.display = "none"; // Get the slideshow element on the page var slideshow = document.querySelector(".gallery-slideshow"); // Define the checkCaption function function checkCaption() { // Get all the images in the slideshow var images = slideshow.querySelectorAll(".slide img"); // Loop through each image for (var i = 0; i < images.length; i++) { // Get the current image var image = images[i]; // Get the caption of the current image var caption = image.nextElementSibling; // Check if the caption contains an asterisk if (caption.textContent.includes("*")) { // Show the block if it does block.style.display = "block"; // Break out of the loop break; } else { // Hide the block if it doesn’t block.style.display = "none"; } } } // Add a click event listener to the slideshow slideshow.addEventListener("click", function() { // Get the active image in the slideshow var image = this.querySelector(".slide.active img"); // Get the caption of the active image var caption = image.nextElementSibling; // Check if the caption contains an asterisk if (caption.textContent.includes("*")) { // Show the block if it does block.style.display = "block"; } else { // Hide the block if it doesn’t block.style.display = "none"; } }); // Add a load event listener to the window object that checks if the current page has a slideshow or not, and calls the checkCaption function or hides the block accordingly window.addEventListener("load", function() { // Check if the current page has a slideshow or not if (document.querySelector(".gallery-slideshow")) { // If it does, call the checkCaption function checkCaption(); } else { // If it doesn’t, hide the block block.style.display = "none"; } }); </script> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment