Jump to content

Scroll/pan in lightbox on mobile — solved

Recommended Posts

Site URL: http://bit.ly/ad7am-test1

EDIT 10/26/2020: Solved! See answer below.

The webpage I’m trying to diagnose this on is http://bit.ly/ad7am-test1 and the password is < helper >.

 
The default behavior for the gallery is that clicking or touching an image brings up a lightbox, to show the image at the largest it fits in the window, e.g. at 100% of the height of the viewport. 
 
I've customized the CSS — because I need viewers to be able to read the text — so that the lightbox instead shows the image at 100% of the width of the viewport.
 
The page is loading perfectly in both desktop and mobile. When you click or touch any image, a lightbox opens as it should — showing the image at 100% of the width of the lightbox container, with any vertical overflow hidden but available by scrolling. (On mobile there's no indication of the overflow, of course, because scrollbars on mobile are hidden by default.) 
 
Further, clicking one of the previous/next arrows, or grabbing the image and dragging horizontally, will take you to the previous or next image in the series — as is the default behavior.
 
The problem comes when you view that lightbox on mobile. The image appears, but attempting to scroll that image to see the overflow does not work using touch. 
 
Expected (correct) behavior: 
On mobile, images shown by the lightbox that are longer than the container should vertically scroll/pan by touch (with one or two fingers) within the container.
 
Current (incorrect) behavior:
On mobile, these images cannot vertically scroll/pan using touch (one or two fingers). They can only vertically scroll/pan when they are grabbed with an attached mouse/trackpad to click and drag. 
 
The customized CSS below is correct. The issue is that because the default behavior was for the lightbox to show the entire image, there is some code in the javascript (I believe) that is actively preventing viewers from scrolling/panning the image by touch. 
 
Squarespace's support won’t help because they don’t support anything even remotely connected to customized CSS. And I can't find the answer in these forums.
 
Finally, the following is the only custom CSS I’ve added:
 
/* **** CUSTOM CSS **** */

/* Colored borders added only for debugging */

.gallery-lightbox-list {
  overflow-x: hidden;
  overflow-y: auto !important; 
  z-index: 100; 
  border: 5px solid green;
} 

.gallery-lightbox-item[data-active='true'] {
  height: auto !important;  
  border: 5px solid blue;
}

.gallery-lightbox-item img {
  max-width: 99%;
  border: 5px solid red;
}

/* Note: I change close button color when editing to know if changes have take effect. */

.gallery-lightbox-close-btn {
  color: yellow !important;
}

 

Edited by Ad7am
clarity
Link to comment
  • Ad7am changed the title to Scroll/pan in lightbox on mobile — solved

For anyone else who needs this, my friend Jason solved it by adding jquery and then disabling touchmove and touchstart. So in addition to adding the custom CSS above, go to Settings > Advanced > Code Injection > Footer and add: 

<script   
        src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous">
</script>

<script>
 $(document).ready(function()  {
  
    $("div.gallery-lightbox-list").bind('touchmove', function( event ) {
  event.stopImmediatePropagation();
});
      $("div.gallery-lightbox-list").bind('touchstart', function( event ) {
  event.stopImmediatePropagation();
});
        
    });
</script>

 

Edited by Ad7am
grammar
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...

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.