Vertical Image Stack Scroll

Hi there,

I'm looking to add a code to that will allow for a vertical scroll stacked image function in Squarespace like this: https://kyhastudios.com/au/products/berkeley?variant=41317405622408. I want the images displayed on the left side scrollable, and the right side to remain stagnant. I will have a number of pages that will need to use this code to display a client's dresses, note these pages will be regular Squarespace pages and not ecommerce shoppable product pages.

Thanks, Em

Do this for regular pages or products?

If regular/product, can you share link? 

It's for a regular page, not shoppable product pages. You can see an example of an existing page set up here: https://www.spherebridalgallery.com/chosen-by-kyha-azul, but as mentioned, would like to make the images scrollable like this https://kyhastudios.com/au/products/berkeley?variant=41317405622408

21 hours ago, EmmaJadeW said:

It's for a regular page, not shoppable product pages. You can see an example of an existing page set up here: https://www.spherebridalgallery.com/chosen-by-kyha-azul, but as mentioned, would like to make the images scrollable like this https://kyhastudios.com/au/products/berkeley?variant=41317405622408

Try to imagine your layout.

So the page will have

Left is vertical image (1 or more images)

Right is description

and under both is related items

Is that right?

Your request is possible, but I need to know exactly to think the most appropriate solution.

Yes, the left side of the page will have scrollable vertical images, the right side will be stagnant and will have a description and a button (like the attached). There will be no other sections or content underneath either side of these besides  the footer. 
 

To make vertical images we can use Gallery Section Grid (then use code to make it show 1 image/row). To make gallery image - text section side by side, we can use code.

Demo: https://tuanphan3.squarespace.com/vertical-image-stack-scroll?noredirect

Pass: abc

All steps should be

(1) Add this code to Website Tools (under Not Linked/Hidden) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.custom-slider-item').closest('section.page-section').addClass('custom-slider-item');
  $('section.custom-slider-item').wrapAll('<section class="custom-slider-parent"></section>');
});
</script>
<style>
  @media screen and (min-width:768px) {
section.custom-slider-parent {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
}
section.custom-slider-parent>section:nth-child(2) {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
}
section.custom-slider-item .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
    grid-gap: 0 !important;
    padding: 0 !important;
    }}
</style>

(2) Add 2 sections

Top is Gallery Grid

Second is standard section

(3) Enable Gallery Grid Caption

(4) Edit first image > Paste this code

<span class="custom-slider-item"></span>

(5) Edit Text Section > Add a Code Block > paste this code

<span class="custom-slider-item"></span>

Hello! I'm also trying to do this. Preferably on the right side.

I've followed the steps and the gallery section then disappears. 

This is an example of what I'm trying to create - https://www.s-rlstudio.com/case-studies/beatrice-studios 

Thanks 🙂