https://www.cpdacademy.co/assets/js/fancybox/source/helpers/jquery.fancybox-thumbs.js

1 /*!
2 * Thumbnail helper for fancyBox
3 * version: 1.0.7 (Mon, 01 Oct 2012)
4 * @requires fancyBox v2.0 or later
5 *
6 * Usage:
7 *     $(".fancybox").fancybox({
8 *         helpers : {
9 *             thumbs: {
10 *                 width  : 50,
11 *                 height : 50
12 *             }
13 *         }
14 *     });
15 *
16 */
17;(function ($) {
18	//Shortcut for fancyBox object
19	var F = $.fancybox;
20
21	//Add helper object
22	F.helpers.thumbs = {
23		defaults : {
24			width    : 50,       // thumbnail width
25			height   : 50,       // thumbnail height
26			position : 'bottom', // 'top' or 'bottom'
27			source   : function ( item ) {  // function to obtain the URL of the thumbnail image
28				var href;
29
30				if (item.element) {
31					href = $(item.element).find('img').attr('src');
32				}
33
34				if (!href && item.type === 'image' && item.href) {
35					href = item.href;
36				}
37
38				return href;
39			}
40		},
41
42		wrap  : null,
43		list  : null,
44		width : 0,
45
46		init: function (opts, obj) {
47			var that = this,
48				list,
49				thumbWidth  = opts.width,
50				thumbHeight = opts.height,
51				thumbSource = opts.source;
52
53			//Build list structure
54			list = '';
55
56			for (var n = 0; n < obj.group.length; n++) {
57				list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
58			}
59
60			this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
61			this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
62
63			//Load each thumbnail
64			$.each(obj.group, function (i) {
65				var el   = obj.group[ i ],
66					href = thumbSource( el );
67
68				if (!href) {
69					return;
70				}
71
72				$("<img />").on("load", function () {
73					var width  = this.width,
74						height = this.height,
75						widthRatio, heightRatio, parent;
76
77					if (!that.list || !width || !height) {
78						return;
79					}
80
81					//Calculate thumbnail width/height and center it
82					widthRatio  = width / thumbWidth;
83					heightRatio = height / thumbHeight;
84
85					parent = that.list.children().eq(i).find('a');
86
87					if (widthRatio >= 1 && heightRatio >= 1) {
88						if (widthRatio > heightRatio) {
89							width  = Math.floor(width / heightRatio);
90							height = thumbHeight;
91
92						} else {
93							width  = thumbWidth;
94							height = Math.floor(height / widthRatio);
95						}
96					}
97
98					$(this).css({
99						width  : width,
100						height : height,
101						top    : Math.floor(thumbHeight / 2 - height / 2),
102						left   : Math.floor(thumbWidth / 2 - width / 2)
103					});
104
105					parent.width(thumbWidth).height(thumbHeight);
106
107					$(this).hide().appendTo(parent).fadeIn(300);
108
109				})
110				.attr('src',   href)
111				.attr('title', el.title);
112			});
113
114			//Set initial width
115			this.width = this.list.children().eq(0).outerWidth(true);
116
117			this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
118		},
119
120		beforeLoad: function (opts, obj) {
121			//Remove self if gallery do not have at least two items
122			if (obj.group.length < 2) {
123				obj.helpers.thumbs = false;
124
125				return;
126			}
127
128			//Increase bottom margin to give space for thumbs
129			obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
130		},
131
132		afterShow: function (opts, obj) {
133			//Check if exists and create or update list
134			if (this.list) {
135				this.onUpdate(opts, obj);
136
137			} else {
138				this.init(opts, obj);
139			}
140
141			//Set active element
142			this.list.children().removeClass('active').eq(obj.index).addClass('active');
143		},
144
145		//Center list
146		onUpdate: function (opts, obj) {
147			if (this.list) {
148				this.list.stop(true).animate({
149					'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
150				}, 150);
151			}
152		},
153
154		beforeClose: function () {
155			if (this.wrap) {
156				this.wrap.remove();
157			}
158
159			this.wrap  = null;
160			this.list  = null;
161			this.width = 0;
162		}
163	}
164
165}(jQuery));