Subversion-Projekte lars-tiefland.ci

Revision

Revision 47 | Details | Vergleich mit vorheriger | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
41 lars 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 href = thumbSource( obj.group[ i ] );
66 
 
67 
				if (!href) {
68 
					return;
69 
				}
70 
 
71 
				$("<img />").load(function () {
72 
					var width  = this.width,
73 
						height = this.height,
74 
						widthRatio, heightRatio, parent;
75 
 
76 
					if (!that.list || !width || !height) {
77 
						return;
78 
					}
79 
 
80 
					//Calculate thumbnail width/height and center it
81 
					widthRatio  = width / thumbWidth;
82 
					heightRatio = height / thumbHeight;
83 
 
84 
					parent = that.list.children().eq(i).find('a');
85 
 
86 
					if (widthRatio >= 1 && heightRatio >= 1) {
87 
						if (widthRatio > heightRatio) {
88 
							width  = Math.floor(width / heightRatio);
89 
							height = thumbHeight;
90 
 
91 
						} else {
92 
							width  = thumbWidth;
93 
							height = Math.floor(height / widthRatio);
94 
						}
95 
					}
96 
 
97 
					$(this).css({
98 
						width  : width,
99 
						height : height,
100 
						top    : Math.floor(thumbHeight / 2 - height / 2),
101 
						left   : Math.floor(thumbWidth / 2 - width / 2)
102 
					});
103 
 
104 
					parent.width(thumbWidth).height(thumbHeight);
105 
 
106 
					$(this).hide().appendTo(parent).fadeIn(300);
107 
 
108 
				}).attr('src', href);
109 
			});
110 
 
111 
			//Set initial width
112 
			this.width = this.list.children().eq(0).outerWidth(true);
113 
 
114 
			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)));
115 
		},
116 
 
117 
		beforeLoad: function (opts, obj) {
118 
			//Remove self if gallery do not have at least two items
119 
			if (obj.group.length < 2) {
120 
				obj.helpers.thumbs = false;
121 
 
122 
				return;
123 
			}
124 
 
125 
			//Increase bottom margin to give space for thumbs
126 
			obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
127 
		},
128 
 
129 
		afterShow: function (opts, obj) {
130 
			//Check if exists and create or update list
131 
			if (this.list) {
132 
				this.onUpdate(opts, obj);
133 
 
134 
			} else {
135 
				this.init(opts, obj);
136 
			}
137 
 
138 
			//Set active element
139 
			this.list.children().removeClass('active').eq(obj.index).addClass('active');
140 
		},
141 
 
142 
		//Center list
143 
		onUpdate: function (opts, obj) {
144 
			if (this.list) {
145 
				this.list.stop(true).animate({
146 
					'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
147 
				}, 150);
148 
			}
149 
		},
150 
 
151 
		beforeClose: function () {
152 
			if (this.wrap) {
153 
				this.wrap.remove();
154 
			}
155 
 
156 
			this.wrap  = null;
157 
			this.list  = null;
158 
			this.width = 0;
159 
		}
160 
	}
161 
 
162 
}(jQuery));