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

Ad7am

Member
 View Profile  See their activity

  • Content Count

    12

  • Joined

  • Last visited

Community Reputation

4 Neutral

See reputation activity

Recent Profile Visitors

210 profile views
  1.    Ad7am reacted to an answer to a question: How to reduce huge spacing between code blocks
  2.    bangank36 reacted to a question: Scroll/pan in lightbox on mobile — solved
  3.    Ad7am reacted to an answer to a question: Change width of gallery section type slideshow:simple (7.1 theme Barbosa)
  4.    Ad7am reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  5.    Ad7am reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  6.    Ad7am reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  7.    itsgus reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  8. Ad7am
    Not yet. Very interested to see what you do & how you do it.
  9.    Ad7am reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  10. Ad7am
    Excellent. How?
  11.    Ad7am reacted to an answer to a question: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  12. Ad7am started following Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
  13. Ad7am
    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.ht
  14. Ad7am started following Adding custom cursor from codepen and Custom Invert dot cursor
  15.    Ad7am reacted to an answer to a question: Inverted Cursor Hover Effect
  16.    Ad7am reacted to an answer to a question: Inverted Cursor Hover Effect
  17. Ad7am started following brandon
  18. Ad7am started following neeklamy
  19. Ad7am started following colin.irwin
  20. Ad7am started following Scoobie
  21. Ad7am started following creedon
  22. Ad7am started following derricksrandomviews
  23.    Ad7am reacted to an answer to a question: Staggered animation timing
  24. Ad7am
    Have you gotten this to work on Squarespace?
  25.    bangank36 reacted to an answer to a question: Scroll/pan in lightbox on mobile — solved
  26.    tuanphan reacted to an answer to a question: Scroll/pan in lightbox on mobile — solved
  27. Ad7am
    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(); }); $("
  28. Ad7am
    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.
  29. Ad7am
    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.
  30. Ad7am
    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); }
  31. Ad7am
    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
  32. Ad7am
    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
  33. Ad7am
    Ad7am changed their profile photo
  34. Ad7am
    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 &
×
×
  • Create New...

Support

Community

Developers

Resources