Image Block Pinch Zoom

Description

• adding pinch-zoom to Image Block Lightbox
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you enabled Lightbox

#1.2. Next, hover on Page where you use Image Block > 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.26c28v1 Image Block Pinch Zoom -->
<script>
window.TP_ZoomImage = {
  selector: '.sqs-block-image .sqs-block-image-button.lightbox',
  hiResFormat: 2500,
  clickZoomLevel: 2.5,
  maxZoom: 4,
  backdropSource: 'auto',
  backdropDark: '#000000',
  backdropLight: 'rgb(246,246,246)',
  iconDark: '#ffffff',
  iconLight: '#000000',
  backdropOpacity: 0.95
};
</script>
<script type="module" src="https://code.beaverhero.com/imageblock/0626c28v1imageblockpinchzoom.js"></script>

#2. Customize

#2.1. In case you want to change Lightbox Overlay Color, you can change Line 09 to Line 12

backdropDark: '#000000',
backdropLight: 'rgb(246,246,246)',
iconDark: '#ffffff',
iconLight: '#000000',

#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 (or add it under Image Block)

Choose Markdown

Add this code into Markdown

<script>
window.TP_ZoomImage = {
  selector: '.sqs-block-image .sqs-block-image-button.lightbox',
  hiResFormat: 2500,
  clickZoomLevel: 2.5,
  maxZoom: 4,
  backdropSource: 'auto',
  backdropDark: '#000000',
  backdropLight: 'rgb(246,246,246)',
  iconDark: '#ffffff',
  iconLight: '#000000',
  backdropOpacity: 0.95
};
</script>
<script type="module" src="https://code.beaverhero.com/imageblock/0626c28v1imageblockpinchzoom.js"></script>