js/jquery.joverlay.js

   1 /* Copyright (c) 2009 Alvaro A. Lima Jr http://alvarojunior.com/jquery/joverlay.html
   2  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
   3  * Version: 0.8 (OUT 19, 2009)
   4  * Requires: jQuery 1.3+
   5  */
   6
   7 (function($) {
   8
   9         // Global vars
  10         var isIE6 = $.browser.msie && $.browser.version == 6.0; // =(
  11         var JOVERLAY_TIMER = null;
  12
  13         $.fn.jOverlay = function(options) {
  14
  15                 // Element exist?
  16                 if ( $('#jOverlay').length ) {$.closeOverlay();}
  17
  18                 // Clear Timer
  19                 if (JOVERLAY_TIMER !== null) {
  20                         clearTimeout( JOVERLAY_TIMER );
  21                 }
  22
  23                 // Set Options
  24                 var options = $.extend({}, $.fn.jOverlay.options, options || {});
  25
  26                 // success deprecated !!! Use onSuccess
  27                 var onSuccess =  options.onSuccess || options.success;
  28
  29                 var element = this.is('*') ? this : '#jOverlayContent';
  30
  31                 var position = isIE6 ? 'absolute' : 'fixed';
  32
  33                 var isImage = /([^\/\\]+)\.(png|gif|jpeg|jpg|bmp)$/i.test( options.url );
  34
  35                 var imgLoading = options.imgLoading ? "<img id='jOverlayLoading' src='"+options.imgLoading+"' style='position:"+position+"; z-index:"+(options.zIndex + 9)+";'/>" : '';
  36
  37                 // private function
  38                 function center(id) {
  39                         if (options.center) {
  40                                 $.center(id);
  41                         } else if( isIE6 ) {
  42                                 $.center('#jOverlayContent',{
  43                                         'top' : $(window).scrollTop() + 'px',
  44                                         'marginLeft' : '',
  45                                         'marginTop' : '',
  46                                         'left' : ''
  47                                 });
  48                         }
  49                 }
  50
  51                 $('body').prepend(imgLoading + "<div id='jOverlay' />"
  52                         + "<div id='jOverlayContent' style='position:"+position+"; z-index:"+(options.zIndex + 5)+"; display:none;'/>"
  53                 );
  54
  55                 // Cache options
  56                 $('#jOverlayContent').data('options', options);
  57
  58                 // Loading Centered
  59                 $('#jOverlayLoading').load(function() {
  60                         center(this);
  61                 });
  62
  63                 //IE 6 FIX
  64                 if ( isIE6 ) {
  65                         $('select').hide();
  66                         $('#jOverlayContent select').show();
  67                 }
  68
  69                 // Overlay Style
  70                 $('#jOverlay').css({
  71                         'backgroundColor' : options.color,
  72                         'position' : position,
  73                         'top' : '0px',
  74                         'left' : '0px',
  75                         'filter' : 'alpha(opacity='+ (options.opacity * 100) +')', // IE =(
  76                         'opacity' : options.opacity, // Good Browser =D
  77                         '-khtml-opacity' : options.opacity,
  78                         '-moz-opacity' : options.opacity,
  79                         'zIndex' : options.zIndex,
  80                         'width' : !isIE6 ? '100%' : $(window).width() + 'px',
  81                         'height' : !isIE6 ? '100%' : $(document).height() + 'px'
  82                 }).show();
  83
  84                 // INNER HTML
  85                 if ( $.trim(options.html) ) {
  86                         $(element).html(options.html);
  87                 }
  88
  89                 // ELEMENT
  90                 if ( this.is('*') ) {
  91
  92                         $('#jOverlayContent').data('jOverlayElementPrev', this.prev() );
  93
  94                         $('#jOverlayContent').html(
  95                                 this.show().data('display', options.autoHide ? 'none' : this.css('display') )
  96                         );
  97
  98                         if ( !isImage ) {
  99
 100                                 center('#jOverlayContent');
 101
 102                                 $('#jOverlayContent').show();
 103
 104                                 // Execute callback
 105                                 if ( !options.url && $.isFunction( onSuccess ) ) {
 106                                         onSuccess( this );
 107                                 }
 108
 109                         }
 110
 111                 }
 112
 113                 // IMAGE
 114                 if ( isImage ) {
 115
 116                         $('<img/>').load(function(){
 117                                 var resize = $.resize(this.width, this.height);
 118
 119                                 $(this).css({
 120                                         width : resize.width,
 121                                         height : resize.height
 122                                 });
 123
 124                                 $( element ).html(this);
 125
 126                                 center('#jOverlayContent');
 127                                 center('#jOverlayLoading');
 128
 129                                 $('#jOverlayLoading').fadeOut(500);
 130                                 $('#jOverlayContent').show();
 131
 132                                 // Execute callback
 133                                 if ( $.isFunction( onSuccess ) ) {
 134                                         onSuccess( $(element) );
 135                                 }
 136
 137                         }).error(function(){
 138                                 alert('Image ('+options.url+') not found.');
 139                                 $.closeOverlay();
 140                         }).attr({'src' : options.url, 'alt' : options.url});
 141
 142                 }
 143
 144                 // AJAX
 145                 if ( options.url && !isImage ) {
 146
 147                         $.ajax({
 148                                 type: options.method,
 149                                 data: options.data,
 150                                 url: options.url,
 151                                 success: function(responseText) {
 152
 153                                         $('#jOverlayLoading').fadeOut(500);
 154
 155                                         $( element ).html(responseText).show();
 156
 157                                         center('#jOverlayContent');
 158
 159                                         // Execute callback
 160                                         if ( $.isFunction( onSuccess ) ) {
 161                                                 onSuccess( responseText );
 162                                         }
 163
 164                                 },
 165                                 error : function() {
 166                                         alert('URL ('+options.url+') not found.');
 167                                         $.closeOverlay();
 168                                 }
 169                         });
 170
 171                 }
 172
 173                 // :(
 174                 if ( isIE6 ) {
 175
 176                         // Window scroll
 177                         $(window).scroll(function(){
 178                                 center('#jOverlayContent');
 179                         });
 180
 181                         // Window resize
 182                         $(window).resize(function(){
 183
 184                                 $('#jOverlay').css({
 185                                         'width' : $(window).width() + 'px',
 186                                         'height' : $(document).height() + 'px'
 187                                 });
 188
 189                                 center('#jOverlayContent');
 190
 191                         });
 192
 193                 }
 194
 195                 // Press ESC to close
 196                 if ( options.closeOnEsc ) {
 197                         $(document).keydown(function(event){
 198                                 if ( event.keyCode == 27 ) {
 199                                         $.closeOverlay();
 200                                 }
 201                         });
 202                 } else {
 203                         $(document).unbind('keydown');
 204                 }
 205
 206                 // Click to close
 207                 if ( options.bgClickToClose ) {
 208                         $('#jOverlay').click($.closeOverlay);
 209                 }
 210
 211                 // Timeout (auto-close)
 212                 // time in millis to wait before auto-close
 213                 // set to 0 to disable
 214                 if ( options.timeout && Number(options.timeout) > 0 ) {
 215                         JOVERLAY_TIMER = window.setTimeout( $.closeOverlay, Number(options.timeout) );
 216                 }
 217
 218                 // ADD CSS
 219                 $('#jOverlayContent').css(options.css || {});
 220
 221         };
 222
 223         // Resizing large images - orginal by Christian Montoya.
 224         // Edited by - Cody Lindley (http://www.codylindley.com) (Thickbox 3.1)
 225         $.resize = function(imageWidth, imageHeight) {
 226                 var x = $(window).width() - 150;
 227                 var y = $(window).height() - 150;
 228                 if (imageWidth > x) {
 229                         imageHeight = imageHeight * (x / imageWidth);
 230                         imageWidth = x;
 231                         if (imageHeight > y) {
 232                                 imageWidth = imageWidth * (y / imageHeight);
 233                                 imageHeight = y;
 234                         }
 235                 } else if (imageHeight > y) {
 236                         imageWidth = imageWidth * (y / imageHeight);
 237                         imageHeight = y;
 238                         if (imageWidth > x) {
 239                                 imageHeight = imageHeight * (x / imageWidth);
 240                                 imageWidth = x;
 241                         }
 242                 }
 243                 return {'width':imageWidth, 'height':imageHeight};
 244         };
 245
 246         // Centered Element
 247         $.center = function(element, css) {
 248                 var element = $(element);
 249                 var elemWidth = element.width();
 250
 251                 element.css($.extend({},{
 252                         'width' : elemWidth + 'px',
 253                         'marginLeft' : '-' + (elemWidth / 2) + 'px',
 254                         'marginTop' : '-' + element.height() / 2 + 'px',
 255                         'height' : 'auto',
 256                 'top' : !isIE6 ? '50%' : $(window).scrollTop() + ($(window).height() / 2) + 'px',
 257                 'left' : '50%'
 258                 }, css || {}));
 259         };
 260
 261         // Options default
 262         $.fn.jOverlay.options = {
 263                 'method' : 'GET',
 264                 'data' : '',
 265                 'url' : '',
 266                 'color' : '#000',
 267                 'opacity' : '0.6',
 268                 'zIndex' : 9999,
 269                 'center' : true,
 270                 'imgLoading' : '',
 271                 'bgClickToClose' : true,
 272                 'success' : null, // Deprecated : use onSuccess
 273                 'onSuccess' : null,
 274                 'timeout' : 0,
 275                 'autoHide' : true,
 276                 'css' : {},
 277                 'html' : '',
 278                 'closeOnEsc' : true
 279         };
 280
 281         // Set default options (GLOBAL)
 282         // Overiding the default values.
 283         $.fn.jOverlay.setDefaults = function(options) {
 284                 $.fn.jOverlay.options = $.extend({}, $.fn.jOverlay.options, options || {});
 285         };
 286
 287         // Close
 288         $.closeOverlay = function() {
 289
 290                 var content = $('#jOverlayContent');
 291                 var options = content.data('options');
 292                 var elementPrev = content.data('jOverlayElementPrev');
 293
 294                 // Fix IE6 (SELECT)
 295                 if (isIE6) { $("select").show(); }
 296
 297                 // Restore position
 298                 if ( elementPrev ) {
 299                         var contentChildren = content.children();
 300                         elementPrev.after( contentChildren.css('display', contentChildren.data('display') ) );
 301                         // Clear cache
 302                         contentChildren.removeData('display');
 303                         content.removeData('jOverlayElementPrev');
 304                 }
 305
 306                 // Clear options cache
 307                 content.removeData('options');
 308
 309                 // Remove joverlay elements
 310                 $('#jOverlayLoading, #jOverlayContent, #jOverlay').remove();
 311
 312         };
 313
 314 })(jQuery);