Jump to content

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

Recommended Posts

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.


 $( document ).ready(function() {  
    $("button").click( function( event ) {

.sqs-block-summary-v2 {
    display: none;

  press me
Link to comment
  • Replies 0
  • Views 336
  • Created
  • Last Reply


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.