Gallery Images Pinch Zoom

Description

• adding pinch zoom in Gallery Lightbox Images
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you enabled Lightbox in Gallery Images

#1.2. Hover on Page where you use Gallery Images > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 06.26c28v2 Gallery Images Pinch Zoom -->
<script>
window.TP_ZoomGallery = {
  containerSelector: '.gallery-grid, .gallery-strips, .gallery-masonry',
  linkSelector: 'a[class*="lightbox-link"]',
  hiResFormat: 2500,
  clickZoomLevel: 2.5,
  maxZoom: 4,
  bgVar: '--tweak-gallery-lightbox-background-color',
  iconVar: '--tweak-gallery-lightbox-icon-color',
  backdropOpacity: 0.9,
  closeSize: 24,
  arrowSize: 24,
  paddingVw: 3,
  paddingExtraVertical: 20
};
</script>
<script type="module" src="https://code.beaverhero.com/gallerys/0626c28v2galleryimagespinchzoom.js"></script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page > Add a Block

Choose Markdown

Add this code into Markdown

<script>
window.TP_ZoomGallery = {
  containerSelector: '.gallery-grid, .gallery-strips, .gallery-masonry',
  linkSelector: 'a[class*="lightbox-link"]',
  hiResFormat: 2500,
  clickZoomLevel: 2.5,
  maxZoom: 4,
  bgVar: '--tweak-gallery-lightbox-background-color',
  iconVar: '--tweak-gallery-lightbox-icon-color',
  backdropOpacity: 0.9,
  closeSize: 24,
  arrowSize: 24,
  paddingVw: 3,
  paddingExtraVertical: 20
};
</script>
<script type="module" src="https://code.beaverhero.com/gallerys/0626c28v2galleryimagespinchzoom.js"></script>