Created
May 20, 2013 01:38
-
-
Save sharapeco/5609911 to your computer and use it in GitHub Desktop.
[あとでFork] Facebox私家版。CSS3で軽量化。 http://defunkt.io/facebox/
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
#facebox { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 100; | |
text-align: left; | |
background: #878787; | |
background: rgba(82, 82, 82, 0.7); | |
border-radius: 8px; | |
-webkit-border-radius: 8px; | |
-moz-border-radius: 8px; | |
} | |
#facebox, #facebox div { | |
margin: 0; | |
padding: 0; | |
} | |
#facebox .popup { | |
position: relative; | |
margin: 10px; | |
padding: 10px; | |
background: #fff; | |
min-width: 370px; | |
} | |
#facebox .loading { | |
text-align: center; | |
} | |
#facebox .image { | |
text-align: center; | |
} | |
#facebox img { | |
border: 0; | |
margin: 0; | |
vertical-align: top; | |
max-height: 600px; | |
} | |
#facebox .footer { | |
border-top: 1px solid #DDDDDD; | |
padding-top: 5px; | |
margin-top: 10px; | |
text-align: right; | |
} | |
#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
(function($) { | |
$.facebox = function(data, klass) { | |
$.facebox.loading() | |
if (data.ajax) fillFaceboxFromAjax(data.ajax) | |
else if (data.image) fillFaceboxFromImage(data.image) | |
else if (data.div) fillFaceboxFromHref(data.div) | |
else if ($.isFunction(data)) data.call($) | |
else $.facebox.reveal(data, klass) | |
} | |
/* | |
* Public, $.facebox methods | |
*/ | |
var BasePath = "/facebox/"; | |
$.extend($.facebox, { | |
settings: { | |
opacity : 0, | |
overlay : true, | |
loadingImage : BasePath + 'loading.gif', | |
closeImage : BasePath + 'closelabel.png', | |
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], | |
faceboxHtml : '\ | |
<div id="facebox" style="display:none;"> \ | |
<div class="popup"> \ | |
<div class="content"> \ | |
</div> \ | |
<div class="footer"> \ | |
<a href="#" class="close"> \ | |
<img src="/facebox/closelabel.png" alt="close" class="close_image"> \ | |
</a> \ | |
</div> \ | |
</div> \ | |
</div>' | |
}, | |
loading: function() { | |
init() | |
if ($('#facebox .loading').length == 1) return true | |
showOverlay() | |
$('#facebox .content').empty().append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>') | |
$('#facebox').css({ | |
top: getPageScroll()[1] + (getPageHeight() / 10), | |
left: 385.5 | |
}).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').empty().append(data) | |
$('#facebox .body').children().fadeIn('normal') | |
$('#facebox').css('left', $(window).width() / 2 - ($('#facebox').width() / 2)) | |
$(document).trigger('reveal.facebox').trigger('afterReveal.facebox') | |
}, | |
close: function() { | |
$(document).trigger('close.facebox') | |
return false | |
} | |
}) | |
/* | |
* Public, $.fn methods | |
*/ | |
$.fn.facebox = function(settings) { | |
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.click(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 .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,'') | |
$.facebox.reveal($(target).clone().show(), 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') | |
hideOverlay() | |
$('#facebox .loading').remove() | |
}) | |
}) | |
})($); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment