Jump to content

I am having issue targeting a gallery image item with JS.

Recommended Posts

<script>
let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); 
for (i= 0; i < imgs.length; i++) {
  alert("Hi!");
  i++;
}
  
</script>

<style>/*
section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img {
display: none !important;*/</style>

This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible. 

Link to comment
8 hours ago, Jake235 said:
<script>
let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); 
for (i= 0; i < imgs.length; i++) {
  alert("Hi!");
  i++;
}
  
</script>

<style>/*
section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img {
display: none !important;*/</style>

This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible. 

I think you can apply the following event to make sure that all elements (including image) on your page is completely loaded 

<script>
  (function () {
    window.addEventListener('DOMContentLoaded', () => {
      // run your code here
    });
  })()

</script>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, bangank36 said:

I think you can apply the following event to make sure that all elements (including image) on your page is completely loaded 

<script>
  (function () {
    window.addEventListener('DOMContentLoaded', () => {
      // run your code here
    });
  })()

</script>

 

Thanks. For some reason, that worked. I don’t know why Squarespace doesn’t work the way that you would expect it too. 

Link to comment

May be your code runs at the time your images have not been loaded yet. Therefore, it can not work

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.