Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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>
Edited by marniedevries
Link to post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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


×
×
  • Create New...