AKN

Hi @tuanphan, I added it to the first image (black and white waterfall) in the Landscapes gallery. 

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

This worked well, Thanks!

Hi @tuanphan, Here's one portfolio gallery subpage: https://www.anerudhkannan.com/landing/landscapes

Thanks for looking into this!

HI @tuanphan, here's the link to the gallery: www.anerudhkannan.com/landing/landscapes

Here's the link to an image that exhibits the problem severely: https://www.anerudhkannan.com/landing/landscapes?itemId=dud0qzs2llzbn8k7ceryst99zyjta5

Thanks for looking into this!

@tuanphan @Beyondspace

I too am interested in this problem. Could you share solution for this? 

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). 

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!

I did not include / end style block 😕 just noticed that. Social media display works well now. Thanks!

@beyondspace / any userwith succesful solution, could you please post css publicly?

I also suddenly have this issue where social link icon stopped showing up when I am outside edit mode. Any help would be appreciated!

@tuanphan

@Beyondspace

Could you please share public css for this issue? Thanks!

Hi @tuanphan, I have the need to make the captions appear outside the image for mobile view. 

Your code works great for desktop mode, but not for mobile - where the captions sometimes overlap with the image. Any recommendations? 

Thanks!

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: 

<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>

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

Hi @tuanphan , any recommendation here? 

I added this to the things I have tried, and it also does not work: 

'.gallery-lightbox-item img'

Thanks for any and all help!

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!

@tuanphanThis worked perfectly, thank you very much!

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!!