Add an Image Block over Gallery Slideshow

Suppose you want to move 2 Image Blocks over 2 Slideshows, you can follow these.

#1. Add a Section with 2 Image Blocks

#2. Use Squarespace ID Finder to find the ID of 2 Image Blocks and 2 Slideshows. In my example, we will have:

Image Block 1 (Left image): #block-yui_3_17_2_1_1716948754371_2168

Image Block 2 (Right image): #block-yui_3_17_2_1_1716948754371_3229

Left Slideshow: section[data-section-id=”6655814af27321176a65fb4e”]

Right Slideshow: section[data-section-id=”6655814af27321176a65fb50″]

#3. Use this code to Code Injection – Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
  	// VFX
  $('div#block-yui_3_17_2_1_1716948754371_2168').appendTo('section[data-section-id="6655814af27321176a65fb4e"] .gallery-fullscreen-slideshow-list');
  	// Postproduction
  $('div#block-yui_3_17_2_1_1716948754371_3229').appendTo('section[data-section-id="6655814af27321176a65fb50"] .gallery-fullscreen-slideshow-list');   
  });
</script>

#4. Use this code to Custom CSS box to align the image center + adjust the image block size.

div.gallery-fullscreen-slideshow-list .image-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 350px;
    z-index: 999999
}

#5. Result

Ask me a question, free