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

Simple. Horizontal. Scroll


Recommended Posts

I'm here out of desperation as I've wasted hours messing about with overcomplicated gallery options.

I simply want my images within a gallery page to have a horizontal scroll, not vertical. (Not a carousel slideshow, where one image at a time is visible and responsive features are used).

I haven't been able to find a way of searching SS templates by the availability of a horizontal scroll for image content. Templates like 'Ishimoto' offer no adjustment to image padding.

A good example would be the 'Horizon' themes by Format - basic code, uncomplicated clean look. A perfect example on a functioning website would be: https://www.the7thmember.xyz/

I feel like I'm missing something that should be really easy to find, but Gallery Blocks and Gallery Pages are both lacking a basic 'I want it going sideways' option.

Any help would be greatly appreciated.

Big thanks.

 

Link to comment
  • 2 weeks later...

@RWOLFE Can you provide us with a working link to a Gallery Page/Gallery Block on your site where you want to achieve this?

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 3 weeks later...

Well, here's a start - problem being it's twice the length of the actual gallery and it doesn't move along with the regular arrow navigation, so if you navigate halfway before you use the scroll bar, that becomes the starting position for the scroll bar and you can't go back before that point.

Any way to fix these issues?

.collection-type-gallery #slideshow {
    overflow-x: scroll !important;
}

Edited by khomatech
Link to comment
  • 2 months later...
  • 2 months later...
  • 1 month later...
  • 1 month later...

@ccrews  @AdrienneN @meocoli

Hi everybody,

I am quite new in CSS and have only some basic knowledge and experience 😉  but anyway I tried to find out how this could work...because I wanted it a lot !
By a lot of trial & error & time. - and not sure if the code is really a solution without mistakes -   it works!

Simple gallery: in Brine template and I used an index gallery with: layout slideshow, and the fixed height at 108vh. with 6 slides.

#horizontal-gallery {
 width:600vw;
 margin-top:-5vw;
 margin-bottom:-5vw;
 overflow-x:scroll;
 overflow-y:hidden!important;
 position:absolut;
 }

#horizontal-gallery
.Index-gallery-item-image {
  width:100vw!important;
  max-height:105vh;
  margin-top:-0vw;
  padding-bottom:3.6vw;
}

#horizontal-gallery{
article:nth-of-type(1){
  opacity:1.0;
  left:0vw!important;
  right:0vw;
.Index-gallery-item-content
  {margin-left:-500vw!important;
}}
 article:nth-of-type(2){
   width:100vw!important;
  left:0vw!important;
   opacity:1.0;
} 
 article:nth-of-type(3){
    width:100vw!important;
 left:100vw;
} 
 article:nth-of-type(4){
   width:100vw!important;
  left:200vw;
 } 
article:nth-of-type(5){
  left:-200vw!important;
  .Index-gallery-item-content
  {margin-left:-500vw!important;
  }} 
article:nth-of-type(6){
  left:-100vw!important;
  .Index-gallery-item-content
  {margin-left:-500vw!important;
  }}  
}

.Index-gallery-item-content-body p:nth-of-type(1){font-size:0.5em!important;
  color:#ccaa78;
 margin-top:-4vw!important;

}

A bit more complex is this version - but it's an entire index that works like this and so you are free with the content for each page. The scrolling go up and down while the window is horizontal - I love this !! 🙂Sometimes the browser blocks the scrolling until you make the window a tiny bit larger or smaller - do not know why....

#collection-5f749ce77757eb5a41feb591{

.Content-outer {
-webkit-overflow-scrolling: touch!important;
  overflow-scrolling: touch!important;
  overflow-x:hiddden;
  overflow-y:scroll!important;
   -webkit-overflow-y:scroll!important;
  transform: rotate(270deg)   translateX(-100%);
  transform-origin: top left;
  top:0!important;
  position:absolute;
  width:100vh;
  height:100vw;
  top: 0vw;
  bottom:0vw;
  right: 0vw;
  left: 0vw;
}}
//turns/header/images
#page-five,
#page-four,
#page-three,
#page-two,.IndexFirstSectionHeight{
  transform: rotate(90deg)   translateY(-100vh)!important;
transform-origin: top left!important;
 }
//index first section
#page-two{
width:120vw;
margin-top:4vw;
margin-bottom:40vw;
}
#page-two{
.Index-page-content.sqs-alternate-block-style-container{
margin-bottom:10vw;
margin-left:-5%;
}}
#page-three {.Index-page-content{
  position:absolute;
  margin-top:20vw!important;
  display:flex;
  flex-direction:column;
 align-items: center;
  justify-content:center!important;
  display: flex;
  flex-wrap: wrap; 
}}

#page-five,
#page-four,
#page-three {
width:100vw;
}

#page-four{margin-left:0vw;
   width:100vw;
 margin-top:45vw;  //is left:
  margin-bottom:45vw; //is right:
  #block-yui_3_17_2_1_1601546029396_3755{
    width:40%;
    margin-left:30%; } 
  #block-b1eda712c8f4ae9551f1{
    width:100%;
    padding:0;
  }
}
.Index-nav{
  display:none!important;}

.Index-page-scroll-indicator{
 transform: rotate(-90deg) translateY(0px)!important;  
margin-bottom:4vw;
  margin-left:-15vw!important;
}

To all of you much more experienced guys - if you see some mistakes - please let me know.  

 

here is the demo site:

https://my-personal-test.squarespace.com/

the pw is:  luck

 

Edited by SabineM
Link to comment
  • 1 month later...
  • 4 weeks later...
  • 4 weeks later...
  • 2 weeks later...

Same. Why have Squarepace not added a horizonal scroll gallery. One with padding that switches to Vertical on a mobile. Its the best option for most phpotographers. As we can add both landscape and porait images. The slidr would look great on horizonally on desktop (high option) then on mobile we get the vertical scroll.

A good example gallery: https://www.helencathcart.com/work/1475/

Link to comment
  • 3 months later...
  • 3 weeks later...
On 6/16/2021 at 4:06 PM, JealousWeekends said:

hey @RolandFuseHub Can we use it on multiple pages? Is there a maximum when it comes to sections.

Hi @JealousWeekends You can paste the code into Code Injection so ALL pages have that horizontal scroll, or...paste it in a specific Page Injection for only one (or more) particular page(s).

No restrictions for the amount of sections!

The only thing to keep in mind: because of the limited height, which is constricted by the viewport of the browser and device used, you can't have too much content in a section. We have created the code in such a way that if we detect that you are on a device/or have set your browser to be narrow, we detect that and automatically switch it to a regular vertical view.

More on https://www.sqsmods.com/horizontal and the demo here: https://devhor.squarespace.com/?password=sneakpeek

This video shows it:
We only injected the HOR SCROLL on the Homepage and the others pages have a regular vertical scroll. You can also see what happens when we squeeze the window.

Edited by RolandFuseHub
Typo
Link to comment
  • 1 month later...
On 5/23/2021 at 11:39 AM, RolandFuseHub said:

Hi Everyone,

Maybe this solves your challenge: https://www.sqsmods.com/horizontal

We are planning to offer a a per section horizontal scroll.

Example:
- you have 7 sections + footer
- section 3-4-5 should be shown horizontally when you scroll to that point, 1-2-6-7 vertically.

Cheers,

Roland

Hey Roland,

Trying this now and it works great so far.

Is there any way to finish the horizontal scrolling on the final section instead of the footer? I tried hiding the footer to solve this myself but am dealt with empty white space after scrolling past my final section.

Website: www.zacela.com/about-1

PW: zacela

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...