Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
394 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
#facebox { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
z-index: 100; | ||
text-align: left; | ||
} | ||
|
||
|
||
#facebox .popup{ | ||
position:relative; | ||
border:3px solid rgba(0,0,0,0); | ||
-webkit-border-radius:5px; | ||
-moz-border-radius:5px; | ||
border-radius:5px; | ||
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4); | ||
-moz-box-shadow:0 0 18px rgba(0,0,0,0.4); | ||
box-shadow:0 0 18px rgba(0,0,0,0.4); | ||
} | ||
|
||
#facebox .content { | ||
display:table; | ||
width: 370px; | ||
padding: 10px; | ||
background: #fff; | ||
-webkit-border-radius:4px; | ||
-moz-border-radius:4px; | ||
border-radius:4px; | ||
} | ||
|
||
#facebox .content > p:first-child{ | ||
margin-top:0; | ||
} | ||
#facebox .content > p:last-child{ | ||
margin-bottom:0; | ||
} | ||
|
||
#facebox .close{ | ||
position:absolute; | ||
top:5px; | ||
right:5px; | ||
padding:2px; | ||
background:#fff; | ||
} | ||
#facebox .close img{ | ||
opacity:0.3; | ||
} | ||
#facebox .close:hover img{ | ||
opacity:1.0; | ||
} | ||
|
||
#facebox .loading { | ||
text-align: center; | ||
} | ||
|
||
#facebox .image { | ||
text-align: center; | ||
} | ||
|
||
#facebox img { | ||
border: 0; | ||
margin: 0; | ||
} | ||
|
||
#facebox_overlay { | ||
position: fixed; | ||
top: 0px; | ||
left: 0px; | ||
height:100%; | ||
width:100%; | ||
} | ||
|
||
.facebox_hide { | ||
z-index:-100; | ||
} | ||
|
||
.facebox_overlayBG { | ||
background-color: #000; | ||
z-index: 99; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,309 @@ | ||
/* | ||
* Facebox (for jQuery) | ||
* version: 1.2 (05/05/2008) | ||
* @requires jQuery v1.2 or later | ||
* | ||
* Examples at http://famspam.com/facebox/ | ||
* | ||
* Licensed under the MIT: | ||
* http://www.opensource.org/licenses/mit-license.php | ||
* | ||
* Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ] | ||
* | ||
* Usage: | ||
* | ||
* jQuery(document).ready(function() { | ||
* jQuery('a[rel*=facebox]').facebox() | ||
* }) | ||
* | ||
* <a href="#terms" rel="facebox">Terms</a> | ||
* Loads the #terms div in the box | ||
* | ||
* <a href="terms.html" rel="facebox">Terms</a> | ||
* Loads the terms.html page in the box | ||
* | ||
* <a href="terms.png" rel="facebox">Terms</a> | ||
* Loads the terms.png image in the box | ||
* | ||
* | ||
* You can also use it programmatically: | ||
* | ||
* jQuery.facebox('some html') | ||
* jQuery.facebox('some html', 'my-groovy-style') | ||
* | ||
* The above will open a facebox with "some html" as the content. | ||
* | ||
* jQuery.facebox(function($) { | ||
* $.get('blah.html', function(data) { $.facebox(data) }) | ||
* }) | ||
* | ||
* The above will show a loading screen before the passed function is called, | ||
* allowing for a better ajaxy experience. | ||
* | ||
* The facebox function can also display an ajax page, an image, or the contents of a div: | ||
* | ||
* jQuery.facebox({ ajax: 'remote.html' }) | ||
* jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style') | ||
* jQuery.facebox({ image: 'stairs.jpg' }) | ||
* jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style') | ||
* jQuery.facebox({ div: '#box' }) | ||
* jQuery.facebox({ div: '#box' }, 'my-groovy-style') | ||
* | ||
* Want to close the facebox? Trigger the 'close.facebox' document event: | ||
* | ||
* jQuery(document).trigger('close.facebox') | ||
* | ||
* Facebox also has a bunch of other hooks: | ||
* | ||
* loading.facebox | ||
* beforeReveal.facebox | ||
* reveal.facebox (aliased as 'afterReveal.facebox') | ||
* init.facebox | ||
* afterClose.facebox | ||
* | ||
* Simply bind a function to any of these hooks: | ||
* | ||
* $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }) | ||
* | ||
*/ | ||
(function($) { | ||
$.facebox = function(data, klass) { | ||
$.facebox.loading() | ||
|
||
if (data.ajax) fillFaceboxFromAjax(data.ajax, klass) | ||
else if (data.image) fillFaceboxFromImage(data.image, klass) | ||
else if (data.div) fillFaceboxFromHref(data.div, klass) | ||
else if ($.isFunction(data)) data.call($) | ||
else $.facebox.reveal(data, klass) | ||
} | ||
|
||
/* | ||
* Public, $.facebox methods | ||
*/ | ||
|
||
$.extend($.facebox, { | ||
settings: { | ||
opacity : 0.2, | ||
overlay : true, | ||
loadingImage : '/facebox/loading.gif', | ||
closeImage : '/facebox/closelabel.png', | ||
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], | ||
faceboxHtml : '\ | ||
<div id="facebox" style="display:none;"> \ | ||
<div class="popup"> \ | ||
<div class="content"> \ | ||
</div> \ | ||
<a href="#" class="close"><img src="/facebox/closelabel.png" title="close" class="close_image" /></a> \ | ||
</div> \ | ||
</div>' | ||
}, | ||
|
||
loading: function() { | ||
init() | ||
if ($('#facebox .loading').length == 1) return true | ||
showOverlay() | ||
|
||
$('#facebox .content').empty() | ||
$('#facebox .body').children().hide().end(). | ||
append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>') | ||
|
||
$('#facebox').css({ | ||
top: getPageScroll()[1] + (getPageHeight() / 10), | ||
left: $(window).width() / 2 - 205 | ||
}).show() | ||
|
||
$(document).bind('keydown.facebox', function(e) { | ||
if (e.keyCode == 27) $.facebox.close() | ||
return true | ||
}) | ||
$(document).trigger('loading.facebox') | ||
}, | ||
|
||
reveal: function(data, klass) { | ||
$(document).trigger('beforeReveal.facebox') | ||
if (klass) $('#facebox .content').addClass(klass) | ||
$('#facebox .content').append(data) | ||
$('#facebox .loading').remove() | ||
$('#facebox .body').children().fadeIn('normal') | ||
$('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2)) | ||
$(document).trigger('reveal.facebox').trigger('afterReveal.facebox') | ||
}, | ||
|
||
close: function() { | ||
$(document).trigger('close.facebox') | ||
return false | ||
} | ||
}) | ||
|
||
/* | ||
* Public, $.fn methods | ||
*/ | ||
|
||
$.fn.facebox = function(settings) { | ||
if ($(this).length == 0) return | ||
|
||
init(settings) | ||
|
||
function clickHandler() { | ||
$.facebox.loading(true) | ||
|
||
// support for rel="facebox.inline_popup" syntax, to add a class | ||
// also supports deprecated "facebox[.inline_popup]" syntax | ||
var klass = this.rel.match(/facebox\[?\.(\w+)\]?/) | ||
if (klass) klass = klass[1] | ||
|
||
fillFaceboxFromHref(this.href, klass) | ||
return false | ||
} | ||
|
||
return this.bind('click.facebox', clickHandler) | ||
} | ||
|
||
/* | ||
* Private methods | ||
*/ | ||
|
||
// called one time to setup facebox on this page | ||
function init(settings) { | ||
if ($.facebox.settings.inited) return true | ||
else $.facebox.settings.inited = true | ||
|
||
$(document).trigger('init.facebox') | ||
makeCompatible() | ||
|
||
var imageTypes = $.facebox.settings.imageTypes.join('|') | ||
$.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i') | ||
|
||
if (settings) $.extend($.facebox.settings, settings) | ||
$('body').append($.facebox.settings.faceboxHtml) | ||
|
||
var preload = [ new Image(), new Image() ] | ||
preload[0].src = $.facebox.settings.closeImage | ||
preload[1].src = $.facebox.settings.loadingImage | ||
|
||
$('#facebox').find('.b:first, .bl').each(function() { | ||
preload.push(new Image()) | ||
preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') | ||
}) | ||
|
||
$('#facebox .close').click($.facebox.close) | ||
$('#facebox .close_image').attr('src', $.facebox.settings.closeImage) | ||
} | ||
|
||
// getPageScroll() by quirksmode.com | ||
function getPageScroll() { | ||
var xScroll, yScroll; | ||
if (self.pageYOffset) { | ||
yScroll = self.pageYOffset; | ||
xScroll = self.pageXOffset; | ||
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict | ||
yScroll = document.documentElement.scrollTop; | ||
xScroll = document.documentElement.scrollLeft; | ||
} else if (document.body) {// all other Explorers | ||
yScroll = document.body.scrollTop; | ||
xScroll = document.body.scrollLeft; | ||
} | ||
return new Array(xScroll,yScroll) | ||
} | ||
|
||
// Adapted from getPageSize() by quirksmode.com | ||
function getPageHeight() { | ||
var windowHeight | ||
if (self.innerHeight) { // all except Explorer | ||
windowHeight = self.innerHeight; | ||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode | ||
windowHeight = document.documentElement.clientHeight; | ||
} else if (document.body) { // other Explorers | ||
windowHeight = document.body.clientHeight; | ||
} | ||
return windowHeight | ||
} | ||
|
||
// Backwards compatibility | ||
function makeCompatible() { | ||
var $s = $.facebox.settings | ||
|
||
$s.loadingImage = $s.loading_image || $s.loadingImage | ||
$s.closeImage = $s.close_image || $s.closeImage | ||
$s.imageTypes = $s.image_types || $s.imageTypes | ||
$s.faceboxHtml = $s.facebox_html || $s.faceboxHtml | ||
} | ||
|
||
// Figures out what you want to display and displays it | ||
// formats are: | ||
// div: #id | ||
// image: blah.extension | ||
// ajax: anything else | ||
function fillFaceboxFromHref(href, klass) { | ||
// div | ||
if (href.match(/#/)) { | ||
var url = window.location.href.split('#')[0] | ||
var target = href.replace(url,'') | ||
if (target == '#') return | ||
$.facebox.reveal($(target).html(), klass) | ||
|
||
// image | ||
} else if (href.match($.facebox.settings.imageTypesRegexp)) { | ||
fillFaceboxFromImage(href, klass) | ||
// ajax | ||
} else { | ||
fillFaceboxFromAjax(href, klass) | ||
} | ||
} | ||
|
||
function fillFaceboxFromImage(href, klass) { | ||
var image = new Image() | ||
image.onload = function() { | ||
$.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass) | ||
} | ||
image.src = href | ||
} | ||
|
||
function fillFaceboxFromAjax(href, klass) { | ||
$.get(href, function(data) { $.facebox.reveal(data, klass) }) | ||
} | ||
|
||
function skipOverlay() { | ||
return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null | ||
} | ||
|
||
function showOverlay() { | ||
if (skipOverlay()) return | ||
|
||
if ($('#facebox_overlay').length == 0) | ||
$("body").append('<div id="facebox_overlay" class="facebox_hide"></div>') | ||
|
||
$('#facebox_overlay').hide().addClass("facebox_overlayBG") | ||
.css('opacity', $.facebox.settings.opacity) | ||
.click(function() { $(document).trigger('close.facebox') }) | ||
.fadeIn(200) | ||
return false | ||
} | ||
|
||
function hideOverlay() { | ||
if (skipOverlay()) return | ||
|
||
$('#facebox_overlay').fadeOut(200, function(){ | ||
$("#facebox_overlay").removeClass("facebox_overlayBG") | ||
$("#facebox_overlay").addClass("facebox_hide") | ||
$("#facebox_overlay").remove() | ||
}) | ||
|
||
return false | ||
} | ||
|
||
/* | ||
* Bindings | ||
*/ | ||
|
||
$(document).bind('close.facebox', function() { | ||
$(document).unbind('keydown.facebox') | ||
$('#facebox').fadeOut(function() { | ||
$('#facebox .content').removeClass().addClass('content') | ||
$('#facebox .loading').remove() | ||
$(document).trigger('afterClose.facebox') | ||
}) | ||
hideOverlay() | ||
}) | ||
|
||
})(jQuery); |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.