https://bigwelt.com/src/facebox.js

1/*
2 * Facebox (for jQuery)
3 * version: 1.3
4 * @requires jQuery v1.2 or later
5 * @homepage https://github.com/defunkt/facebox
6 *
7 * Licensed under the MIT:
8 *   http://www.opensource.org/licenses/mit-license.php
9 *
10 * Copyright Forever Chris Wanstrath, Kyle Neath
11 *
12 * Usage:
13 *
14 *  jQuery(document).ready(function() {
15 *    jQuery('a[rel*=facebox]').facebox()
16 *  })
17 *
18 *  <a href="#terms" rel="facebox">Terms</a>
19 *    Loads the #terms div in the box
20 *
21 *  <a href="terms.html" rel="facebox">Terms</a>
22 *    Loads the terms.html page in the box
23 *
24 *  <a href="terms.png" rel="facebox">Terms</a>
25 *    Loads the terms.png image in the box
26 *
27 *
28 *  You can also use it programmatically:
29 *
30 *    jQuery.facebox('some html')
31 *    jQuery.facebox('some html', 'my-groovy-style')
32 *
33 *  The above will open a facebox with "some html" as the content.
34 *
35 *    jQuery.facebox(function($) {
36 *      $.get('blah.html', function(data) { $.facebox(data) })
37 *    })
38 *
39 *  The above will show a loading screen before the passed function is called,
40 *  allowing for a better ajaxy experience.
41 *
42 *  The facebox function can also display an ajax page, an image, or the contents of a div:
43 *
44 *    jQuery.facebox({ ajax: 'remote.html' })
45 *    jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
46 *    jQuery.facebox({ image: 'stairs.jpg' })
47 *    jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
48 *    jQuery.facebox({ div: '#box' })
49 *    jQuery.facebox({ div: '#box' }, 'my-groovy-style')
50 *
51 *  Want to close the facebox?  Trigger the 'close.facebox' document event:
52 *
53 *    jQuery(document).trigger('close.facebox')
54 *
55 *  Facebox also has a bunch of other hooks:
56 *
57 *    loading.facebox
58 *    beforeReveal.facebox
59 *    reveal.facebox (aliased as 'afterReveal.facebox')
60 *    init.facebox
61 *    afterClose.facebox
62 *
63 *  Simply bind a function to any of these hooks:
64 *
65 *   $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
66 *
67 */
68(function($) {
69  $.facebox = function(data, klass) {
70    $.facebox.loading(data.settings || [])
71
72    if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
73    else if (data.image) fillFaceboxFromImage(data.image, klass)
74    else if (data.div) fillFaceboxFromHref(data.div, klass)
75    else if ($.isFunction(data)) data.call($)
76    else $.facebox.reveal(data, klass)
77  }
78
79  /*
80   * Public, $.facebox methods
81   */
82
83  $.extend($.facebox, {
84    settings: {
85      opacity      : 0.2,
86      overlay      : true,
87      loadingImage : '/facebox/loading.gif',
88      closeImage   : '/facebox/closelabel.png',
89      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
90      faceboxHtml  : '\
91    <div id="facebox" style="display:none;"> \
92      <div class="popup"> \
93        <div class="content"> \
94        </div> \
95        <a href="#" class="close"></a> \
96      </div> \
97    </div>'
98    },
99
100    loading: function() {
101      init()
102      if ($('#facebox .loading').length == 1) return true
103      showOverlay()
104
105      $('#facebox .content').empty().
106        append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
107
108      $('#facebox').show().css({
109        top:	getPageScroll()[1] + (getPageHeight() / 10),
110        left:	0
111        //left:	$(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)
112      })
113
114      $(document).bind('keydown.facebox', function(e) {
115        if (e.keyCode == 27) $.facebox.close()
116        return true
117      })
118      $(document).trigger('loading.facebox')
119    },
120
121    reveal: function(data, klass) {
122      $(document).trigger('beforeReveal.facebox')
123      if (klass) $('#facebox .content').addClass(klass)
124      $('#facebox .content').empty().append(data)
125      $('#facebox .popup').children().fadeIn('normal')
126      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))
127      $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
128    },
129
130    close: function() {
131      $(document).trigger('close.facebox')
132      return false
133    }
134  })
135
136  /*
137   * Public, $.fn methods
138   */
139
140  $.fn.facebox = function(settings) {
141    if ($(this).length == 0) return
142
143    init(settings)
144
145    function clickHandler() {
146      $.facebox.loading(true)
147
148      // support for rel="facebox.inline_popup" syntax, to add a class
149      // also supports deprecated "facebox[.inline_popup]" syntax
150      var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
151      if (klass) klass = klass[1]
152
153      fillFaceboxFromHref(this.href, klass)
154      return false
155    }
156
157    return this.bind('click.facebox', clickHandler)
158  }
159
160  /*
161   * Private methods
162   */
163
164  // called one time to setup facebox on this page
165  function init(settings) {
166    if ($.facebox.settings.inited) return true
167    else $.facebox.settings.inited = true
168
169    $(document).trigger('init.facebox')
170    makeCompatible()
171
172    var imageTypes = $.facebox.settings.imageTypes.join('|')
173    $.facebox.settings.imageTypesRegexp = new RegExp('\\.(' + imageTypes + ')(\\?.*)?$', 'i')
174
175    if (settings) $.extend($.facebox.settings, settings)
176    $('body').append($.facebox.settings.faceboxHtml)
177
178    var preload = [ new Image(), new Image() ]
179    preload[0].src = $.facebox.settings.closeImage
180    preload[1].src = $.facebox.settings.loadingImage
181
182    $('#facebox').find('.b:first, .bl').each(function() {
183      preload.push(new Image())
184      preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
185    })
186
187    $('#facebox .close')
188      .click($.facebox.close)
189      .append('<img src="'
190              + $.facebox.settings.closeImage
191              + '" class="close_image" title="close">')
192  }
193
194  // getPageScroll() by quirksmode.com
195  function getPageScroll() {
196    var xScroll, yScroll;
197    if (self.pageYOffset) {
198      yScroll = self.pageYOffset;
199      xScroll = self.pageXOffset;
200    } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
201      yScroll = document.documentElement.scrollTop;
202      xScroll = document.documentElement.scrollLeft;
203    } else if (document.body) {// all other Explorers
204      yScroll = document.body.scrollTop;
205      xScroll = document.body.scrollLeft;
206    }
207    return new Array(xScroll,yScroll)
208  }
209
210  // Adapted from getPageSize() by quirksmode.com
211  function getPageHeight() {
212    var windowHeight

213    if (self.innerHeight) {	// all except Explorer
214      windowHeight = self.innerHeight;
215    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
216      windowHeight = document.documentElement.clientHeight;
217    } else if (document.body) { // other Explorers
218      windowHeight = document.body.clientHeight;
219    }
220    return windowHeight
221  }
222
223  // Backwards compatibility
224  function makeCompatible() {
225    var $s = $.facebox.settings
226
227    $s.loadingImage = $s.loading_image || $s.loadingImage
228    $s.closeImage = $s.close_image || $s.closeImage
229    $s.imageTypes = $s.image_types || $s.imageTypes
230    $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
231  }
232
233  // Figures out what you want to display and displays it
234  // formats are:
235  //     div: #id
236  //   image: blah.extension
237  //    ajax: anything else
238  function fillFaceboxFromHref(href, klass) {
239    // div
240    if (href.match(/#/)) {
241      var url    = window.location.href.split('#')[0]
242      var target = href.replace(url,'')
243      if (target == '#') return
244      $.facebox.reveal($(target).html(), klass)
245
246    // image
247    } else if (href.match($.facebox.settings.imageTypesRegexp)) {
248      fillFaceboxFromImage(href, klass)
249    // ajax
250    } else {
251      fillFaceboxFromAjax(href, klass)
252    }
253  }
254
255  function fillFaceboxFromImage(href, klass) {
256    var image = new Image()
257    image.onload = function() {
258      $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
259    }
260    image.src = href
261  }
262
263  function fillFaceboxFromAjax(href, klass) {
264    $.facebox.jqxhr = $.get(href, function(data) { $.facebox.reveal(data, klass) })
265  }
266
267  function skipOverlay() {
268    return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
269  }
270
271  function showOverlay() {
272    if (skipOverlay()) return
273
274    if ($('#facebox_overlay').length == 0)
275      $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
276
277    $('#facebox_overlay').hide().addClass("facebox_overlayBG")
278      .css('opacity', $.facebox.settings.opacity)
279      .click(function() { $(document).trigger('close.facebox') })
280      .fadeIn(200)
281    return false
282  }
283
284  function hideOverlay() {
285    if (skipOverlay()) return
286
287    $('#facebox_overlay').fadeOut(200, function(){
288      $("#facebox_overlay").removeClass("facebox_overlayBG")
289      $("#facebox_overlay").addClass("facebox_hide")
290      $("#facebox_overlay").remove()
291    })
292
293    return false
294  }
295
296  /*
297   * Bindings
298   */
299
300  $(document).bind('close.facebox', function() {
301    if ($.facebox.jqxhr) {
302      $.facebox.jqxhr.abort()
303      $.facebox.jqxhr = null
304    }
305    $(document).unbind('keydown.facebox')
306    $('#facebox').fadeOut(function() {
307      $('#facebox .content').removeClass().addClass('content')
308      $('#facebox .loading').remove()
309      $(document).trigger('afterClose.facebox')
310    })
311    hideOverlay()
312  })
313
314})(jQuery);