add the readable source for joverlay
This commit is contained in:
Evan Prodromou
parent
67e3bf0f05
commit
8d9827c9af
271
js/jquery.joverlay.js
Normal file
271
js/jquery.joverlay.js
Normal file
@ -0,0 +1,271 @@
|
||||
/* Copyright (c) 2009 Alvaro A. Lima Jr http://alvarojunior.com/jquery/joverlay.html
|
||||
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* Version: 0.7.1 (JUN 15, 2009)
|
||||
* Requires: jQuery 1.3+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
// Global vars
|
||||
var isIE6 = $.browser.msie && $.browser.version == 6.0; // =(
|
||||
var JOVERLAY_TIMER = null;
|
||||
var JOVERLAY_ELEMENT_PREV = null;
|
||||
|
||||
$.fn.jOverlay = function(options) {
|
||||
|
||||
// Element exist?
|
||||
if ( $('#jOverlay').length ) {$.closeOverlay();}
|
||||
|
||||
// Clear Element Prev
|
||||
JOVERLAY_ELEMENT_PREV = null;
|
||||
|
||||
// Clear Timer
|
||||
if (JOVERLAY_TIMER !== null) {
|
||||
clearTimeout( JOVERLAY_TIMER );
|
||||
}
|
||||
|
||||
// Set Options
|
||||
var options = $.extend({}, $.fn.jOverlay.options, options);
|
||||
|
||||
// private function
|
||||
function center(id) {
|
||||
if (options.center) {
|
||||
$.center(id);
|
||||
}
|
||||
}
|
||||
|
||||
var element = this.is('*') ? this : '#jOverlayContent';
|
||||
var position = isIE6 ? 'absolute' : 'fixed';
|
||||
var isImage = /([^\/\\]+)\.(png|gif|jpeg|jpg|bmp)$/i.test( options.url );
|
||||
|
||||
var imgLoading = options.imgLoading ? "<img id='jOverlayLoading' src='"+options.imgLoading+"' style='position:"+position+"; z-index:"+(options.zIndex + 9)+";'/>" : '';
|
||||
|
||||
$('body').prepend(imgLoading + "<div id='jOverlay' />"
|
||||
+ "<div id='jOverlayContent' style='position:"+position+"; z-index:"+(options.zIndex + 5)+"; display:none;'/>"
|
||||
);
|
||||
|
||||
// Loading Centered
|
||||
$('#jOverlayLoading').load(function(){
|
||||
center(this);
|
||||
});
|
||||
|
||||
//IE 6 FIX
|
||||
if ( isIE6 ) {
|
||||
$('select').hide();
|
||||
$('#jOverlayContent select').show();
|
||||
}
|
||||
|
||||
// Overlay Style
|
||||
$('#jOverlay').css({
|
||||
backgroundColor : options.color,
|
||||
position : position,
|
||||
top : '0px',
|
||||
left : '0px',
|
||||
filter : 'alpha(opacity='+ (options.opacity * 100) +')', // IE =(
|
||||
opacity : options.opacity, // Good Browser =D
|
||||
zIndex : options.zIndex,
|
||||
width : !isIE6 ? '100%' : $(window).width() + 'px',
|
||||
height : !isIE6 ? '100%' : $(document).height() + 'px'
|
||||
}).show();
|
||||
|
||||
// ELEMENT
|
||||
if ( this.is('*') ) {
|
||||
|
||||
JOVERLAY_ELEMENT_PREV = this.prev();
|
||||
|
||||
$('#jOverlayContent').html(
|
||||
this.show().attr('display', options.autoHide ? 'none' : this.css('display') )
|
||||
);
|
||||
|
||||
if ( !isImage ) {
|
||||
|
||||
center('#jOverlayContent');
|
||||
|
||||
$('#jOverlayContent').show();
|
||||
|
||||
// Execute callback
|
||||
if ( !options.url && $.isFunction( options.success ) ) {
|
||||
options.success( this );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// IMAGE
|
||||
if ( isImage ) {
|
||||
|
||||
$('<img/>').load(function(){
|
||||
var resize = $.resize(this.width, this.height);
|
||||
|
||||
$(this).css({
|
||||
width : resize.width,
|
||||
height : resize.height
|
||||
});
|
||||
|
||||
$( element ).html(this);
|
||||
|
||||
center('#jOverlayContent');
|
||||
|
||||
$('#jOverlayLoading').fadeOut(500);
|
||||
$('#jOverlayContent').show();
|
||||
|
||||
// Execute callback
|
||||
if ( $.isFunction( options.success ) ) {
|
||||
options.success( this );
|
||||
}
|
||||
|
||||
}).error(function(){
|
||||
alert('Image ('+options.url+') not found.');
|
||||
$.closeOverlay();
|
||||
}).attr({'src' : options.url, 'alt' : options.url});
|
||||
|
||||
}
|
||||
|
||||
// AJAX
|
||||
if ( options.url && !isImage ) {
|
||||
|
||||
$.ajax({
|
||||
type: options.method,
|
||||
data: options.data,
|
||||
url: options.url,
|
||||
success: function(responseText) {
|
||||
|
||||
$('#jOverlayLoading').fadeOut(500);
|
||||
|
||||
$( element ).html(responseText).show();
|
||||
|
||||
center('#jOverlayContent');
|
||||
|
||||
// Execute callback
|
||||
if ($.isFunction( options.success )) {
|
||||
options.success(responseText);
|
||||
}
|
||||
|
||||
},
|
||||
error : function() {
|
||||
alert('URL ('+options.url+') not found.');
|
||||
$.closeOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// :(
|
||||
if ( isIE6 ) {
|
||||
|
||||
// Window scroll
|
||||
$(window).scroll(function(){
|
||||
center('#jOverlayContent');
|
||||
});
|
||||
|
||||
// Window resize
|
||||
$(window).resize(function(){
|
||||
|
||||
$('#jOverlay').css({
|
||||
width: $(window).width() + 'px',
|
||||
height: $(document).height() + 'px'
|
||||
});
|
||||
|
||||
center('#jOverlayContent');
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Press ESC to close
|
||||
$(document).keydown(function(event){
|
||||
if (event.keyCode == 27) {
|
||||
$.closeOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
// Click to close
|
||||
if ( options.bgClickToClose ) {
|
||||
$('#jOverlay').click($.closeOverlay);
|
||||
}
|
||||
|
||||
// Timeout (auto-close)
|
||||
// time in millis to wait before auto-close
|
||||
// set to 0 to disable
|
||||
if ( Number(options.timeout) > 0 ) {
|
||||
jOverlayTimer = setTimeout( $.closeOverlay, Number(options.timeout) );
|
||||
}
|
||||
|
||||
// ADD CSS
|
||||
$('#jOverlayContent').css(options.css || {});
|
||||
};
|
||||
|
||||
// Resizing large images - orginal by Christian Montoya.
|
||||
// Edited by - Cody Lindley (http://www.codylindley.com) (Thickbox 3.1)
|
||||
$.resize = function(imageWidth, imageHeight) {
|
||||
var x = $(window).width() - 150;
|
||||
var y = $(window).height() - 150;
|
||||
if (imageWidth > x) {
|
||||
imageHeight = imageHeight * (x / imageWidth);
|
||||
imageWidth = x;
|
||||
if (imageHeight > y) {
|
||||
imageWidth = imageWidth * (y / imageHeight);
|
||||
imageHeight = y;
|
||||
}
|
||||
} else if (imageHeight > y) {
|
||||
imageWidth = imageWidth * (y / imageHeight);
|
||||
imageHeight = y;
|
||||
if (imageWidth > x) {
|
||||
imageHeight = imageHeight * (x / imageWidth);
|
||||
imageWidth = x;
|
||||
}
|
||||
}
|
||||
return {width:imageWidth, height:imageHeight};
|
||||
};
|
||||
|
||||
// Centered Element
|
||||
$.center = function(element) {
|
||||
var element = $(element);
|
||||
var elemWidth = element.width();
|
||||
|
||||
element.css({
|
||||
width : elemWidth + 'px',
|
||||
marginLeft : '-' + (elemWidth / 2) + 'px',
|
||||
marginTop : '-' + element.height() / 2 + 'px',
|
||||
height : 'auto',
|
||||
top : !isIE6 ? '50%' : $(window).scrollTop() + ($(window).height() / 2) + 'px',
|
||||
left : '50%'
|
||||
});
|
||||
};
|
||||
|
||||
// Options default
|
||||
$.fn.jOverlay.options = {
|
||||
method : 'GET',
|
||||
data : '',
|
||||
url : '',
|
||||
color : '#000',
|
||||
opacity : '0.6',
|
||||
zIndex : 9999,
|
||||
center : true,
|
||||
imgLoading : '',
|
||||
bgClickToClose : true,
|
||||
success : null,
|
||||
timeout : 0,
|
||||
autoHide : true,
|
||||
css : {}
|
||||
};
|
||||
|
||||
// Close
|
||||
$.closeOverlay = function() {
|
||||
|
||||
if (isIE6) { $("select").show(); }
|
||||
|
||||
if ( JOVERLAY_ELEMENT_PREV !== null ) {
|
||||
if ( JOVERLAY_ELEMENT_PREV !== null ) {
|
||||
var element = $('#jOverlayContent').children();
|
||||
JOVERLAY_ELEMENT_PREV.after( element.css('display', element.attr('display') ) );
|
||||
element.removeAttr('display');
|
||||
}
|
||||
}
|
||||
|
||||
$('#jOverlayLoading, #jOverlayContent, #jOverlay').remove();
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user