Jump to content

7.1 - Issue with Carousel with CSS display:none on page load - not showing correct thumbnail once displayed

Recommended Posts

Hello,
I created a web page using Squarespace 7.1  that has several carousels that have CSS display:none on page load. I then have jQuery code that toggles those blocks on/off when some type of widget is selected. The thumbnails for those blocks are not correct once they are turned on - the images are stretched and are not the correct thumbnail size.

 

If I change the code and have the blocks start as display:block on page load, then use the jQuery widget to toggle the images are fine. The problem only happens when the blocks are initially hidden with display:none.

I'm new to squarespace but I'm thinking maybe it's some type of issue where the imageloader is not pre-loading the thumbnails or something since those carousel blocks are gone.  

If I need to trigger the load of the thumbnails for the hidden elements when the event fires ....well..i have no idea how to do that. Can anyone assist?

Here's a super simplified version of my code - still illustrates the issue.

Thanks!

<script>
 $( document ).ready(function() {  
    $("button").click( function( event ) {
         $(".sqs-block-summary-v2").toggle();
    });
});  
</script>

<style>
.sqs-block-summary-v2 {
    display: none;
  }
</style>

<button>
  press me
</button>
Link to comment
  • Replies 0
  • Views 385
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.