https://www.interfunnels.com/website/js/if-xzoom-init.js

1/**
2 * Image Gallery (xzoom): fancybox / zoom read <a href> and xoriginal.
3 * Builders and AI often update only <img src>, leaving placeholder hrefs (xzoom.png).
4 * Sync real thumb/main URLs before init and when opening the lightbox.
5 */
6(function ($) {
7	'use strict';
8
9	function ifIsXzoomPlaceholder(url) {
10		url = String(url || '');
11		if (!url) {
12			return true;
13		}
14		return /(?:^|\/)(?:xzoom\d*|xzoomm)\.png(?:\?|$)/i.test(url)
15			|| /\/resources\/(?:store\/fashion\/)?xzoom\/images\//i.test(url);
16	}
17
18	function ifResolveGalleryUrl($img, $anchor) {
19		var src = $.trim(($img && $img.length ? $img.attr('src') : '') || '');
20		var href = $.trim(($anchor && $anchor.length ? $anchor.attr('href') : '') || '');
21		if (src && !ifIsXzoomPlaceholder(src)) {
22			return src;
23		}
24		if (href && !ifIsXzoomPlaceholder(href)) {
25			return href;
26		}
27		return src || href || '';
28	}
29
30	function ifSyncXzoomContainers(root) {
31		var $scope = root ? $(root) : $(document);
32		$scope.find('.xzoom-container, [data-component-zoom-gallery]').addBack()
33			.filter('.xzoom-container, [data-component-zoom-gallery]').each(function () {
34				var $root = $(this);
35				$root.find('.xzoom-thumbs a').each(function () {
36					var $a = $(this);
37					var $img = $a.find('img').first();
38					var url = ifResolveGalleryUrl($img, $a);
39					if (!url) {
40						return;
41					}
42					$a.attr('href', url);
43					if ($img.length) {
44						$img.attr('src', url);
45					}
46				});
47				var $main = $root.find('img.xzoom').first();
48				if (!$main.length) {
49					return;
50				}
51				var mainSrc = $.trim($main.attr('src') || '');
52				var mainOrig = $.trim($main.attr('xoriginal') || '');
53				var firstHref = $.trim($root.find('.xzoom-thumbs a').first().attr('href') || '');
54				if ((!mainSrc || ifIsXzoomPlaceholder(mainSrc)) && firstHref) {
55					$main.attr('src', firstHref);
56					mainSrc = firstHref;
57				}
58				if ((!mainOrig || ifIsXzoomPlaceholder(mainOrig)) && mainSrc) {
59					$main.attr('xoriginal', mainSrc);
60				} else if (mainSrc && !ifIsXzoomPlaceholder(mainSrc) && ifIsXzoomPlaceholder(mainOrig)) {
61					$main.attr('xoriginal', mainSrc);
62				}
63			});
64
65		// Legacy img-gallery zoom: container href must match the visible image.
66		$scope.find('.showzoomimg, #first_img, [data-first-img-div]').each(function () {
67			var $box = $(this);
68			var href = $.trim($box.attr('href') || '');
69			var $img = $box.find('img').first();
70			var src = $.trim(($img.attr('src') || ''));
71			if (src && (!href || ifIsXzoomPlaceholder(href) || (href !== src && !ifIsXzoomPlaceholder(src)))) {
72				$box.attr('href', src);
73			}
74		});
75	}
76
77	function ifOpenFancyboxFromDom($main) {
78		var $root = $main.closest('.xzoom-container, [data-component-zoom-gallery]');
79		if (!$root.length) {
80			$root = $main.parent();
81		}
82		var photos = [];
83		var index = 0;
84		var mainSrc = $.trim($main.attr('src') || $main.attr('xoriginal') || '');
85		$root.find('.xzoom-thumbs a').each(function () {
86			var $a = $(this);
87			var url = ifResolveGalleryUrl($a.find('img').first(), $a);
88			if (!url) {
89				return;
90			}
91			if (url === mainSrc || url === $.trim($main.attr('xoriginal') || '')) {
92				index = photos.length;
93			}
94			photos.push({ src: url });
95		});
96		if (!photos.length && mainSrc) {
97			photos.push({ src: mainSrc });
98		}
99		if (!photos.length || typeof $.fancybox !== 'function') {
100			return;
101		}
102		$.fancybox.open(photos, {
103			padding: 0,
104			index: index,
105			helpers: { overlay: { locked: false } }
106		});
107	}
108
109	function ifBindXzoomClick() {
110		$('.xzoom').each(function () {
111			var $main = $(this);
112			// Drop stock setup.js fancybox handler (uses stale placeholder hrefs).
113			$main.off('click').on('click.ifxzoom', function (event) {
114				event.preventDefault();
115				event.stopImmediatePropagation();
116				var xzoom = $main.data('xzoom');
117				if (xzoom && typeof xzoom.closezoom === 'function') {
118					try { xzoom.closezoom(); } catch (eClose) {}
119				}
120				ifSyncXzoomContainers($main.closest('.xzoom-container, [data-component-zoom-gallery]'));
121				ifOpenFancyboxFromDom($main);
122			});
123		});
124		$(document).off('click.ifxzoomThumbs', '.xzoom-thumbs a')
125			.on('click.ifxzoomThumbs', '.xzoom-thumbs a', function (e) {
126				// Keep xzoom thumb switch; never navigate to a stale placeholder href.
127				e.preventDefault();
128				var $a = $(this);
129				var $img = $a.find('img').first();
130				var url = ifResolveGalleryUrl($img, $a);
131				if (url) {
132					$a.attr('href', url);
133				}
134			});
135	}
136
137	function ifInitXzoom() {
138		ifSyncXzoomContainers(document);
139		if (typeof $.fn.xzoom === 'function') {
140			var needsInit = false;

141			$('.xzoom').each(function () {
142				if (!$(this).data('xzoom')) {
143					needsInit = true;
144					return false;
145				}
146			});
147			if (needsInit) {
148				try {
149					$('.xzoom, .xzoom-gallery').xzoom({
150						zoomWidth: 400,
151						title: true,
152						tint: '#333',
153						Xoffset: 15,
154						hover: true
155					});
156				} catch (eInit) {}
157			}
158		}
159		ifBindXzoomClick();
160		$('.xzoom').css('touch-action', 'unset');
161	}
162
163	$(document).ready(function () {
164		if (!$('.xzoom, .xzoom-gallery, .xzoom-container, [data-component-zoom-gallery]').length) {
165			return;
166		}
167		// setup.js (embedded in some sections) may also init; run after it, then re-bind our click.
168		ifInitXzoom();
169		setTimeout(ifInitXzoom, 0);
170		setTimeout(ifInitXzoom, 200);
171	});
172})(jQuery);