https://www.vaarhuis.nl/themes/lifestyleyachting/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=2.0.4

1 /*!
2 * Thumbnail helper for fancyBox
3 * version: 1.0.2
4 * @requires fancyBox v2.0 or later
5 *
6 * Usage: 
7 *     $(".fancybox").fancybox({
8 *         thumbs: {
9 *             width	: 50,
10 *             height	: 50
11 *         }
12 *     });
13 * 
14 * Options:
15 *     width - thumbnail width
16 *     height - thumbnail height
17 *     source - function to obtain the URL of the thumbnail image
18 *     position - 'top' or 'bottom'
19 * 
20 */
21(function ($) {
22	//Shortcut for fancyBox object
23	var F = $.fancybox;
24
25	//Add helper object
26	F.helpers.thumbs = {
27		wrap: null,
28		list: null,
29		width: 0,
30
31		//Default function to obtain the URL of the thumbnail image
32		source: function (el) {
33			var img = $(el).find('img');
34
35			return img.length ? img.attr('src') : el.href;
36		},
37
38		init: function (opts) {
39			var that = this,
40				list,
41				thumbWidth = opts.width || 50,
42				thumbHeight = opts.height || 50,
43				thumbSource = opts.source || this.source;
44
45			//Build list structure
46			list = '';
47
48			for (var n = 0; n < F.group.length; n++) {
49				list 

49+= '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
50			}
51
52			this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo('body');
53			this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
54
55			//Load each thumbnail
56			$.each(F.group, function (i) {
57				$("<img />").load(function () {
58					var width = this.width,
59						height = this.height,
60						widthRatio, heightRatio, parent;
61
62					if (!that.list || !width || !height) {
63						return;
64					}
65
66					//Calculate thumbnail width/height and center it
67					widthRatio = width / thumbWidth;
68					heightRatio = height / thumbHeight;
69					parent = that.list.children().eq(i).find('a');
70
71					if (widthRatio >= 1 && heightRatio >= 1) {
72						if (widthRatio > heightRatio) {
73							width = Math.floor(width / heightRatio);
74							height = thumbHeight;
75
76						} else {
77							width = thumbWidth;
78							height = Math.floor(height / widthRatio);
79						}
80					}
81
82					$(this).css({
83						width: width,
84						height: height,
85						top: Math.floor(thumbHeight / 2 - height / 2),
86						left: Math.floor(thumbWidth / 2 - width / 2)
87					});
88
89					parent.width(thumbWidth).height(thumbHeight);
90
91					$(this).hide().appendTo(parent).fadeIn(300);
92
93				}).attr('src', thumbSource(this));
94			});
95
96			//Set initial width
97			this.width = this.list.children().eq(0).outerWidth();
98
99			this.list.width(this.width * (F.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5)));
100		},
101
102		//Center list
103		update: function (opts) {
104			if (this.list) {
105				this.list.stop(true).animate({
106					'left': Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5))
107				}, 150);
108			}
109		},
110
111		beforeLoad: function (opts) {
112			//Remove self if gallery do not have at least two items 
113			if (F.group.length < 2) {
114				F.coming.helpers.thumbs = false;
115
116				return;
117			}
118
119			//Increase bottom margin to give space for thumbs
120			F.coming.margin[ opts.position === 'top' ? 0 : 2 ] = opts.height + 30;
121		},
122
123		afterShow: function (opts) {
124			//Check if exists and create or update list
125			if (this.list) {
126				this.update(opts);
127
128			} else {
129				this.init(opts);
130			}
131
132			//Set active element
133			this.list.children().removeClass('active').eq(F.current.index).addClass('active');
134		},
135
136		onUpdate: function () {
137			this.update();
138		},
139
140		beforeClose: function () {
141			if (this.wrap) {
142				this.wrap.remove();
143			}
144
145			this.wrap = null;
146			this.list = null;
147			this.width = 0;
148		}
149	}
150
151}(jQuery));