1 | /* |
---|
2 | * Facebox (for jQuery) |
---|
3 | * version: 1.2 (05/05/2008) |
---|
4 | * @requires jQuery v1.2 or later |
---|
5 | * |
---|
6 | * Examples at http://famspam.com/facebox/ |
---|
7 | * |
---|
8 | * Licensed under the MIT: |
---|
9 | * http://www.opensource.org/licenses/mit-license.php |
---|
10 | * |
---|
11 | * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ] |
---|
12 | * |
---|
13 | * Usage: |
---|
14 | * |
---|
15 | * jQuery(document).ready(function() { |
---|
16 | * jQuery('a[rel*=facebox]').facebox() |
---|
17 | * }) |
---|
18 | * |
---|
19 | * <a href="#terms" rel="facebox">Terms</a> |
---|
20 | * Loads the #terms div in the box |
---|
21 | * |
---|
22 | * <a href="terms.html" rel="facebox">Terms</a> |
---|
23 | * Loads the terms.html page in the box |
---|
24 | * |
---|
25 | * <a href="terms.png" rel="facebox">Terms</a> |
---|
26 | * Loads the terms.png image in the box |
---|
27 | * |
---|
28 | * |
---|
29 | * You can also use it programmatically: |
---|
30 | * |
---|
31 | * jQuery.facebox('some html') |
---|
32 | * jQuery.facebox('some html', 'my-groovy-style') |
---|
33 | * |
---|
34 | * The above will open a facebox with "some html" as the content. |
---|
35 | * |
---|
36 | * jQuery.facebox(function($) { |
---|
37 | * $.get('blah.html', function(data) { $.facebox(data) }) |
---|
38 | * }) |
---|
39 | * |
---|
40 | * The above will show a loading screen before the passed function is called, |
---|
41 | * allowing for a better ajaxy experience. |
---|
42 | * |
---|
43 | * The facebox function can also display an ajax page, an image, or the contents of a div: |
---|
44 | * |
---|
45 | * jQuery.facebox({ ajax: 'remote.html' }) |
---|
46 | * jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style') |
---|
47 | * jQuery.facebox({ image: 'stairs.jpg' }) |
---|
48 | * jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style') |
---|
49 | * jQuery.facebox({ div: '#box' }) |
---|
50 | * jQuery.facebox({ div: '#box' }, 'my-groovy-style') |
---|
51 | * |
---|
52 | * Want to close the facebox? Trigger the 'close.facebox' document event: |
---|
53 | * |
---|
54 | * jQuery(document).trigger('close.facebox') |
---|
55 | * |
---|
56 | * Facebox also has a bunch of other hooks: |
---|
57 | * |
---|
58 | * loading.facebox |
---|
59 | * beforeReveal.facebox |
---|
60 | * reveal.facebox (aliased as 'afterReveal.facebox') |
---|
61 | * init.facebox |
---|
62 | * afterClose.facebox |
---|
63 | * |
---|
64 | * Simply bind a function to any of these hooks: |
---|
65 | * |
---|
66 | * $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }) |
---|
67 | * |
---|
68 | */ |
---|
69 | (function($) { |
---|
70 | $.facebox = function(data, klass) { |
---|
71 | $.facebox.loading() |
---|
72 | |
---|
73 | if (data.ajax) fillFaceboxFromAjax(data.ajax, klass) |
---|
74 | else if (data.image) fillFaceboxFromImage(data.image, klass) |
---|
75 | else if (data.div) fillFaceboxFromHref(data.div, klass) |
---|
76 | else if ($.isFunction(data)) data.call($) |
---|
77 | else $.facebox.reveal(data, klass) |
---|
78 | } |
---|
79 | |
---|
80 | /* |
---|
81 | * Public, $.facebox methods |
---|
82 | */ |
---|
83 | |
---|
84 | $.extend($.facebox, { |
---|
85 | settings: { |
---|
86 | opacity : 0.2, |
---|
87 | overlay : true, |
---|
88 | loadingImage : '/js/jquery.facebox/loading.gif', |
---|
89 | closeImage : '/js/jquery.facebox/closelabel.png', |
---|
90 | imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], |
---|
91 | faceboxHtml : '\ |
---|
92 | <div id="facebox" style="display:none;"> \ |
---|
93 | <div class="popup"> \ |
---|
94 | <div class="content"> \ |
---|
95 | </div> \ |
---|
96 | <a href="#" class="close"><img src="/js/jquery.facebox/closelabel.png" title="close" class="close_image" /></a> \ |
---|
97 | </div> \ |
---|
98 | </div>' |
---|
99 | }, |
---|
100 | |
---|
101 | loading: function() { |
---|
102 | init() |
---|
103 | if ($('#facebox .loading').length == 1) return true |
---|
104 | showOverlay() |
---|
105 | |
---|
106 | $('#facebox .content').empty() |
---|
107 | $('#facebox .body').children().hide().end(). |
---|
108 | append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>') |
---|
109 | |
---|
110 | $('#facebox').css({ |
---|
111 | top: getPageScroll()[1] + (getPageHeight() / 10), |
---|
112 | left: $(window).width() / 2 - 205 |
---|
113 | }).show() |
---|
114 | |
---|
115 | $(document).bind('keydown.facebox', function(e) { |
---|
116 | if (e.keyCode == 27) $.facebox.close() |
---|
117 | return true |
---|
118 | }) |
---|
119 | $(document).trigger('loading.facebox') |
---|
120 | }, |
---|
121 | |
---|
122 | reveal: function(data, klass) { |
---|
123 | $(document).trigger('beforeReveal.facebox') |
---|
124 | if (klass) $('#facebox .content').addClass(klass) |
---|
125 | $('#facebox .content').append(data) |
---|
126 | $('#facebox .loading').remove() |
---|
127 | $('#facebox .body').children().fadeIn('normal') |
---|
128 | $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2)) |
---|
129 | $(document).trigger('reveal.facebox').trigger('afterReveal.facebox') |
---|
130 | }, |
---|
131 | |
---|
132 | close: function() { |
---|
133 | $(document).trigger('close.facebox') |
---|
134 | return false |
---|
135 | } |
---|
136 | }) |
---|
137 | |
---|
138 | /* |
---|
139 | * Public, $.fn methods |
---|
140 | */ |
---|
141 | |
---|
142 | $.fn.facebox = function(settings) { |
---|
143 | if ($(this).length == 0) return |
---|
144 | |
---|
145 | init(settings) |
---|
146 | |
---|
147 | function clickHandler() { |
---|
148 | $.facebox.loading(true) |
---|
149 | |
---|
150 | // support for rel="facebox.inline_popup" syntax, to add a class |
---|
151 | // also supports deprecated "facebox[.inline_popup]" syntax |
---|
152 | var klass = this.rel.match(/facebox\[?\.(\w+)\]?/) |
---|
153 | if (klass) klass = klass[1] |
---|
154 | |
---|
155 | fillFaceboxFromHref(this.href, klass) |
---|
156 | return false |
---|
157 | } |
---|
158 | |
---|
159 | return this.bind('click.facebox', clickHandler) |
---|
160 | } |
---|
161 | |
---|
162 | /* |
---|
163 | * Private methods |
---|
164 | */ |
---|
165 | |
---|
166 | // called one time to setup facebox on this page |
---|
167 | function init(settings) { |
---|
168 | if ($.facebox.settings.inited) return true |
---|
169 | else $.facebox.settings.inited = true |
---|
170 | |
---|
171 | $(document).trigger('init.facebox') |
---|
172 | makeCompatible() |
---|
173 | |
---|
174 | var imageTypes = $.facebox.settings.imageTypes.join('|') |
---|
175 | $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i') |
---|
176 | |
---|
177 | if (settings) $.extend($.facebox.settings, settings) |
---|
178 | $('body').append($.facebox.settings.faceboxHtml) |
---|
179 | |
---|
180 | var preload = [ new Image(), new Image() ] |
---|
181 | preload[0].src = $.facebox.settings.closeImage |
---|
182 | preload[1].src = $.facebox.settings.loadingImage |
---|
183 | |
---|
184 | $('#facebox').find('.b:first, .bl').each(function() { |
---|
185 | preload.push(new Image()) |
---|
186 | preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') |
---|
187 | }) |
---|
188 | |
---|
189 | $('#facebox .close').click($.facebox.close) |
---|
190 | $('#facebox .close_image').attr('src', $.facebox.settings.closeImage) |
---|
191 | } |
---|
192 | |
---|
193 | // getPageScroll() by quirksmode.com |
---|
194 | function getPageScroll() { |
---|
195 | var xScroll, yScroll; |
---|
196 | if (self.pageYOffset) { |
---|
197 | yScroll = self.pageYOffset; |
---|
198 | xScroll = self.pageXOffset; |
---|
199 | } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict |
---|
200 | yScroll = document.documentElement.scrollTop; |
---|
201 | xScroll = document.documentElement.scrollLeft; |
---|
202 | } else if (document.body) {// all other Explorers |
---|
203 | yScroll = document.body.scrollTop; |
---|
204 | xScroll = document.body.scrollLeft; |
---|
205 | } |
---|
206 | return new Array(xScroll,yScroll) |
---|
207 | } |
---|
208 | |
---|
209 | // Adapted from getPageSize() by quirksmode.com |
---|
210 | function getPageHeight() { |
---|
211 | var windowHeight |
---|
212 | if (self.innerHeight) { // all except Explorer |
---|
213 | windowHeight = self.innerHeight; |
---|
214 | } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode |
---|
215 | windowHeight = document.documentElement.clientHeight; |
---|
216 | } else if (document.body) { // other Explorers |
---|
217 | windowHeight = document.body.clientHeight; |
---|
218 | } |
---|
219 | return windowHeight |
---|
220 | } |
---|
221 | |
---|
222 | // Backwards compatibility |
---|
223 | function makeCompatible() { |
---|
224 | var $s = $.facebox.settings |
---|
225 | |
---|
226 | $s.loadingImage = $s.loading_image || $s.loadingImage |
---|
227 | $s.closeImage = $s.close_image || $s.closeImage |
---|
228 | $s.imageTypes = $s.image_types || $s.imageTypes |
---|
229 | $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml |
---|
230 | } |
---|
231 | |
---|
232 | // Figures out what you want to display and displays it |
---|
233 | // formats are: |
---|
234 | // div: #id |
---|
235 | // image: blah.extension |
---|
236 | // ajax: anything else |
---|
237 | function fillFaceboxFromHref(href, klass) { |
---|
238 | // div |
---|
239 | if (href.match(/#/)) { |
---|
240 | var url = window.location.href.split('#')[0] |
---|
241 | var target = href.replace(url,'') |
---|
242 | if (target == '#') return |
---|
243 | $.facebox.reveal($(target).html(), klass) |
---|
244 | |
---|
245 | // image |
---|
246 | } else if (href.match($.facebox.settings.imageTypesRegexp)) { |
---|
247 | fillFaceboxFromImage(href, klass) |
---|
248 | // ajax |
---|
249 | } else { |
---|
250 | fillFaceboxFromAjax(href, klass) |
---|
251 | } |
---|
252 | } |
---|
253 | |
---|
254 | function fillFaceboxFromImage(href, klass) { |
---|
255 | var image = new Image() |
---|
256 | image.onload = function() { |
---|
257 | $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass) |
---|
258 | } |
---|
259 | image.src = href |
---|
260 | } |
---|
261 | |
---|
262 | function fillFaceboxFromAjax(href, klass) { |
---|
263 | $.get(href, function(data) { $.facebox.reveal(data, klass) }) |
---|
264 | } |
---|
265 | |
---|
266 | function skipOverlay() { |
---|
267 | return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null |
---|
268 | } |
---|
269 | |
---|
270 | function showOverlay() { |
---|
271 | if (skipOverlay()) return |
---|
272 | |
---|
273 | if ($('#facebox_overlay').length == 0) |
---|
274 | $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>') |
---|
275 | |
---|
276 | $('#facebox_overlay').hide().addClass("facebox_overlayBG") |
---|
277 | .css('opacity', $.facebox.settings.opacity) |
---|
278 | .click(function() { $(document).trigger('close.facebox') }) |
---|
279 | .fadeIn(200) |
---|
280 | return false |
---|
281 | } |
---|
282 | |
---|
283 | function hideOverlay() { |
---|
284 | if (skipOverlay()) return |
---|
285 | |
---|
286 | $('#facebox_overlay').fadeOut(200, function(){ |
---|
287 | $("#facebox_overlay").removeClass("facebox_overlayBG") |
---|
288 | $("#facebox_overlay").addClass("facebox_hide") |
---|
289 | $("#facebox_overlay").remove() |
---|
290 | }) |
---|
291 | |
---|
292 | return false |
---|
293 | } |
---|
294 | |
---|
295 | /* |
---|
296 | * Bindings |
---|
297 | */ |
---|
298 | |
---|
299 | $(document).bind('close.facebox', function() { |
---|
300 | $(document).unbind('keydown.facebox') |
---|
301 | $('#facebox').fadeOut(function() { |
---|
302 | $('#facebox .content').removeClass().addClass('content') |
---|
303 | $('#facebox .loading').remove() |
---|
304 | $(document).trigger('afterClose.facebox') |
---|
305 | }) |
---|
306 | hideOverlay() |
---|
307 | }) |
---|
308 | |
---|
309 | })(jQuery); |
---|