1/* =============================== 2| JQUERY.LIGHTBOXLIB.JS 3| Copyright, Andy Croxall ([email protected]) 4| For documentation and demo see http://www.mitya.co.uk/scripts/Lightbox-and-lightbox-dialog-99 5| 6| USAGE 7| This script may be used, distributed and modified freely but this header must remain in tact. 8| For usage info and demo, including info on args and params, see www.mitya.co.uk/scripts 9=============================== */ 10 11 12/* ------------------- 13 | CONFIG 14 ------------------- */ 15 16lightboxConfig = { 17 lbOpacity: .6, 18 lbBackground: '444', 19 lbdialog_defaultHeight: 105, //default height of lightbox replcement dialog box (i.e. alert/confirm) 20 lbdialog_allowCloseByClickingLightbox: false, //see notes at top 21 lbdialog_css: { 22 borderRadius: 10, 23 width: 400, 24 boxShadow: '0 0 32px #26a1ce' 25 } 26}; 27 28 29/* ------------------- 30 | PREP. Log whether IE6 and declare func used by lbdialog to allow closure via escsape key (need to declare as non-anonymouse 31 | func so it can be unbound when lbdialog closes 32 ------------------- */ 33 34var ie6 = navigator.appVersion.match(/MSIE 6\.0/); 35var closeLBDialogOnEscapePress = function(e) { if (e.keyCode == 27) hidelightbox(); }; 36 37 38$(function() { 39 40 /* ------------------- 41 | MAIN LIGHTBOX FUNC 42 ------------------- */ 43 44 jQuery.fn.lightbox = function(noFade, autoDisappear, noLightbox, noClose) { 45 46 47 //prep 48 49 var ac = arguments.callee; 50 $(this).addClass('lightbox_centralElement'); 51 var centralElement = this.get(0); 52 $(centralElement).children().hide(); 53 if (noLightbox) $('#lightbox').css({opacity: 0, filter: 'alpha(opacity=0)'}) 54 if (noClose) $('#lightbox').addClass('noClose'); 55 56 57 //utility functions 58 59 ac.doHide = function(noFade, callback) { //called on hide request 60 if (!noFade) { 61 var numChildren; 62 if ((numChildren = $(ac.centralElement).children().length) > 0) { 63 var childrenFaded = 0; 64 $(ac.centralElement).children().fadeOut('', function() { 65 childrenFaded++; 66 if (childrenFaded == numChildren) $(ac.centralElement).slideUp('fast', function() { 67 reinsertCentralElement(); 68 $('#lightbox').fadeOut('fast', callback ? callback() : null); 69 }); 70 }); 71 } else 72 $(ac.centralElement).slideUp('fast', function() { $('#lightbox').fadeOut('fast', callback ? callback() : null); reinsertCentralElement(); }); 73 } else { 74 $(ac.centralElement).hide(); 75 $('#lightbox').hide(); 76 if (callback) callback(); 77 reinsertCentralElement(); 78 } 79 80 }; 81 82 83 //request to show 84 85 if (centralElement.id != 'lightbox') { 86 87 88 //force central element to be child of body (lift it out of the DOM and re-insert). This ensures centering relative to body. After, put back where it was. 89 90 var node_holder = $(centralElement).clone(true); 91 var markerNodeForReinsertion = document.createElement('em'); 92 $(centralElement).before($(markerNodeForReinsertion)); 93 markerNodeForReinsertion.id = 'markerNodeForReinsertion'; 94 $(centralElement).remove(); 95 centralElement = document.body.insertBefore(node_holder.get(0), document.body.childNodes[0]); 96 97 98 //assuming noClose not passed, close lighbox if any <button> or element with .close inside central element is clicked 99 if (!noClose) $(centralElement).find('button, .close').not('.noLBClose, [rel=noLBClose]').click(function(e) { $('#lightbox').lightbox(); }); 100 101 102 //force position absolute and z-index 10001 if not set 103 104 if ($(centralElement).css('position') != 'absolute') $(centralElement).css('position', 'absolute'); 105 if ($(centralElement).css('zIndex') != 10001) $(centralElement).css('zIndex', 10001); 106 107 108 //remember the central element so we can kill it on hide request 109 ac.centralElement = centralElement 110 111 112 //centre it and ensure that, if user scrolls while LB open, central element moves with it 113 $(centralElement).centreElement(); 114 115 $(window).scroll(function() { if(!$(centralElement).hasClass('enable_window_scroll')){ $(centralElement).centreElement(); }}); 116 117 } 118 119 120 //toggle show/hide lightbox 121 122 if ($('#lightbox').is(":hidden")) { //hidden - so show pos as necessary) 123 124 var callback = function() { $(centralElement).slideDown('fast', function() { $(centralElement).children(':not(:visible)').fadeIn(); }); }; 125 if (!noFade) $('#lightbox').fadeIn('fast', callback); else { $('#lightbox').show(); callback(); }
126 if (autoDisappear) setTimeout(hidelightbox, autoDisappear * 1000) 127 128 } else //showing - so hide 129 ac.doHide(); 130 131 } 132 133 134 135 /* ------------------- 136 | UTILITY: centre central element 137 ------------------- */ 138 139 jQuery.fn.centreElement = function(horiz, vert, justReturnValues) { 140 141 //prep 142 if (horiz == undefined) horiz = true; 143 if (vert == undefined) vert = true; 144 var scrollX = (document.documentElement.scrollLeft || document.body.scrollLeft || 0) || window.pageXOffset; 145 var scrollY = (document.documentElement.scrollTop || document.body.scrollTop || 0) || window.pageYOffset; 146 if (scrollX == undefined) scrollX = 0; 147 if (scrollY == undefined) scrollY = 0; 148 var el = this.get(0); 149 150 //calculate 151 var temp_elWidth = parseInt(el.currentStyle ? el.currentStyle.width : getComputedStyle(el, null).width); 152 if (isNaN(temp_elWidth)) { $(el).css('width', '300px'); temp_elWidth = 300; } //force default width if none set 153 var left = (self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth)) / 2 - (temp_elWidth / 2) + scrollX; 154 155 var temp_elHeight = parseInt(el.currentStyle ? el.currentStyle.height : getComputedStyle(el, null).height); 156 if (isNaN(temp_elHeight)) { $(el).css('height', '300px'); temp_elHeight = 300; } // " " " 157 var top = (self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight)) / 2 - (temp_elHeight / 2) + scrollY; 158 159 //account for padding 160 top -= parseInt(el.currentStyle ? el.currentStyle.paddingTop : getComputedStyle(el, null).paddingTop); 161 left -= parseInt(el.currentStyle ? el.currentStyle.paddingLeft : getComputedStyle(el, null).paddingLeft); 162 163 //return/effect 164 if (!justReturnValues) { 165 if (horiz) el.style.left = left+"px"; 166 if (vert) el.style.top = top+"px"; 167 } else { 168 if ((!horiz || horiz) && (!vert || vert)) 169 return [left, top]; 170 else if (!horiz || horiz) 171 return left; 172 else if (!vert || vert) 173 return vert; 174 } 175 176 } 177 178 179 /* ------------------- 180 | BUILD LIGHTBOX ONLOAD 181 ------------------- */ 182 183 //build 184 var lightboxDiv = document.createElement('div'); 185 lightboxDiv.id = 'lightbox'; 186 $(lightboxDiv).click(function() { 187 if (!$(this).hasClass('noClose')&&( 188 jQuery.fn.lightbox.centralElement.id != 'lightboxdialog' || lightboxConfig.lbdialog_allowCloseByClickingLightbox 189 )) $(this).lightbox(); 190 }); 191 $(document.body).prepend(lightboxDiv); 192 193 //style it (doing it here means the script is portable, don't need to tell users to add rules to their CSS sheets) 194 $('#lightbox').css({ 195 opacity: lightboxConfig.lbOpacity, 196 filter: 'alpha(opacity='+(lightboxConfig.lbOpacity * 100)+')', 197 width: $(document).width(), 198 height: $(document).height(), 199 background: '#'+lightboxConfig.lbBackground, 200 position: 'fixed', 201 left: 0, 202 top: 0, 203 zIndex: 10000, 204 display: 'none' 205 }); 206 207}); 208 209 210 211/* ------------------- 212| UTILITY FUNC: supporting func - on lightbox close, reinsert central element into DOM at its original position 213------------------- */ 214 215reinsertCentralElement = function() { 216 var ce = jQuery.fn.lightbox.centralElement; 217 try { 218 markerNodeForReinsertion = $('#markerNodeForReinsertion').get(0); 219 if (markerNodeForReinsertion.parentNode.tagName.toLowerCase() != "body") { 220 var ceHolder = ce; 221 ce.parentNode.removeChild(ce); 222 markerNodeForReinsertion.parentNode.insertBefore(ceHolder, markerNodeForReinsertion); 223 markerNodeForReinsertion.parentNode.removeChild(markerNodeForReinsertion); 224 } 225 } catch(e) {} 226} 227 228 229 230/* ------------------- 231| UTILITY FUNC: lightbox-utilising replacement for in-built alert/confirm methods. See usage notes at top of page. 232------------------- */ 233 234lbdialog = function(params) { 235 236 237 //checktype passed args before continuing 238 239 if ( 240 typeof params.content != 'string' 241 || 242 (params.okButton && 243 (typeof params.okButton.callback != 'function' && params.okButton.callback) 244 ) 245 || 246 (params.cancelButton && 247 (typeof params.cancelButton.callback != 'function' && params.cancelButton.callback) 248 ) 249 ) 250 return false;
251 252 253 //clean up from any previous alert 254 255 if ($('#lightboxdialog').length != 0) $('#lightboxdialog').remove(); 256 257 258 //create, style (with necessary CSS, params-passed CSS and config CSS at top of file) and append dialog box 259 260 var box = document.createElement('div'); 261 with ($(box)) { 262 attr('id', 'lightboxdialog'); 263 css({background: '#fff', position: 'absolute', padding: 15, width: 320, height: lightboxConfig.lbdialog_defaultHeight, display: 'none', textAlign: 'left'}); 264 if (typeof params.css == 'object') $(box).css(params.css); 265 if (lightboxConfig.lbdialog_css) css(lightboxConfig.lbdialog_css); 266 } 267 $('body').prepend(box); 268 269 270 //add content 271 272 var fs = lightboxConfig.lbdialog_css.fontSize+''; 273 if (!fs.match(/^\d$/)) fs += 'px'; 274 var header; 275 if (params.error) header = ['ERROR', 'b00']; 276 else if (params.success) header = ['SUCCESS', '0b0']; 277 var header = header == undefined ? '' : "<h4 style='margin: 0 0 10px 0; color: #"+header[1]+"'>"+header[0]+"</h4>"; 278 $(box).html(header+'<p'+(fs ? " style='margin-bottom: 10px; font-size: "+fs+"'" : '')+'>'+params.content+"</p<div style='clear: both'></div>"); 279 280 281 //add buttons, unless params stipulate the dialog should close itself after X seconds. right button will always be put out, 282 //whereas left button is only put out if params.cancelButton object is passed, i.e. is confirm, not alert. onclick, along 283 //with effecting any callbacks passed, they will also close the lightbox unless you pass 'noLBClose' in their object 284 285 if (!params.autoDisappear) { 286 var buttons_list = ['OK', 'cancel']; 287 var b_count = 1;
288 for(var e in buttons_list) { 289 if (buttons_list[e] == 'OK' || params.cancelButton) { 290 var but = document.createElement('button'); 291 var butText = false; 292 // $(but).css({'float': buttons_list[e] == 'OK' ? 'right' : 'left'}); 293 $(but).addClass('message_btn'); 294 // <button type="button" class="message_btn"><span><span>OK</span></span></button> 295 if (params[buttons_list[e]+'Button']) { 296 if (params[buttons_list[e]+'Button'].noLBClose) $(but).addClass('noLBClose'); 297 butText = params[buttons_list[e]+'Button'].text ? params[buttons_list[e]+'Button'].text : buttons[e]; 298 if (params[buttons_list[e]+'Button'].callback) $(but).click(params[buttons_list[e]+'Button'].callback); 299 } else { 300 butText = buttons_list[e]; 301 } 302 if (b_count < 3) { 303 $(but).html('<span><span>'+butText+'</span></span>'); // $(but).text(butText); 304 box.appendChild(but); 305 } 306 } 307 b_count++; 308 } 309 } 310 311 312 //centre and show 313 $(box).lightbox(true, params.autoDisappear ? params.autoDisappear : null, params.noLightbox ? true : null); 314 315 //lastly, close on keypress to <escape> 316 $(document).bind('keypress', closeLBDialogOnEscapePress); 317 318}; 319 320 321/* ------------------- 322| UTILITY FUNC: close lightbox and remove keypress bind to escape key 323------------------- */ 324 325hidelightbox = function(noFade, callback) { 326 jQuery.fn.lightbox.doHide(noFade, callback); 327 $(document).unbind('keypress', closeLBDialogOnEscapePress); 328};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.