jQuery jOverlay

Required

• jQuery (1.3.x or higher)
• jquery.joverlay.js (6.0kb, Source Code)
• jquery.joverlay.min.js (3.4kb, Minified for production)
• jquery.joverlay.pack.js (3.1kb, Pack for production)

Current Release: v.0.7.1

Browser Compatibility

jOverlay has been tested successfully in the following browsers with Javascript enabled:

• Firefox 3+
• Internet Explorer 6+
• Safari 2+
• Opera 9+
• Chrome 1+

Examples

Includes

NO CSS!

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.joverlay.min.js"></script>

Default options

$.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 : {}
};

Usage

BOX 1

$('#box1').jOverlay();

$('#box1').jOverlay({color:'green', opacity : 0.9});

Box 1

Box 1 + options

BOX 2 + AJAX + NO BG CLICK TO CLOSE + NO AUTOHIDE

$('#box2').jOverlay({url:'teste.html', bgClickToClose : false, autoHide : false});

Box 2 + AJAX

AJAX + LOADING

$().jOverlay({url:'teste2.html', imgLoading : 'ajax-loader.gif'});

AJAX + loading

BOX1 + SUCCESS + HTML

$('#box1').jOverlay({success:function(element){ alert(element.html());}});

BOX1 + RESPONSETEXT

AJAX + SUCCESS + RESPONSETEXT

$().jOverlay({
	url:'teste2.html'
	,imgLoading : 'ajax-loader.gif'
	,success:function(resp){
		alert(resp);
	}
});

AJAX + RESPONSETEXT

BOX 1 + Timeout (auto-close)

Time in millis to wait before auto-close.

Set to 0 to disable.

$('#box1').jOverlay({timeout:2000});

BOX 1 + Timeout (auto-close)

LOAD IMAGES! (png, gif, jpeg, jpg, bmp)

(AUTO) Resizing large images

Load Image

lucas.jpeg width = 1200 pixels and height = 1600 pixels (471,2 KB)

$().jOverlay({url:'lucas.jpeg', imgLoading : 'ajax-loader.gif'});

Load Image

BOX IMG + INNER Load Image

lucas.jpg width = 640 pixels and height = 480 pixels (70,7 KB)

$('#boxImg').jOverlay({url:'lucas.jpg', imgLoading : 'ajax-loader.gif'});

Load Image

BOX 1 + CHANGE CSS

$('#box1').jOverlay({center:false,css:{right:0,border:'10px solid red'}});

Box 1 + CHANGE CSS

Bug Fix: jOverlay + callback=jOverlay (more calls)

$('#box1').jOverlay({success:function(){ $('#box2').jOverlay({url:'teste.html'});}});

jOverlay + callback=jOverlay

Support

Support is available through the email : alvarolimajr [at] gmail [dot] com

Credits

Written by Alvaro Junior