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