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.7.1 (JUN 15, 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         var     JOVERLAY_ELEMENT_PREV = null;
  13
  14         $.fn.jOverlay = function(options) {
  15
  16                 // Element exist?
  17                 if ( $('#jOverlay').length ) {$.closeOverlay();}
  18
  19                 // Clear Element Prev
  20                 JOVERLAY_ELEMENT_PREV = null;
  21
  22                 // Clear Timer
  23                 if (JOVERLAY_TIMER !== null) {
  24                         clearTimeout( JOVERLAY_TIMER );
  25                 }
  26
  27                 // Set Options
  28                 var options = $.extend({}, $.fn.jOverlay.options, options);
  29
  30                 // private function
  31                 function center(id) {
  32                         if (options.center) {
  33                                 $.center(id);
  34                         }
  35                 }
  36
  37                 var element = this.is('*') ? this : '#jOverlayContent';
  38                 var position = isIE6 ? 'absolute' : 'fixed';
  39                 var isImage = /([^\/\\]+)\.(png|gif|jpeg|jpg|bmp)$/i.test( options.url );
  40
  41                 var imgLoading = options.imgLoading ? "<img id='jOverlayLoading' src='"+options.imgLoading+"' style='position:"+position+"; z-index:"+(options.zIndex + 9)+";'/>" : '';
  42
  43                 $('body').prepend(imgLoading + "<div id='jOverlay' />"
  44                         + "<div id='jOverlayContent' style='position:"+position+"; z-index:"+(options.zIndex + 5)+"; display:none;'/>"
  45                 );
  46
  47                 // Loading Centered
  48                 $('#jOverlayLoading').load(function(){
  49                         center(this);
  50                 });
  51
  52                 //IE 6 FIX
  53                 if ( isIE6 ) {
  54                         $('select').hide();
  55                         $('#jOverlayContent select').show();
  56                 }
  57
  58                 // Overlay Style
  59                 $('#jOverlay').css({
  60                         backgroundColor : options.color,
  61                         position : position,
  62                         top : '0px',
  63                         left : '0px',
  64                         filter : 'alpha(opacity='+ (options.opacity * 100) +')', // IE =(
  65                         opacity : options.opacity, // Good Browser =D
  66                         zIndex : options.zIndex,
  67                         width : !isIE6 ? '100%' : $(window).width() + 'px',
  68                         height : !isIE6 ? '100%' : $(document).height() + 'px'
  69                 }).show();
  70
  71                 // ELEMENT
  72                 if ( this.is('*') ) {
  73
  74                         JOVERLAY_ELEMENT_PREV = this.prev();
  75
  76                         $('#jOverlayContent').html(
  77                                 this.show().attr('display', options.autoHide ? 'none' : this.css('display') )
  78                         );
  79
  80                         if ( !isImage ) {
  81
  82                                 center('#jOverlayContent');
  83
  84                                 $('#jOverlayContent').show();
  85
  86                                 // Execute callback
  87                                 if ( !options.url && $.isFunction( options.success ) ) {
  88                                         options.success( this );
  89                                 }
  90
  91                         }
  92
  93                 }
  94
  95                 // IMAGE
  96                 if ( isImage ) {
  97
  98                         $('<img/>').load(function(){
  99                                 var resize = $.resize(this.width, this.height);
 100
 101                                 $(this).css({
 102                                         width : resize.width,
 103                                         height : resize.height
 104                                 });
 105
 106                                 $( element ).html(this);
 107
 108                                 center('#jOverlayContent');
 109
 110                                 $('#jOverlayLoading').fadeOut(500);
 111                                 $('#jOverlayContent').show();
 112
 113                                 // Execute callback
 114                                 if ( $.isFunction( options.success ) ) {
 115                                         options.success( this );
 116                                 }
 117
 118                         }).error(function(){
 119                                 alert('Image ('+options.url+') not found.');
 120                                 $.closeOverlay();
 121                         }).attr({'src' : options.url, 'alt' : options.url});
 122
 123                 }
 124
 125                 // AJAX
 126                 if ( options.url && !isImage ) {
 127
 128                         $.ajax({
 129                                 type: options.method,
 130                                 data: options.data,
 131                                 url: options.url,
 132                                 success: function(responseText) {
 133
 134                                         $('#jOverlayLoading').fadeOut(500);
 135
 136                                         $( element ).html(responseText).show();
 137
 138                                         center('#jOverlayContent');
 139
 140                                         // Execute callback
 141                                         if ($.isFunction( options.success )) {
 142                                                 options.success(responseText);
 143                                         }
 144
 145                                 },
 146                                 error : function() {
 147                                         alert('URL ('+options.url+') not found.');
 148                                         $.closeOverlay();
 149                                 }
 150                         });
 151
 152                 }
 153
 154                 // :(
 155                 if ( isIE6 ) {
 156
 157                         // Window scroll
 158                         $(window).scroll(function(){
 159                                 center('#jOverlayContent');
 160                         });
 161
 162                         // Window resize
 163                         $(window).resize(function(){
 164
 165                                 $('#jOverlay').css({
 166                                         width: $(window).width() + 'px',
 167                                         height: $(document).height() + 'px'
 168                                 });
 169
 170                                 center('#jOverlayContent');
 171
 172                         });
 173
 174                 }
 175
 176                 // Press ESC to close
 177                 $(document).keydown(function(event){
 178                         if (event.keyCode == 27) {
 179                                 $.closeOverlay();
 180                         }
 181                 });
 182
 183                 // Click to close
 184                 if ( options.bgClickToClose ) {
 185                         $('#jOverlay').click($.closeOverlay);
 186                 }
 187
 188                 // Timeout (auto-close)
 189                 // time in millis to wait before auto-close
 190                 // set to 0 to disable
 191                 if ( Number(options.timeout) > 0 ) {
 192                         jOverlayTimer = setTimeout( $.closeOverlay, Number(options.timeout) );
 193                 }
 194
 195                 // ADD CSS
 196                 $('#jOverlayContent').css(options.css || {});
 197         };
 198
 199         // Resizing large images - orginal by Christian Montoya.
 200         // Edited by - Cody Lindley (http://www.codylindley.com) (Thickbox 3.1)
 201         $.resize = function(imageWidth, imageHeight) {
 202                 var x = $(window).width() - 150;
 203                 var y = $(window).height() - 150;
 204                 if (imageWidth > x) {
 205                         imageHeight = imageHeight * (x / imageWidth);
 206                         imageWidth = x;
 207                         if (imageHeight > y) {
 208                                 imageWidth = imageWidth * (y / imageHeight);
 209                                 imageHeight = y;
 210                         }
 211                 } else if (imageHeight > y) {
 212                         imageWidth = imageWidth * (y / imageHeight);
 213                         imageHeight = y;
 214                         if (imageWidth > x) {
 215                                 imageHeight = imageHeight * (x / imageWidth);
 216                                 imageWidth = x;
 217                         }
 218                 }
 219                 return {width:imageWidth, height:imageHeight};
 220         };
 221
 222         // Centered Element
 223         $.center = function(element) {
 224                 var element = $(element);
 225                 var elemWidth = element.width();
 226
 227                 element.css({
 228                         width : elemWidth + 'px',
 229                         marginLeft : '-' + (elemWidth / 2) + 'px',
 230                         marginTop : '-' + element.height() / 2 + 'px',
 231                         height : 'auto',
 232                 top : !isIE6 ? '50%' : $(window).scrollTop() + ($(window).height() / 2) + 'px',
 233                 left : '50%'
 234                 });
 235         };
 236
 237         // Options default
 238         $.fn.jOverlay.options = {
 239                 method : 'GET',
 240                 data : '',
 241                 url : '',
 242                 color : '#000',
 243                 opacity : '0.6',
 244                 zIndex : 9999,
 245                 center : true,
 246                 imgLoading : '',
 247                 bgClickToClose : true,
 248                 success : null,
 249                 timeout : 0,
 250                 autoHide : true,
 251                 css : {}
 252         };
 253
 254         // Close
 255         $.closeOverlay = function() {
 256
 257                 if (isIE6) { $("select").show(); }
 258
 259                 if ( JOVERLAY_ELEMENT_PREV !== null ) {
 260                         if ( JOVERLAY_ELEMENT_PREV !== null ) {
 261                                 var element = $('#jOverlayContent').children();
 262                                 JOVERLAY_ELEMENT_PREV.after( element.css('display', element.attr('display') ) );
 263                                 element.removeAttr('display');
 264                         }
 265                 }
 266
 267                 $('#jOverlayLoading, #jOverlayContent, #jOverlay').remove();
 268
 269         };
 270
 271 })(jQuery);