https://www.geilekarre.de/scripts/lightbox/js/slimbox2.js

1/*!
2	Slimbox v2.05 - The ultimate lightweight Lightbox clone for jQuery
3	(c) 2007-2013 Christophe Beyls <http://www.digitalia.be>
4	MIT-style license.
5*/
6
7
8// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
9if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
10	jQuery(function($) {
11		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
12			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
13		});
14	});
15}
16
17(function($) {
18
19	// Global variables, accessible to Slimbox only
20	var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,
21		ie6 = !window.XMLHttpRequest, hiddenElements = [], documentElement = document.documentElement,
22
23	// Preload images
24	preload = {}, preloadPrev = new Image(), preloadNext = new Image(),
25
26	// DOM elements
27	overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number;
28
29	/*
30		Initialization
31	*/
32
33	$(function() {
34		// Append the Slimbox HTML code at the bottom of the document
35		$("body").append(
36			$([
37				overlay = $('<div id="lbOverlay" />').click(close)[0],
38				center = $('<div id="lbCenter" />')[0],

39				bottomContainer = $('<div id="lbBottomContainer" />')[0]
40			]).css("display", "none")
41		);
42
43		image = $('<div id="lbImage" />').appendTo(center).append(
44			sizer = $('<div style="position: relative;" />').append([
45				prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0],
46				nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0]
47			])[0]
48		)[0];
49
50		bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([
51			$('<a id="lbCloseLink" href="#" />').click(close)[0],
52			caption = $('<div id="lbCaption" />')[0],
53			number = $('<div id="lbNumber" />')[0],
54			$('<div style="clear: both;" />')[0]
55		])[0];
56	});
57
58
59	/*
60		API
61	*/
62
63	// Open Slimbox with the specified parameters
64	$.slimbox = function(_images, startImage, _options) {
65		options = $.extend({
66			loop: false,				// Allows to navigate between first and last images
67			overlayOpacity: 0.8,			// 1 is opaque, 0 is completely transparent (change the color in the CSS file)
68			overlayFadeDuration: 400,		// Duration of the overlay fade-in and fade-out animations (in milliseconds)
69			resizeDuration: 400,			// Duration of each of the box resize animations (in milliseconds)
70			resizeEasing: "swing",			// "swing" is jQuery's default easing
71			initialWidth: 250,			// Initial width of the box (in pixels)
72			initialHeight: 250,			// Initial height of the box (in pixels)
73			imageFadeDuration: 400,			// Duration of the image fade-in animation (in milliseconds)
74			captionAnimationDuration: 400,		// Duration of the caption animation (in milliseconds)
75			counterText: "Image {x} of {y}",	// Translate or change as you wish, or set it to false to disable counter text for image groups
76			closeKeys: [27, 88, 67],		// Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
77			previousKeys: [37, 80],			// Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
78			nextKeys: [39, 78]			// Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
79		}, _options);
80
81		// The function is called for a single image, with URL and Title as first two arguments
82		if (typeof _images == "string") {
83			_images = [[_images, startImage]];
84			startImage = 0;
85		}
86
87		middle = win.scrollTop() + (win.height() / 2);
88		centerWidth = options.initialWidth;
89		centerHeight = options.initialHeight;
90		$(center).css({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show();
91		compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
92		if (compatibleOverlay) overlay.style.position = "absolute";
93		$(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration);
94		position();
95		setup(1);
96
97		images = _images;
98		options.loop = options.loop && (images.length > 1);
99		return changeImage(startImage);
100	};
101
102	/*
103		options:	Optional options object, see jQuery.slimbox()
104		linkMapper:	Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements:
105				the image URL and the image caption (may contain HTML)
106		linksFilter:	Optional function taking a link DOM element and an index as arguments and returning true if the element is part of
107				the image collection that will be shown on click, false if not. "this" refers to the element that was clicked.
108				This function must always return true when the DOM element argument is "this".
109	*/
110	$.fn.slimbox = function(_options, linkMapper, linksFilter) {
111		linkMapper = linkMapper || function(el) {
112			return [el.href, el.title];
113		};
114
115		linksFilter = linksFilter || function() {
116			return true;
117		};
118
119		var links = this;
120
121		return links.unbind("click").click(function() {
122			// Build the list of images that will be displayed
123			var link = this, startIndex = 0, filteredLinks, i = 0, length;
124			filteredLinks = $.grep(links, function(el, i) {
125				return linksFilter.call(link, el, i);
126			});
127
128			// We cannot use jQuery.map() because it flattens the returned array
129			for (length = filteredLinks.length; i < length; ++i) {
130				if (filteredLinks[i] == link) startIndex = i;
131				filteredLinks[i] = linkMapper(filteredLinks[i], i);
132			}
133
134			return $.slimbox(filteredLinks, startIndex, _options);
135		});
136	};
137
138
139	/*
140		Internal functions
141	*/
142
143	function position() {
144		var l = win.scrollLeft(), w = win.width();
145		$([center, bottomContainer]).css("left", l + (w / 2));
146		if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()});
147	}
148
149	function setup(open) {
150		if (open) {
151			$("object").add(ie6 ? "select" : "embed").each(function(index, el) {
152				hiddenElements[index] = [el, el.style.visibility];
153				el.style.visibility = "hidden";
154			});
155		} else {
156			$.each(hiddenElements, function(index, el) {
157				el[0].style.visibility = el[1];
158			});
159			hiddenElements = [];
160		}
161		var fn = open ? "bind" : "unbind";
162		win[fn]("scroll resize", position);
163		$(document)[fn]("keydown", keyDown);
164	}
165
166	function keyDown(event) {
167		var code = event.which, fn = $.inArray;
168		// Prevent default keyboard action (like navigating inside the page)
169		return (fn(code, options.closeKeys) >= 0) ? close()
170			: (fn(code, options.nextKeys) >= 0) ? next()
171			: (fn(code, options.previousKeys) >= 0) ? previous()
172			: null;
173	}
174
175	function previous() {
176		return changeImage(prevImage);
177	}
178
179	function next() {
180		return changeImage(nextImage);
181	}
182
183	function changeImage(imageIndex) {
184		if (imageIndex >= 0) {
185			activeImage = imageIndex;
186			activeURL = images[activeImage][0];
187			prevImage = (activeImage || (options.loop ? images.length : 0)) - 1;
188			nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1);
189
190			stop();
191			center.className = "lbLoading";
192
193			preload = new Image();
194			preload.onload = animateBox;
195			preload.src = activeURL;
196		}
197
198		return false;

199	}
200
201	function animateBox() {
202		center.className = "";
203		$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
204		$(sizer).width(preload.width);
205		$([sizer, prevLink, nextLink]).height(preload.height);
206
207		$(caption).html(images[activeImage][1] || "");
208		$(number).html((((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length));
209
210		if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
211		if (nextImage >= 0) preloadNext.src = images[nextImage][0];
212
213		centerWidth = image.offsetWidth;
214		centerHeight = image.offsetHeight;
215		var top = Math.max(0, middle - (centerHeight / 2));
216		if (center.offsetHeight != centerHeight) {
217			$(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing);
218		}
219		if (center.offsetWidth != centerWidth) {
220			$(center).animate({width: centerWidth, marginLeft: -centerWidth/2}, options.resizeDuration, options.resizeEasing);
221		}
222		$(center).queue(function() {
223			$(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""});
224			$(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption);
225		});
226	}
227
228	function animateCaption() {
229		if (prevImage >= 0) $(prevLink).show();
230		if (nextImage >= 0) $(nextLink).show();
231		$(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration);
232		bottomContainer.style.visibility = "";
233	}
234
235	function stop() {
236		preload.onload = null;
237		preload.src = preloadPrev.src = preloadNext.src = activeURL;
238		$([center, image, bottom]).stop(true);
239		$([prevLink, nextLink, image, bottomContainer]).hide();
240	}
241
242	function close() {
243		if (activeImage >= 0) {
244			stop();
245			activeImage = prevImage = nextImage = -1;
246			$(center).hide();
247			$(overlay).stop().fadeOut(options.overlayFadeDuration, setup);
248		}
249
250		return false;
251	}
252
253})(jQuery);