Ad7am

Not yet. Very interested to see what you do & how you do it.

Excellent. How?

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site: 1. "Making Stagger Reveal Animations for Text": https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 2. "Ideas for Distorted Link Effects on Menus": https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html 3. "Animated Custom Cursor Effects": https://tympanus.net/Development/AnimatedCustomCursor/index3.html 4. "Text Distortion Effects using Blotter.js": https://tympanus.net/Development/TextDistortionEffects/index.html It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me. One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. Is he correct? Is there a solution? Thanks for looking. Adam

Have you gotten this to work on Squarespace?

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>

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. 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; }

Thanks for asking, Tuan. I emailed you, and will do so again. Nope, on mobile I still can't get the long images to show in the lightbox at full width without cutting off at the bottom — there's no scrollbar. It seems “overflow-y: auto !important;” is being overruled somewhere.

Here's how to make it larger: .gallery-lightbox-close-btn-icon { transform: scale(2, 2); } You can also do something like this: .gallery-lightbox-close-btn-icon { transform: scale(2, 2); transition: 1s; } .gallery-lightbox-close-btn-icon:hover { transform: rotate(270deg) scale(4, 4); }

Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS: .gallery-lightbox-item[data-active='true'] { height: auto !important; } .gallery-lightbox-list { overflow-x: hidden; overflow-y: auto !important; z-index: 100; } That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be. HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop. Anyone have a solution for this, please?

Hi Bangan, I want to enable images in gallery lightboxes to show at their full width (no matter the height), so I used this code: .gallery-lightbox-item { height: auto !important; } .gallery-lightbox-wrapper { overflow-x: hidden; overflow-y: auto; } This works, with one issue: The scroll bar is outside the <Next> arrow. I tried substituting .gallery-lightbox-wrapper with each of these other IDs I found in the page source: .gallery-lightbox-wrapper .gallery-lightbox-item-wrapper .gallery-lightbox-item .gallery-lightbox-list .gallery-lightbox-item-src .gallery-lightbox-item-img Unfortunately the only one that came close was .gallery-lightbox-list — that put the scroll bar inside the arrow, but for some reason scrolling didn't work. Any ideas to solve this? Thanks in advance.

Thanks for posting this list, Tuanphan. For gallery lightboxes, I've found the following IDs: .gallery-lightbox-wrapper .gallery-lightbox-item-wrapper .gallery-lightbox-item .gallery-lightbox-list .gallery-lightbox-item-src .gallery-lightbox-item-img I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code: .gallery-lightbox-item { height: auto !important; } .gallery-lightbox-wrapper { overflow-x: hidden; overflow-y: auto; } It works, with one issue: The scroll bar is outside the <Next> arrow. I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work. Any ideas to solve this? Thanks in advance.