AKN

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!

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!

Add to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font: p2; font-family: source code pro; color:grey; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } </style>