GitHub Sale: sign up for any paid plan this week and pay nothing until January 1, 2009!  [ hide ]

public
Description: Facebook-style lightbox, built in jQuery
Homepage: http://famspam.com/facebox/
Clone URL: git://github.com/defunkt/facebox.git
Click here to lend your support to: facebox and make a donation at www.pledgie.com !
add in overlay, defaulting to clear
defunkt (author)
Mon Apr 07 16:19:23 -0700 2008
commit  e4e7aac29434bf8e038b3e2a9fa3ceb9d9465609
tree    b50d5d5dc34e7e2791b97f0a492a074afede0e77
parent  38153e7032f080850de3ad0ee5cbeecbfa8b85bf
...
1
2
 
3
4
5
6
 
7
8
9
10
 
11
12
13
14
 
15
16
17
18
 
19
20
21
22
23
24
25
26
...
32
33
34
35
36
37
38
39
40
41
42
 
43
44
45
...
74
75
76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
 
2
3
4
5
 
6
7
8
9
 
10
11
12
13
 
14
15
16
17
 
18
19
20
21
22
 
23
24
25
...
31
32
33
 
34
 
35
36
37
38
 
39
40
41
42
...
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
0
@@ -1,26 +1,25 @@
0
 #facebox .b {
0
- background:url(b.png);
0
+ background:url(/facebox/b.png);
0
 }
0
 
0
 #facebox .tl {
0
- background:url(tl.png);
0
+ background:url(/facebox/tl.png);
0
 }
0
 
0
 #facebox .tr {
0
- background:url(tr.png);
0
+ background:url(/facebox/tr.png);
0
 }
0
 
0
 #facebox .bl {
0
- background:url(bl.png);
0
+ background:url(/facebox/bl.png);
0
 }
0
 
0
 #facebox .br {
0
- background:url(br.png);
0
+ background:url(/facebox/br.png);
0
 }
0
 
0
 #facebox {
0
   position: absolute;
0
- width: 100%;
0
   top: 0;
0
   left: 0;
0
   z-index: 100;
0
@@ -32,14 +31,12 @@
0
 }
0
 
0
 #facebox table {
0
- margin: auto;
0
   border-collapse: collapse;
0
- width:auto;
0
 }
0
 
0
 #facebox td {
0
   border-bottom: 0;
0
- padding:0;
0
+ padding: 0;
0
 }
0
 
0
 #facebox .body {
0
@@ -74,3 +71,25 @@
0
   overflow: hidden;
0
   padding: 0;
0
 }
0
+
0
+#facebox_overlay {
0
+ position: fixed;
0
+ top: 0px;
0
+ left: 0px;
0
+ height:100%;
0
+ width:100%;
0
+}
0
+
0
+.facebox_hide {
0
+ z-index:-100;
0
+}
0
+
0
+.facebox_overlayBG {
0
+ background-color: #000;
0
+ z-index: 99;
0
+}
0
+
0
+* html #facebox_overlay { /* ie6 hack */
0
+ position: absolute;
0
+ height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
0
+}
...
1
2
3
 
4
5
6
7
8
9
10
11
...
32
33
34
35
 
36
37
 
 
 
38
39
40
 
 
41
42
 
 
 
 
43
44
 
45
 
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
87
88
89
90
91
92
93
94
95
96
97
98
99
 
 
 
100
101
102
103
104
105
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
107
108
109
110
 
 
 
 
111
112
113
114
 
 
 
115
116
117
118
119
120
 
 
 
 
121
122
123
124
125
126
 
127
128
129
130
131
132
133
 
 
 
 
 
134
135
136
137
138
 
 
 
 
 
 
139
140
141
142
143
144
145
 
 
 
 
146
147
148
149
 
 
 
150
151
152
 
 
153
154
 
155
156
157
158
 
 
 
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
180
181
182
183
 
184
185
186
 
 
 
 
 
 
187
188
189
 
 
 
 
 
190
191
 
192
193
194
195
 
 
196
197
198
...
200
201
202
203
 
204
205
 
206
207
 
208
209
210
...
219
220
221
222
223
 
 
224
225
226
...
231
232
233
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
...
1
2
 
3
4
5
6
 
 
7
8
9
...
30
31
32
 
33
34
 
35
36
37
38
 
 
39
40
41
 
42
43
44
45
46
 
47
48
49
50
51
52
 
53
 
 
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
56
57
58
59
60
 
 
 
 
 
 
 
 
 
 
 
61
62
63
64
 
 
 
 
 
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
102
103
104
105
106
 
 
 
107
108
109
110
 
 
 
 
 
111
112
113
114
115
 
 
 
 
 
116
117
 
 
 
 
 
 
118
119
120
121
122
123
 
 
 
 
124
125
126
127
128
129
130
 
 
 
 
 
 
131
132
133
134
135
136
 
 
137
138
139
140
 
 
141
142
143
 
144
145
146
 
 
147
148
149
150
151
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
153
154
155
 
156
157
158
 
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
174
175
176
 
 
177
178
179
180
181
...
183
184
185
 
186
187
 
188
189
 
190
191
192
193
...
202
203
204
 
 
205
206
207
208
209
...
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
0
@@ -1,11 +1,9 @@
0
 /*
0
  * Facebox (for jQuery)
0
- * version: 1.2 (03/13/2008)
0
+ * version: 1.1 (03/13/2008)
0
  * @requires jQuery v1.2 or later
0
  *
0
  * Examples at http://famspam.com/facebox/
0
- * Code at http://github.com/defunkt/facebox
0
- * List at http://groups.google.com/groups/facebox
0
  *
0
  * Licensed under the MIT:
0
  * http://www.opensource.org/licenses/mit-license.php
0
@@ -32,167 +30,152 @@
0
  *
0
  * jQuery.facebox('some html')
0
  *
0
- * This will open a facebox with "some html" as the content.
0
+ * The above will open a facebox with "some html" as the content.
0
  *
0
- * jQuery.facebox(function() { ajaxes })
0
+ * jQuery.facebox(function($) {
0
+ * $.get('blah.html', function(data) { $.facebox(data) })
0
+ * })
0
  *
0
- * This will show a loading screen before the passed function is called,
0
- * allowing for a better ajax experience.
0
+ * The above will show a loading screen before the passed function is called,
0
+ * allowing for a better ajaxy experience.
0
  *
0
- * Want to close the facebox? Trigger the 'close.facebox' document event:
0
+ * The facebox function can also display an ajax page or image:
0
+ *
0
+ * jQuery.facebox({ ajax: 'remote.html' })
0
+ * jQuery.facebox({ image: 'dude.jpg' })
0
  *
0
- * jQuery(document).trigger('close.facebox')
0
+ * Want to close the facebox? Trigger the 'close.facebox' document event:
0
  *
0
+ * jQuery(document).trigger('close.facebox')
0
  */
0
 (function($) {
0
   $.facebox = function(data, klass) {
0
- $.facebox.init()
0
     $.facebox.loading()
0
- $.isFunction(data) ? data.call() : $.facebox.reveal(data, klass)
0
- }
0
 
0
- $.facebox.settings = {
0
- loading_image : '/facebox/loading.gif',
0
- close_image : '/facebox/closelabel.gif',
0
- window_hash : '#facebox',
0
- image_types : [ 'png', 'jpg', 'jpeg', 'gif' ],
0
- facebox_html : '\
0
- <div id="facebox" style="display:none;"> \
0
- <div class="popup"> \
0
- <table> \
0
- <tbody> \
0
- <tr> \
0
- <td class="tl"/><td class="b"/><td class="tr"/> \
0
- </tr> \
0
- <tr> \
0
- <td class="b"/> \
0
- <td class="body"> \
0
- <div class="content"> \
0
- </div> \
0
- <div class="footer"> \
0
- <a href="#" class="close"> \
0
- <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
0
- </a> \
0
- </div> \
0
- </td> \
0
- <td class="b"/> \
0
- </tr> \
0
- <tr> \
0
- <td class="bl"/><td class="b"/><td class="br"/> \
0
- </tr> \
0
- </tbody> \
0
- </table> \
0
- </div> \
0
- </div>'
0
+ if (data.ajax) fillFaceboxFromAjax(data.ajax)
0
+ else if (data.image) fillFaceboxFromImage(data.image)
0
+ else if ($.isFunction(data)) data.call($)
0
+ else $.facebox.reveal(data, klass)
0
   }
0
 
0
- // Opening the facebox adds #facebox to the url. Clicking 'back' closes the facebox
0
- // but keeps you on the page you were on.
0
- function back_button_observer() {
0
- if (window.location.hash != $.facebox.settings.window_hash) $(document).trigger('close.facebox')
0
- }
0
-
0
- function observe_back_button() {
0
- $.facebox.settings.old_hash = window.location.hash || '#'
0
- window.location.hash = $.facebox.settings.window_hash
0
- $.facebox.settings.back_button_observer = setInterval(back_button_observer, 200)
0
- }
0
+ /*
0
+ * Public, $.facebox methods
0
+ */
0
 
0
- function stop_observing_back_button() {
0
- if (window.location.hash != $.facebox.settings.old_hash) window.location.hash = $.facebox.settings.old_hash
0
- $.facebox.settings.old_hash = null
0
- clearInterval($.facebox.settings.back_button_observer)
0
- }
0
+ $.extend($.facebox, {
0
+ settings: {
0
+ opacity : 0,
0
+ overlay : true,
0
+ loadingImage : '/facebox/loading.gif',
0
+ closeImage : '/facebox/closelabel.gif',
0
+ imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
0
+ faceboxHtml : '\
0
+ <div id="facebox" style="display:none;"> \
0
+ <div class="popup"> \
0
+ <table> \
0
+ <tbody> \
0
+ <tr> \
0
+ <td class="tl"/><td class="b"/><td class="tr"/> \
0
+ </tr> \
0
+ <tr> \
0
+ <td class="b"/> \
0
+ <td class="body"> \
0
+ <div class="content"> \
0
+ </div> \
0
+ <div class="footer"> \
0
+ <a href="#" class="close"> \
0
+ <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
0
+ </a> \
0
+ </div> \
0
+ </td> \
0
+ <td class="b"/> \
0
+ </tr> \
0
+ <tr> \
0
+ <td class="bl"/><td class="b"/><td class="br"/> \
0
+ </tr> \
0
+ </tbody> \
0
+ </table> \
0
+ </div> \
0
+ </div>'
0
+ },
0
 
0
- $.facebox.loading = function() {
0
- if ($('#facebox .loading').length == 1) return true
0
-
0
- observe_back_button()
0
+ loading: function() {
0
+ init()
0
+ if ($('#facebox .loading').length == 1) return true
0
+ showOverlay()
0
 
0
- $('#facebox .content').empty()
0
- $('#facebox .body').children().hide().end().
0
- append('<div class="loading"><img src="'+$.facebox.settings.loading_image+'"/></div>')
0
+ $('#facebox .content').empty()
0
+ $('#facebox .body').children().hide().end().
0
+ append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
0
 
0
- var pageScroll = $.facebox.getPageScroll()
0
- $('#facebox').css({
0
- top: pageScroll[1] + ($.facebox.getPageHeight() / 10),
0
- left: pageScroll[0]
0
- }).show()
0
+ $('#facebox').css({
0
+ top: getPageScroll()[1] + (getPageHeight() / 10),
0
+ left: 0
0
+ }).show()
0
 
0
- $(document).bind('keydown.facebox', function(e) {
0
- if (e.keyCode == 27) $.facebox.close()
0
- })
0
- $('#facebox .close').click($.facebox.close)
0
- }
0
+ $('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2))
0
 
0
- $.facebox.reveal = function(data, klass) {
0
- if (klass) $('#facebox .content').addClass(klass)
0
- $('#facebox .content').append(data)
0
- $('#facebox .loading').remove()
0
- $('#facebox .body').children().fadeIn('normal')
0
- }
0
+ $(document).bind('keydown.facebox', function(e) {
0
+ if (e.keyCode == 27) $.facebox.close()
0
+ return true
0
+ })
0
+ },
0
 
0
- $.facebox.close = function() {
0
- $(document).trigger('close.facebox')
0
- return false
0
- }
0
+ reveal: function(data, klass) {
0
+ if (klass) $('#facebox .content').addClass(klass)
0
+ $('#facebox .content').append(data)
0
+ $('#facebox .loading').remove()
0
+ $('#facebox .body').children().fadeIn('normal')
0
+ },
0
 
0
- $(document).bind('close.facebox', function() {
0
- stop_observing_back_button()
0
- $(document).unbind('keydown.facebox')
0
- $('#facebox').fadeOut(function() {
0
- $('#facebox .content').empty().removeClass().addClass('content')
0
- })
0
+ close: function() {
0
+ $(document).trigger('close.facebox')
0
+ return false
0
+ }
0
   })
0
 
0
- $.fn.facebox = function(settings) {
0
- $.facebox.init(settings)
0
+ /*
0
+ * Public, $.fn methods
0
+ */
0
 
0
- var image_types = $.facebox.settings.image_types.join('|')
0
- image_types = new RegExp('\.' + image_types + '$', 'i')
0
+ $.fn.facebox = function(settings) {
0
+ init(settings)
0
 
0
- function click_handler() {
0
+ function clickHandler() {
0
       $.facebox.loading(true)
0
 
0
- // support for rel="facebox[.inline_popup]" syntax, to add a class
0
- var klass = this.rel.match(/facebox\[\.(\w+)\]/)
0
+ // support for rel="facebox.inline_popup" syntax, to add a class
0
+ // also supports deprecated "facebox[.inline_popup]" syntax
0
+ var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
0
       if (klass) klass = klass[1]
0
 
0
- // div
0
- if (this.href.match(/#/)) {
0
- var url = window.location.href.split('#')[0]
0
- var target = this.href.replace(url,'')
0
- $.facebox.reveal($(target).clone().show(), klass)
0
-
0
- // image
0
- } else if (this.href.match(image_types)) {
0
- var image = new Image()
0
- image.onload = function() {
0
- $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
0
- }
0
- image.src = this.href
0
-
0
- // ajax
0
- } else {
0
- $.get(this.href, function(data) { $.facebox.reveal(data, klass) })
0
- }
0
-
0
+ fillFaceboxFromHref(this.href, klass)
0
       return false
0
     }
0
 
0
- return this.click(click_handler)
0
+ return this.click(clickHandler)
0
   }
0
 
0
- $.facebox.init = function(settings) {
0
+ /*
0
+ * Private methods
0
+ */
0
+
0
+ // called one time to setup facebox on this page
0
+ function init(settings) {
0
     if ($.facebox.settings.inited) return true
0
     else $.facebox.settings.inited = true
0
 
0
+ makeCompatible()
0
+
0
+ var imageTypes = $.facebox.settings.imageTypes.join('|')
0
+ $.facebox.settings.imageTypesRegexp = new RegExp('\.' + imageTypes + '$', 'i')
0
+
0
     if (settings) $.extend($.facebox.settings, settings)
0
- $('body').append($.facebox.settings.facebox_html)
0
+ $('body').append($.facebox.settings.faceboxHtml)
0
 
0
     var preload = [ new Image(), new Image() ]
0
- preload[0].src = $.facebox.settings.close_image
0
- preload[1].src = $.facebox.settings.loading_image
0
+ preload[0].src = $.facebox.settings.closeImage
0
+ preload[1].src = $.facebox.settings.loadingImage
0
 
0
     $('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() {
0
       preload.push(new Image())
0
@@ -200,11 +183,11 @@
0
     })
0
 
0
     $('#facebox .close').click($.facebox.close)
0
- $('#facebox .close_image').attr('src', $.facebox.settings.close_image)
0
+ $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
0
   }
0
-
0
+
0
   // getPageScroll() by quirksmode.com
0
- $.facebox.getPageScroll = function() {
0
+ function getPageScroll() {
0
     var xScroll, yScroll;
0
     if (self.pageYOffset) {
0
       yScroll = self.pageYOffset;
0
@@ -219,8 +202,8 @@
0
     return new Array(xScroll,yScroll)
0
   }
0
 
0
- // adapter from getPageSize() by quirksmode.com
0
- $.facebox.getPageHeight = function() {
0
+ // Adapted from getPageSize() by quirksmode.com
0
+ function getPageHeight() {
0
     var windowHeight
0
     if (self.innerHeight) {  // all except Explorer
0
       windowHeight = self.innerHeight;
0
@@ -231,4 +214,90 @@
0
     }  
0
     return windowHeight
0
   }
0
+
0
+ // Backwards compatibility
0
+ function makeCompatible() {
0
+ var $s = $.facebox.settings
0
+
0
+ $s.loadingImage = $s.loading_image || $s.loadingImage
0
+ $s.closeImage = $s.close_image || $s.closeImage
0
+ $s.imageTypes = $s.image_types || $s.imageTypes
0
+ $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
0
+ }
0
+
0
+ // Figures out what you want to display and displays it
0
+ // formats are:
0
+ // div: #id
0
+ // image: blah.extension
0
+ // ajax: anything else
0
+ function fillFaceboxFromHref(href, klass) {
0
+ // div
0
+ if (href.match(/#/)) {
0
+ var url = window.location.href.split('#')[0]
0
+ var target = href.replace(url,'')
0
+ $.facebox.reveal($(target).clone().show(), klass)
0
+
0
+ // image
0
+ } else if (href.match($.facebox.settings.imageTypesRegexp)) {
0
+ fillFaceboxFromImage(href, klass)
0
+ // ajax
0
+ } else {
0
+ fillFaceboxFromAjax(href, klass)
0
+ }
0
+ }
0
+
0
+ function fillFaceboxFromImage(href, klass) {
0
+ var image = new Image()
0
+ image.onload = function() {
0
+ $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
0
+ }
0
+ image.src = href
0
+ }
0
+
0
+ function fillFaceboxFromAjax(href, klass) {
0
+ $.get(href, function(data) { $.facebox.reveal(data, klass) })
0
+ }
0
+
0
+ function skipOverlay() {
0
+ return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
0
+ }
0
+
0
+ function showOverlay() {
0
+ if (skipOverlay()) return
0
+
0
+ if ($('facebox_overlay').length == 0)
0
+ $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
0
+
0
+ $('#facebox_overlay').hide().addClass("facebox_overlayBG")
0
+ .css('opacity', $.facebox.settings.opacity)
0
+ .click(function() { $(document).trigger('close.facebox') })
0
+ .fadeIn(200)
0
+ return false
0
+ }
0
+
0
+ function hideOverlay() {
0
+ if (skipOverlay()) return
0
+
0
+ $('#facebox_overlay').fadeOut(200, function(){
2
+ $("#facebox_overlay").removeClass("facebox_overlayBG")
0
+ $("#facebox_overlay").addClass("facebox_hide")
0
+ $("#facebox_overlay").remove()
0
+ })
0
+
0
+ return false
0
+ }
0
+
0
+ /*
0
+ * Bindings
0
+ */
0
+
0
+ $(document).bind('close.facebox', function() {
0
+ $(document).unbind('keydown.facebox')
0
+ $('#facebox').fadeOut(function() {
0
+ $('#facebox .content').removeClass().addClass('content')
0
+ hideOverlay()
0
+ $('#facebox .loading').remove()
0
+ })
0
+ })
0
+
0
 })(jQuery);

Comments