0
- * version: 1.
2 (03/13/2008)
0
+ * version: 1.
1 (03/13/2008)
0
* @requires jQuery v1.2 or later
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
* Licensed under the MIT:
0
* http://www.opensource.org/licenses/mit-license.php
0
* jQuery.facebox('some html')
0
- * Th
is will open a facebox with "some html" as the content.
0
+ * Th
e above will open a facebox with "some html" as the content.
0
- * jQuery.facebox(function() { ajaxes })
0
+ * jQuery.facebox(function($) {
0
+ * $.get('blah.html', function(data) { $.facebox(data) })
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
- * Want to close the facebox? Trigger the 'close.facebox' document event:
0
+ * The facebox function can also display an ajax page or image:
0
+ * jQuery.facebox({ ajax: 'remote.html' })
0
+ * jQuery.facebox({ image: 'dude.jpg' })
0
- *
jQuery(document).trigger('close.facebox')0
+ *
Want to close the facebox? Trigger the 'close.facebox' document event:0
+ * jQuery(document).trigger('close.facebox')
0
$.facebox = function(data, klass) {
0
- $.isFunction(data) ? data.call() : $.facebox.reveal(data, klass)
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
- <div id="facebox" style="display:none;"> \
0
- <td class="tl"/><td class="b"/><td class="tr"/> \
0
- <div class="content"> \
0
- <div class="footer"> \
0
- <a href="#" class="close"> \
0
- <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
0
- <td class="bl"/><td class="b"/><td class="br"/> \
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
- // 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
- 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
+ * Public, $.facebox methods
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
+ loadingImage : '/facebox/loading.gif',
0
+ closeImage : '/facebox/closelabel.gif',
0
+ imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
0
+ <div id="facebox" style="display:none;"> \
0
+ <td class="tl"/><td class="b"/><td class="tr"/> \
0
+ <div class="content"> \
0
+ <div class="footer"> \
0
+ <a href="#" class="close"> \
0
+ <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
0
+ <td class="bl"/><td class="b"/><td class="br"/> \
0
- $.facebox.loading = function() {
0
- if ($('#facebox .loading').length == 1) return true
0
+ if ($('#facebox .loading').length == 1) return true
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
- var pageScroll = $.facebox.getPageScroll()
0
- top: pageScroll[1] + ($.facebox.getPageHeight() / 10),
0
+ top: getPageScroll()[1] + (getPageHeight() / 10),
0
- $(document).bind('keydown.facebox', function(e) {
0
- if (e.keyCode == 27) $.facebox.close()
0
- $('#facebox .close').click($.facebox.close)
0
+ $('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2))
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
+ $(document).bind('keydown.facebox', function(e) {
0
+ if (e.keyCode == 27) $.facebox.close()
0
- $.facebox.close = function() {
0
- $(document).trigger('close.facebox')
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
- $(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
+ $(document).trigger('close.facebox')
0
- $.fn.facebox = function(settings) {
0
- $.facebox.init(settings)
0
+ * Public, $.fn methods
0
- var image_types = $.facebox.settings.image_types.join('|')
0
- image_types = new RegExp('\.' + image_types + '$', 'i')
0
+ $.fn.facebox = function(settings) {
0
- function click
_handler() {
0
+ function click
Handler() {
0
$.facebox.loading(true)
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
- 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
- } 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
- $.get(this.href, function(data) { $.facebox.reveal(data, klass) })
0
+ fillFaceboxFromHref(this.href, klass)
0
- return this.click(click
_handler)
0
+ return this.click(click
Handler)
0
- $.facebox.init = function(settings) {
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
+ var imageTypes = $.facebox.settings.imageTypes.join('|')
0
+ $.facebox.settings.imageTypesRegexp = new RegExp('\.' + imageTypes + '$', 'i')
0
if (settings) $.extend($.facebox.settings, settings)
0
- $('body').append($.facebox.settings.facebox
_html)
0
+ $('body').append($.facebox.settings.facebox
Html)
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
$('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() {
0
preload.push(new Image())
0
$('#facebox .close').click($.facebox.close)
0
- $('#facebox .close_image').attr('src', $.facebox.settings.close
_image)
0
+ $('#facebox .close_image').attr('src', $.facebox.settings.close
Image)
0
// getPageScroll() by quirksmode.com
0
-
$.facebox.getPageScroll = function() {
0
+
function getPageScroll() {
0
if (self.pageYOffset) {
0
yScroll = self.pageYOffset;
0
return new Array(xScroll,yScroll)
0
- // adapter from getPageSize() by quirksmode.com
0
- $.facebox.getPageHeight = function() {
0
+ // Adapted from getPageSize() by quirksmode.com
0
+ function getPageHeight() {
0
if (self.innerHeight) { // all except Explorer
0
windowHeight = self.innerHeight;
0
+ // Backwards compatibility
0
+ function makeCompatible() {
0
+ var $s = $.facebox.settings
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
+ // Figures out what you want to display and displays it
0
+ // image: blah.extension
0
+ // ajax: anything else
0
+ function fillFaceboxFromHref(href, klass) {
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
+ } else if (href.match($.facebox.settings.imageTypesRegexp)) {
0
+ fillFaceboxFromImage(href, klass)
0
+ fillFaceboxFromAjax(href, klass)
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
+ function fillFaceboxFromAjax(href, klass) {
0
+ $.get(href, function(data) { $.facebox.reveal(data, klass) })
0
+ function skipOverlay() {
0
+ return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
0
+ function showOverlay() {
0
+ if (skipOverlay()) return
0
+ if ($('facebox_overlay').length == 0)
0
+ $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
0
+ $('#facebox_overlay').hide().addClass("facebox_overlayBG")
0
+ .css('opacity', $.facebox.settings.opacity)
0
+ .click(function() { $(document).trigger('close.facebox') })
0
+ function hideOverlay() {
0
+ if (skipOverlay()) return
0
+ $('#facebox_overlay').fadeOut(200, function(){
+ $("#facebox_overlay").removeClass("facebox_overlayBG")
0
+ $("#facebox_overlay").addClass("facebox_hide")
0
+ $("#facebox_overlay").remove()
0
+ $(document).bind('close.facebox', function() {
0
+ $(document).unbind('keydown.facebox')
0
+ $('#facebox').fadeOut(function() {
0
+ $('#facebox .content').removeClass().addClass('content')
0
+ $('#facebox .loading').remove()
Comments
You can reduce the repetitive calls inside the fadeOut callback with a single chained expression:
$(this).removeClass("facebox_overlayBG").addClass("facebox_hide").remove();Good lord, Textile really buggered that one.
$(this).removeClass(‘facebox_overlayBG’).addClass(‘facebox_hide’).remove();