Jump to content

Script to display footer block when * in slideshow caption doesn't work

Recommended Posts

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
  • Replies 0
  • Views 683
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.