Jump to content

AKN

Member
  • Posts

    18
  • Joined

  • Last visited

Posts posted by AKN

  1. Thanks, this worked for the mobile version. 

    What about for desktop screen? I am trying something with padding-top/bottom or margin-top/bottom. They did not work:

    .light-caption {
        width: calc(~"50% - 80px") !important;
        padding-right: 5px;
        padding-left: 5px;
      padding-bottom: 0px;
      padding-bottom: -100px;
    }

     

  2. I would like to know if buttons can be added to each portfolio gallery image item, clicking on which redirects to the corresponding store page, for example. 

    Can this functionality work simultaneously with lightbox settings on the gallery? 

    (It is possible to add links to gallery items, which can link to any other page - but I want to retain the gallery as a lightbox-enabled gallery, instead of one where clicking the image does not enlarge image for better view but redirects to buy option). 

  3. Hi @tuanphan, @Beyondspace

    I too am finding a solution for this. My store has option to select different media for wall art, for example. Each of these media have different maintenance/fabrication details or techniques. 

    I want to change the description corresponding to each of the materials. Any help here? 

    (In my particular case, the descriptions per material are universal - i.e., I would like to apply them globally). 

     

    Thanks for your help!

  4. Hello,

    I have the very basic need for pinch to zoom in lightbox mode, to see images in higher resolution. Here is the code that I have tried, based on other code that seems to have this structure: 

    In Code Injection:

    <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <script>
      // Custom JavaScript code to enable pinch-to-zoom for Squarespace lightbox gallery
      document.addEventListener('DOMContentLoaded', function () {
        const lightboxImages = document.querySelectorAll('.gallery-masonry-lightbox-link img');
    
        lightboxImages.forEach((image) => {
          const hammertime = new Hammer(image);
          hammertime.get('pinch').set({ enable: true });
        });
      });
    </script>
    

    In lieu of  '.gallery-masonry-lightbox-link img', I have also tried using the following to no effect: 

    .gallery-lightbox-list 
    .gallery-lightbox-item img
    .yui3-lightbox2
    .sqs-mobile-web-content-editing

    Any recommendations for this? 

    Thanks for your help!

  5. Hello,

    I am trying the following code in Code Injection:

    <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <script>
      // Custom JavaScript code to enable pinch-to-zoom for Squarespace lightbox gallery
      document.addEventListener('DOMContentLoaded', function () {
        const lightboxImages = document.querySelectorAll('.gallery-masonry-lightbox-link img');
    
        lightboxImages.forEach((image) => {
          const hammertime = new Hammer(image);
          hammertime.get('pinch').set({ enable: true });
        });
      });
    </script>

    However I do not know the precise handle to select the gallery-masonry-lightbox image in the querySelectorAll. 

    i.e. I would like to call the lightbox image, and unsure about this line in the code: 

    '.gallery-masonry-lightbox-link img'

    I have also tried using the following inside the '', to no effect: 

    .gallery-lightbox-list .gallery-lightbox-item
    
    .yui3-lightbox2
    
    .sqs-mobile-web-content-editing

    My aim is to open the image in lightbox and utilize pinch-to-zoom. 

    Any recommendations? 

    Thanks!

  6. I have tried several pieces of the code in this thread but still am unable to enable the caption appearing on the lightbox display only (whether it will be displayed over the image, or below the image is a bridge that's further away.. I would like the option to display it under the image for starters).

    I am trying to do this on a portfolio page. 

     

    Here's the page:HIDDEN

     

    Any help would be greatly appreciated. Thanks!!

×
×
  • 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.