|
0
|
1 /*!
|
|
|
2 Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
|
|
|
3 (c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
|
|
|
4 MIT-style license.
|
|
|
5 */
|
|
|
6
|
|
|
7 (function($) {
|
|
|
8
|
|
|
9 // Global variables, accessible to Slimbox only
|
|
|
10 var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,
|
|
|
11 ie6 = !window.XMLHttpRequest, hiddenElements = [], documentElement = document.documentElement,
|
|
|
12
|
|
|
13 // Preload images
|
|
|
14 preload = {}, preloadPrev = new Image(), preloadNext = new Image(),
|
|
|
15
|
|
|
16 // DOM elements
|
|
|
17 overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number;
|
|
|
18
|
|
|
19 /*
|
|
|
20 Initialization
|
|
|
21 */
|
|
|
22
|
|
|
23 $(function() {
|
|
|
24 // Append the Slimbox HTML code at the bottom of the document
|
|
|
25 $("body").append(
|
|
|
26 $([
|
|
|
27 overlay = $('<div id="lbOverlay" />')[0],
|
|
|
28 center = $('<div id="lbCenter" />')[0],
|
|
|
29 bottomContainer = $('<div id="lbBottomContainer" />')[0]
|
|
|
30 ]).css("display", "none")
|
|
|
31 );
|
|
|
32
|
|
|
33 image = $('<div id="lbImage" />').appendTo(center).append(
|
|
|
34 sizer = $('<div style="position: relative;" />').append([
|
|
|
35 prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0],
|
|
|
36 nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0]
|
|
|
37 ])[0]
|
|
|
38 )[0];
|
|
|
39
|
|
|
40 bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([
|
|
|
41 $('<a id="lbCloseLink" href="#" />').add(overlay).click(close)[0],
|
|
|
42 caption = $('<div id="lbCaption" />')[0],
|
|
|
43 number = $('<div id="lbNumber" />')[0],
|
|
|
44 $('<div style="clear: both;" />')[0]
|
|
|
45 ])[0];
|
|
|
46 });
|
|
|
47
|
|
|
48
|
|
|
49 /*
|
|
|
50 API
|
|
|
51 */
|
|
|
52
|
|
|
53 // Open Slimbox with the specified parameters
|
|
|
54 $.slimbox = function(_images, startImage, _options) {
|
|
|
55 options = $.extend({
|
|
|
56 loop: false, // Allows to navigate between first and last images
|
|
|
57 overlayOpacity: 0.8, // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
|
|
|
58 overlayFadeDuration: 400, // Duration of the overlay fade-in and fade-out animations (in milliseconds)
|
|
|
59 resizeDuration: 400, // Duration of each of the box resize animations (in milliseconds)
|
|
|
60 resizeEasing: "swing", // "swing" is jQuery's default easing
|
|
|
61 initialWidth: 250, // Initial width of the box (in pixels)
|
|
|
62 initialHeight: 250, // Initial height of the box (in pixels)
|
|
|
63 imageFadeDuration: 400, // Duration of the image fade-in animation (in milliseconds)
|
|
|
64 captionAnimationDuration: 400, // Duration of the caption animation (in milliseconds)
|
|
|
65 counterText: "Image {x} of {y}", // Translate or change as you wish, or set it to false to disable counter text for image groups
|
|
|
66 closeKeys: [27, 88, 67], // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
|
|
|
67 previousKeys: [37, 80], // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
|
|
|
68 nextKeys: [39, 78] // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
|
|
|
69 }, _options);
|
|
|
70
|
|
|
71 // The function is called for a single image, with URL and Title as first two arguments
|
|
|
72 if (typeof _images == "string") {
|
|
|
73 _images = [[_images, startImage]];
|
|
|
74 startImage = 0;
|
|
|
75 }
|
|
|
76
|
|
|
77 middle = win.scrollTop() + (win.height() / 2);
|
|
|
78 centerWidth = options.initialWidth;
|
|
|
79 centerHeight = options.initialHeight;
|
|
|
80 $(center).css({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show();
|
|
|
81 compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
|
|
|
82 if (compatibleOverlay) overlay.style.position = "absolute";
|
|
|
83 $(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration);
|
|
|
84 position();
|
|
|
85 setup(1);
|
|
|
86
|
|
|
87 images = _images;
|
|
|
88 options.loop = options.loop && (images.length > 1);
|
|
|
89 return changeImage(startImage);
|
|
|
90 };
|
|
|
91
|
|
|
92 /*
|
|
|
93 options: Optional options object, see jQuery.slimbox()
|
|
|
94 linkMapper: Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements:
|
|
|
95 the image URL and the image caption (may contain HTML)
|
|
|
96 linksFilter: Optional function taking a link DOM element and an index as arguments and returning true if the element is part of
|
|
|
97 the image collection that will be shown on click, false if not. "this" refers to the element that was clicked.
|
|
|
98 This function must always return true when the DOM element argument is "this".
|
|
|
99 */
|
|
|
100 $.fn.slimbox = function(_options, linkMapper, linksFilter) {
|
|
|
101 linkMapper = linkMapper || function(el) {
|
|
|
102 return [el.href, el.title];
|
|
|
103 };
|
|
|
104
|
|
|
105 linksFilter = linksFilter || function() {
|
|
|
106 return true;
|
|
|
107 };
|
|
|
108
|
|
|
109 var links = this;
|
|
|
110
|
|
|
111 return links.unbind("click").click(function() {
|
|
|
112 // Build the list of images that will be displayed
|
|
|
113 var link = this, startIndex = 0, filteredLinks, i = 0, length;
|
|
|
114 filteredLinks = $.grep(links, function(el, i) {
|
|
|
115 return linksFilter.call(link, el, i);
|
|
|
116 });
|
|
|
117
|
|
|
118 // We cannot use jQuery.map() because it flattens the returned array
|
|
|
119 for (length = filteredLinks.length; i < length; ++i) {
|
|
|
120 if (filteredLinks[i] == link) startIndex = i;
|
|
|
121 filteredLinks[i] = linkMapper(filteredLinks[i], i);
|
|
|
122 }
|
|
|
123
|
|
|
124 return $.slimbox(filteredLinks, startIndex, _options);
|
|
|
125 });
|
|
|
126 };
|
|
|
127
|
|
|
128
|
|
|
129 /*
|
|
|
130 Internal functions
|
|
|
131 */
|
|
|
132
|
|
|
133 function position() {
|
|
|
134 var l = win.scrollLeft(), w = win.width();
|
|
|
135 $([center, bottomContainer]).css("left", l + (w / 2));
|
|
|
136 if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()});
|
|
|
137 }
|
|
|
138
|
|
|
139 function setup(open) {
|
|
|
140 if (open) {
|
|
|
141 $("object").add(ie6 ? "select" : "embed").each(function(index, el) {
|
|
|
142 hiddenElements[index] = [el, el.style.visibility];
|
|
|
143 el.style.visibility = "hidden";
|
|
|
144 });
|
|
|
145 } else {
|
|
|
146 $.each(hiddenElements, function(index, el) {
|
|
|
147 el[0].style.visibility = el[1];
|
|
|
148 });
|
|
|
149 hiddenElements = [];
|
|
|
150 }
|
|
|
151 var fn = open ? "bind" : "unbind";
|
|
|
152 win[fn]("scroll resize", position);
|
|
|
153 $(document)[fn]("keydown", keyDown);
|
|
|
154 }
|
|
|
155
|
|
|
156 function keyDown(event) {
|
|
|
157 var code = event.keyCode, fn = $.inArray;
|
|
|
158 // Prevent default keyboard action (like navigating inside the page)
|
|
|
159 return (fn(code, options.closeKeys) >= 0) ? close()
|
|
|
160 : (fn(code, options.nextKeys) >= 0) ? next()
|
|
|
161 : (fn(code, options.previousKeys) >= 0) ? previous()
|
|
|
162 : false;
|
|
|
163 }
|
|
|
164
|
|
|
165 function previous() {
|
|
|
166 return changeImage(prevImage);
|
|
|
167 }
|
|
|
168
|
|
|
169 function next() {
|
|
|
170 return changeImage(nextImage);
|
|
|
171 }
|
|
|
172
|
|
|
173 function changeImage(imageIndex) {
|
|
|
174 if (imageIndex >= 0) {
|
|
|
175 activeImage = imageIndex;
|
|
|
176 activeURL = images[activeImage][0];
|
|
|
177 prevImage = (activeImage || (options.loop ? images.length : 0)) - 1;
|
|
|
178 nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1);
|
|
|
179
|
|
|
180 stop();
|
|
|
181 center.className = "lbLoading";
|
|
|
182
|
|
|
183 preload = new Image();
|
|
|
184 preload.onload = animateBox;
|
|
|
185 preload.src = activeURL;
|
|
|
186 }
|
|
|
187
|
|
|
188 return false;
|
|
|
189 }
|
|
|
190
|
|
|
191 function animateBox() {
|
|
|
192 center.className = "";
|
|
|
193 $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: "" });
|
|
|
194 $(sizer).width(preload.width);
|
|
|
195 $([sizer, prevLink, nextLink]).height(preload.height);
|
|
|
196
|
|
|
197 $(caption).html(images[activeImage][1] || "");
|
|
|
198 $(number).html((((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length));
|
|
|
199
|
|
|
200 if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
|
|
|
201 if (nextImage >= 0) preloadNext.src = images[nextImage][0];
|
|
|
202
|
|
|
203 centerWidth = image.offsetWidth;
|
|
|
204 centerHeight = image.offsetHeight;
|
|
|
205 var top = Math.max(0, middle - (centerHeight / 2));
|
|
|
206 if (center.offsetHeight != centerHeight) {
|
|
|
207 $(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing);
|
|
|
208 }
|
|
|
209 if (center.offsetWidth != centerWidth) {
|
|
|
210 $(center).animate({width: centerWidth, marginLeft: -centerWidth/2}, options.resizeDuration, options.resizeEasing);
|
|
|
211 }
|
|
|
212 $(center).queue(function() {
|
|
|
213 $(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""});
|
|
|
214 animateCaption();
|
|
|
215 $(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption);
|
|
|
216 });
|
|
|
217 }
|
|
|
218
|
|
|
219 function animateCaption() {
|
|
|
220 if (prevImage >= 0) $(prevLink).show();
|
|
|
221 if (nextImage >= 0) $(nextLink).show();
|
|
|
222 $(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration);
|
|
|
223 bottomContainer.style.visibility = "";
|
|
|
224 }
|
|
|
225
|
|
|
226 function stop() {
|
|
|
227 preload.onload = null;
|
|
|
228 preload.src = preloadPrev.src = preloadNext.src = activeURL;
|
|
|
229 $([center, image, bottom]).stop(true);
|
|
|
230 $([prevLink, nextLink, image, bottomContainer]).hide();
|
|
|
231 }
|
|
|
232
|
|
|
233 function close() {
|
|
|
234 if (activeImage >= 0) {
|
|
|
235 stop();
|
|
|
236 activeImage = prevImage = nextImage = -1;
|
|
|
237 $(center).hide();
|
|
|
238 $(overlay).stop().fadeOut(options.overlayFadeDuration, setup);
|
|
|
239 }
|
|
|
240
|
|
|
241 return false;
|
|
|
242 }
|
|
|
243
|
|
|
244 })(jQuery); |
