brotherton-erpnext/erpnext/templates/generators/item/item_image.html

<div class="col-md-4 h-100">
{% if slides %}
{{ product_image(slides[0].image, 'product-image') }}
<div class="item-slideshow">
	{% for item in slides %}
	<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}"
			src="{{ item.image }}" alt="{{ item.heading }}">
	{% endfor %}
</div>
<!-- Simple image slideshow -->
<script>
	frappe.ready(() => {
		$('.page_content').on('click', '.item-slideshow-image', (e) => {
			const $img = $(e.currentTarget);
			const link = $img.prop('src');
			const $product_image = $('.product-image');
			$product_image.find('a').prop('href', link);
			$product_image.find('img').prop('src', link);

			$('.item-slideshow-image').removeClass('active');
			$img.addClass('active');
		});
	})
</script>
{% else %}
{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
{% endif %}

<!-- Simple image preview -->

<div class="image-zoom-view" style="display: none;">
	<button type="button" class="close" aria-label="Close">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
		 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
			<line x1="18" y1="6" x2="6" y2="18"></line>
			<line x1="6" y1="6" x2="18" y2="18"></line>
		</svg>
	</button>
</div>
</div>
<style>
	.website-image {
		cursor: pointer;
	}

	.image-zoom-view {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1080;
	}

	.image-zoom-view img {
		max-height: 100%;
		max-width: 100%;
	}

	.image-zoom-view button {
		position: absolute;
		right: 3rem;
		top: 2rem;
	}

	.image-zoom-view svg {
		color: var(--white);
	}
</style>
<script>
	frappe.ready(() => {
		const $zoom_wrapper = $('.image-zoom-view');

		$('.website-image').on('click', (e) => {
			e.preventDefault();
			const $img = $(e.target);
			const src = $img.prop('src');
			if (!src) return;
			show_preview(src);
		});

		$zoom_wrapper.on('click', 'button', hide_preview);

		$(document).on('keydown', (e) => {
			if (e.key === 'Escape') {
				hide_preview();
			}
		});

		function show_preview(src) {
			$zoom_wrapper.show();
			const $img = $(`<img src="${src}">`)
			$zoom_wrapper.append($img);
		}

		function hide_preview() {
			$zoom_wrapper.find('img').remove();
			$zoom_wrapper.hide();
		}
	})
</script>