https://www.heutinkvoorthuis.nl/Scripts/default/modules/productdetail.images.js

1modules.productdetailimages = (function ($) {
2	var me = {
3		moduleContainer: null,
4
5		// Selector for the figure-element.
6		// Original value: .product-img
7		figureElementSelector: "[data-figure-element]",
8
9		// Selector for the main image element
10		// Original value: .details-sec .product-img img
11		mainImageSelector: "[data-main-image]",
12
13		// Selector for the element that contains thumbnails
14		// Original value: .thumbs
15		thumbnailContainerSelector: "[data-thumbnail-container]"
16	};
17
18	me.init = function (moduleContainer) {
19		me.moduleContainer = moduleContainer;
20
21		$(me.thumbnailContainerSelector).on('click', 'li:not(.isvideo)', function (e) {
22			e.preventDefault();
23
24			var img = $(this).find('img');
25			var secImg = $(me.mainImageSelector);
26
27			$(this).addClass('active selected').siblings().removeClass('active selected');
28
29			secImg.attr({
30				'data-b1-src': img.attr('data-b1l-src'),
31				'data-b1-src-at2x': img.attr('data-b1l-src-at2x'),
32				'data-b2-src': img.attr('data-b2l-src'),
33				'data-b2-src-at2x': img.attr('data-b2l-src-at2x'),
34				'data-b3-src': img.attr('data-b3l-src'),
35				'data-b3-src-at2x': img.attr('data-b3l-src-at2x')
36			});
37			secImg.GenericResize();
38		});
39
40		$(me.thumbnailContainerSelector).on('click', 'li.isvideo', function (e) {
41			$(this).addClass('selected').siblings().removeClass('selected');
42			var index = $(me.thumbnailContainerSelector).find('li').index($(this));
43
44			$(me.figureElementSelector).zoom('show', index);
45		});
46
47		//Build the zoomOptions object for jquery.zoom
48		var zoomOptions = {
49			levels: 5,
50			indexFromList: {
51				objects: $(me.thumbnailContainerSelector + ' ol'),
52				selector: 'li.active'
53			},
54			images: []
55		};
56
57		//Collect all images and videos
58		var images = $('img[zoom-width], li.isvideo a img');
59		for (var x = 0; x < images.length; x++) {
60			var el = $(images[x]);
61			var zoomObject = {
62				thumb: el.attr('src'),
63				initial: {},
64				zoom: {}
65			};
66
67			//check if the item is a video
68			zoomObject.isVideo = el.data('isvideo') == true;
69
70			//if it is a video then fetch the video code.
71			//Add the video to the list and continue with the next item.
72			if (zoomObject.isVideo) {
73				zoomObject.ytCode = el.data('youtube-video');
74				zoomObject.vimeoCode = el.data('vimeo-video');
75				zoomObject.videoUrl = el.data('video-url');
76				zoomOptions.images[zoomOptions.images.length] = zoomObject;
77				continue;
78			}
79
80			//If it is an image then collect all zoom options per breakpoint for the item.
81			for (var i = 1; i <= 6; i++) {
82				var b = 'b' + i;
83				var datab = 'data-' + b;
84
85				if (typeof el.attr(datab + '-zoom') == typeof undefined || el.attr(datab + '-zoom') == false) continue;
86
87				zoomObject.initial[b] = {
88					normal: el.attr(datab + '-initial'),
89					retina: el.attr(datab + '-initial-retina')
90				}
91
92				zoomObject.zoom[b] = {
93					size: {
94						width: el.attr('zoom-width'),
95						height: el.attr('zoom-height')
96					},
97
98					normal: el.attr(datab + '-zoom'),
99					retina: el.attr(datab + '-zoom-retina')
100				};
101			}
102
103			zoomOptions.images[zoomOptions.images.length] = zoomObject;
104		}
105
106		//After having collected all the breakpoints, add the image to the collection.
107		$(me.figureElementSelector).zoom(zoomOptions);
108	};
109
110	return me;
111}(jQuery));