1/** 2 * Sexy LightBox - for jQuery 1.3.2 3 * @name sexylightbox.v2.3.js 4 * @author Eduardo D. Sada - http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 5 * @version 2.3.4 6 * @date 10-Nov-2009 7 * @copyright (c) 2009 Eduardo D. Sada (www.coders.me) 8 * @license MIT - http://es.wikipedia.org/wiki/Licencia_MIT 9 * @example http://www.coders.me/ejemplos/sexy-lightbox-2/ 10*/ 11 12jQuery.bind = function(object, method){ 13 var args = Array.prototype.slice.call(arguments, 2); 14 return function() { 15 var args2 = [this].concat(args, $.makeArray( arguments )); 16 return method.apply(object, args2); 17 }; 18}; 19 20(function($) { 21 22 SexyLightbox = { 23 getOptions: function() { 24 return { 25 name : 'SLB', 26 zIndex : 32000, 27 color : 'custom', 28 find : 'sexylightbox', 29 emergefrom : 'top', 30 background : '', 31 backgroundIE : '', 32 buttons : '', 33 displayed : 0, 34 showDuration : 200, 35 closeDuration : 400, 36 moveDuration : 1000, 37 moveEffect : 'easeInOutBack', 38 resizeDuration: 1000, 39 resizeEffect : 'easeInOutBack', 40 shake : { 41 distance : 10, 42 duration : 100, 43 transition : 'easeInOutBack', 44 loops : 2 45 }, 46 BoxStyles : { 'width' : 1020, 'height': 573 }, 47 Skin : { 48 'white' : { 'hexcolor': '#FFFFFF', 'captionColor': '#000000', 'background-color': '#000000', 'opacity': 0.6 }, 49 'black' : { 'hexcolor': '#000000', 'captionColor': '#FFFFFF', 'background-color': '#000000', 'opacity': 0.6 }, 50 'blanco': { 'hexcolor': '#FFFFFF', 'captionColor': '#000000', 'background-color': '#000000', 'opacity': 0.6 }, 51 'custom': { 'hexcolor': '#FFFFFF', 'captionColor': '#000000', 'background-color': '#000000', 'opacity': 0.6 }, 52 'negro' : { 'hexcolor': '#000000', 'captionColor': '#FFFFFF', 'background-color': '#000000', 'opacity': 0.6 } 53 } 54 }; 55 }, 56 57 overlay: { 58 create: function(options) { 59 this.options = options; 60 this.element = $('<div id="'+new Date().getTime()+'"></div>'); 61 this.element.css($.extend({}, { 62 'position' : 'absolute', 63 'top' : 0, 64 'left' : 0, 65 'opacity' : 0, 66 'display' : 'none', 67 'z-index' : this.options.zIndex 68 }, this.options.style)); 69 70 this.element.bind('click', $.bind(this, function(obj, event) { 71 if (this.options.hideOnClick) { 72 if (this.options.callback) { 73 this.options.callback(); 74 } else { 75 this.hide(); 76 } 77 } 78 event.preventDefault(); 79 })); 80 81 this.hidden = true; 82 this.inject(); 83 }, 84 85 inject: function() { 86 this.target = $(document.body); 87 this.target.append(this.element); 88 89 /*if($.browser.msie && $.browser.version=="6.0") 90 { 91 var zIndex = parseInt(this.element.css('zIndex')); 92 if (!zIndex) 93 { 94 zIndex = 1; 95 var pos = this.element.css('position'); 96 if (pos == 'static' || !pos) 97 { 98 this.element.css({'position': 'relative'}); 99 } 100 this.element.css({'zIndex': zIndex}); 101 } 102 zIndex = (!!(this.options.zIndex || this.options.zIndex === 0) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1; 103 if (zIndex < 0) 104 { 105 zIndex = 1; 106 } 107 this.shim = $('<iframe id="IF_'+new Date().getTime()+'" scrolling="no" frameborder=0 src=""></div>'); 108 this.shim.css({ 109 zIndex : zIndex, 110 position : 'absolute', 111 top : 0, 112 left : 0, 113 border : 'none', 114 opacity : 0 115 }); 116 this.shim.insertAfter(this.element); 117 }*/ 118 119 }, 120 121 resize: function(x, y) { 122 this.element.css({ 'height': 0, 'width': 0 }); 123 if (this.shim) this.shim.css({ 'height': 0, 'width': 0 }); 124
125 var win = { x: $(document).width(), y: $(document).height() }; 126 //var chromebugfix = $.browser.safari ? (win.x - 25 < document.body.clientWidth ? document.body.clientWidth : win.x) : win.x; 127 var chromebugfix = win.x; 128 129 this.element.css({ 130 width : x ? x : chromebugfix, //* chrome fix 131 height : y ? y : win.y 132 }); 133 134 if (this.shim) 135 { 136 this.shim.css({ 'height': 0, 'width': 0 }); 137 this.shim.css({ 138 width : x ? x : chromebugfix, //* chrome fix 139 height : y ? y : win.y 140 }); 141 } 142 return this; 143 }, 144 145 show: function() { 146 if (!this.hidden) return this; 147 if (this.transition) this.transition.stop(); 148 this.target.bind('resize', $.bind(this, this.resize)); 149 this.resize(); 150 if (this.shim) this.shim.css({'display': 'block'}); 151 this.hidden = false; 152 153 154 this.transition = this.element.fadeIn(this.options.showDuration, $.bind(this, function(){ 155 this.element.trigger('show'); 156 })); 157 158 return this; 159 }, 160 161 hide: function() { 162 if (this.hidden) return this; 163 if (this.transition) this.transition.stop(); 164 this.target.unbind('resize'); 165 if (this.shim) this.shim.css({'display': 'none'}); 166 this.hidden = true; 167 168 this.transition = this.element.fadeOut(this.options.closeDuration, $.bind(this, function(){ 169 this.element.trigger('hide'); 170 this.element.css({ 'height': 0, 'width': 0 }); 171 })); 172 173 return this; 174 } 175 176 }, 177 178 backwardcompatibility: function(option) { 179 this.options.dir = option.imagesdir || option.path || option.folder || option.dir; 180 this.options.OverlayStyles = $.extend(this.options.Skin[this.options.color], this.options.OverlayStyles || {}); 181 }, 182 183 preloadimage: function(url) { 184 img = new Image(); 185 img.src = url; 186 }, 187 188 initialize: function(options) { 189 this.options = $.extend(this.getOptions(), options); 190 this.backwardcompatibility(this.options); 191 192 var strBG = this.options.dir+'/'+this.options.color+'/'+((((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)))?this.options.backgroundIE:this.options.background); 193 var name = this.options.name; 194 195 this.preloadimage(strBG); 196 this.preloadimage(this.options.dir+'/'+this.options.color+'/'+this.options.buttons); 197 198 this.overlay.create({ 199 style : this.options.Skin[this.options.color], 200 hideOnClick : true, 201 zIndex : this.options.zIndex-1, 202 callback : $.bind(this, this.close), 203 showDuration : this.options.showDuration, 204 showEffect : this.options.showEffect, 205 closeDuration : this.options.closeDuration, 206 closeEffect : this.options.closeEffect 207 }); 208 209 this.lightbox = {}; 210 211 $('body').append('<div id="'+name+'-Wrapper"><div id="'+name+'-Contenedor"><div id="'+name+'-Contenido"></div><a id="'+name+'-CloseButton" href="#"></a></div></div>'); 212 213 this.Wrapper = $('#'+name+'-Wrapper'); 214 this.Background = $('#'+name+'-Background'); 215 this.Contenedor = $('#'+name+'-Contenedor'); 216 this.Top = $('#'+name+'-Top'); 217 this.CloseButton = $('#'+name+'-CloseButton'); 218 this.Contenido = $('#'+name+'-Contenido'); 219 this.bb = $('#'+name+'-Bottom'); 220 this.innerbb = $('#'+name+'-BottomRight'); 221 this.Nav = $('#'+name+'-Navegador'); 222 this.Descripcion = $('#'+name+'-Caption'); 223 224 this.Wrapper.css({ 225 'z-index' : this.options.zIndex, 226 'display' : 'none' 227 }).hide(); 228 229 this.Background.css({ 230 'z-index' : this.options.zIndex + 1 231 }); 232 233 this.Contenedor.css({ 234 'position' : 'absolute', 235 'width' : 'auto ', 236 'z-index' : this.options.zIndex + 2 237 }); 238 239 this.Contenido.css({ 240 'height' : this.options.BoxStyles['height'] 241 }); 242 243 this.CloseButton.css({ 244 //'background-image' : 'url('+this.options.dir+'/'+this.options.color+'/'+this.options.buttons+')' 245 }); 246 247 this.Nav.css({ 248 'color' : this.options.Skin[this.options.color].captionColor 249 }); 250 251 this.Descripcion.css({ 252 'color' : this.options.Skin[this.options.color].captionColor 253 }); 254 255 256 257 /** 258 * AGREGAMOS LOS EVENTOS 259 ************************/ 260 261 this.CloseButton.bind('click', $.bind(this, function(){ 262 this.close(); 263 return false;
264 })); 265 266 $(document).bind('keydown', $.bind(this, function(obj, event){ 267 if (this.options.displayed == 1) { 268 if (event.keyCode == 27){ 269 this.close(); 270 } 271 272 if (event.keyCode == 37){ 273 if (this.prev) { 274 this.prev.trigger('click', event); 275 } 276 } 277 278 if (event.keyCode == 39){ 279 if (this.next) { 280 this.next.trigger('click', event); 281 } 282 } 283 } 284 })); 285 286 $(window).bind('resize', $.bind(this, function() { 287 if(this.options.displayed == 1) { 288 this.replaceBox(); 289 this.overlay.resize(); 290 } 291 })); 292 293 $(window).bind('scroll', $.bind(this, function() { 294 if(this.options.displayed == 1) { 295 this.replaceBox(); 296 } 297 })); 298 299 this.refresh(); 300 301 }, 302 303 hook: function(enlace) { 304 enlace = $(enlace); 305 enlace.blur(); 306 this.show((enlace.attr("title") || enlace.attr("name") || ""), enlace.attr("href"), (enlace.attr('rel') || false)); 307 }, 308 309 close: function() { 310 this.animate(0); 311 }, 312 313 refresh: function() { 314 var self = this; 315 this.anchors = []; 316 317 $("a, area").each(function() { 318 if ($(this).attr('rel') && new RegExp("^"+self.options.find).test($(this).attr('rel'))){ 319 $(this).click(function(event) { 320 event.preventDefault(); 321 self.hook(this); 322 }); 323 324 if (!($(this).attr('id')==self.options.name+"-Left" || $(this).attr('id')==self.options.name+"-Right")) { 325 self.anchors.push(this); 326 } 327 } 328 }); 329 }, 330 331 animate: function(option) { 332 if(this.options.displayed == 0 && option != 0 || option == 1) 333 { 334 this.overlay.show(); 335 this.options.displayed = 1; 336 this.Wrapper.css({'display': 'block'}); 337 } 338 else //Cerrar el Lightbox 339 { 340 this.Wrapper.css({ 341 'display' : 'none', 342 'top' : -(this.options.BoxStyles['height']+280) 343 }).hide(); 344 345 this.overlay.hide(); 346 this.overlay.element.bind('hide', $.bind(this, function(){ 347 if (this.options.displayed) { 348 if (this.Image) this.Image.remove(); 349 this.options.displayed = 0; 350 } 351 })); 352 } 353 }, 354 355 /* 356 Function: replaceBox 357 @description Cambiar de tamaño y posicionar el lightbox en el centro de la pantalla 358 */ 359 replaceBox: function(data) { 360 var size = { x: $(window).width(), y: $(window).height() }; 361 var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() }; 362 var width = this.options.BoxStyles['width']; 363 var height = this.options.BoxStyles['height']; 364 365 if (this.options.displayed == 0) 366 { 367 var x = 0; 368 var y = 0; 369 370 // vertically center 371 y = scroll.x + ((size.x - width) / 2); 372 373 if (this.options.emergefrom == "bottom") 374 { 375 x = (scroll.y + size.y + 80); 376 } 377 else // top 378 { 379 x = (scroll.y - height) - 80; 380 } 381 382 this.Wrapper.css({ 383 'display' : 'none', 384 'top' : x, 385 'left' : y 386 }); 387 this.Contenedor.css({ 388 'width' : width 389 }); 390 this.Contenido.css({ 391 'height' : height - 80 392 }); 393 } 394 395 data = $.extend({}, { 396 'width' : this.lightbox.width, 397 'height' : this.lightbox.height, 398 'resize' : 0 399 }, data); 400 401 if (this.MoveBox) this.MoveBox.stop(); 402 403 this.MoveBox = this.Wrapper.animate({ 404 'left': (scroll.x + ((size.x - data.width) / 2)), 405 'top' : (scroll.y + (size.y - (data.height + (this.navigator ? 80 : 48))) / 2) 406 }, { 407 duration : this.options.moveDuration, 408 easing : this.options.moveEffect 409 }); 410 411 if (data.resize) { 412 if (this.ResizeBox2) this.ResizeBox2.stop(); 413 this.ResizeBox2 = this.Contenido.animate({ 414 height : data.height 415 }, { 416 duration : this.options.resizeDuration, 417 easing : this.options.resizeEffect 418 }); 419 420 if (this.ResizeBox) this.ResizeBox.stop(); 421 422 this.ResizeBox = this.Contenedor.animate({ 423 width : data.width 424 }, { 425 duration : this.options.resizeDuration, 426 easing : this.options.resizeEffect, 427 complete : function(){ 428 $(this).trigger('complete'); 429 } 430 }); 431 } 432 433 }, 434 435 getInfo: function (image, id) { 436 image=$(image); 437 IEuta = $('<a id="'+this.options.name+'-'+id+'" title="'+image.attr('title')+'" rel="'+image.attr('rel')+'"> </a>'); 438 IEuta.css({ 'background-image' : 'url('+this.options.dir+'/'+this.options.color+'/'+this.options.buttons+')' }); 439 IEuta.attr('href', image.attr('href')); //IE fix 440 return IEuta; 441 }, 442 443 display: function(url, title, force) { 444 return this.show(title, url, '', force); 445 }, 446 447 show: function(caption, url, rel, force) { 448 this.showLoading(); 449 450 var baseURL = url.match(/(.+)?/)[1] || url; 451 var imageURL = /\.(jpe?g|png|gif|bmp)/gi; 452 var queryString = url.match(/\?(.+)/); 453 if (queryString) queryString = queryString[1]; 454 var params = this.parseQuery( queryString ); 455 456 if (this.ResizeBox) this.ResizeBox.unbind('complete'); //fix for jQuery 457 458 params = $.extend({}, { 459 'width' : 0, 460 'height' : 0, 461 'modal' : 0, 462 /*'background': 'url(../../img/2012/pop-fondo.png) bottom repeat-x',*/ 463 'title' : caption 464 }, params || {}); 465 466 params['width'] = parseInt(params['width']);
467 params['height'] = parseInt(params['height']); 468 params['modal'] = parseInt(params['modal']); 469 470 this.overlay.options.hideOnClick = !params['modal']; 471 this.lightbox = $.extend({}, params, { 'width' : params['width'] + 14 }); 472 this.navigator = this.lightbox.title ? true : false; 473 474 if ( force=='image' || baseURL.match(imageURL) ) 475 { 476 this.img = new Image(); 477 this.img.onload = $.bind(this, function(){ 478 this.img.onload=function(){}; 479 if (!params['width']) 480 { 481 var objsize = this.calculate(this.img.width, this.img.height); 482 params['width'] = objsize.x; 483 params['height'] = objsize.y; 484 this.lightbox.width = params['width'] + 14; 485 } 486 487 this.lightbox.height = params['height'] - (this.navigator ? 21 : 35); 488 489 this.replaceBox({ 'resize' : 1 }); 490 491 // Mostrar la imagen, solo cuando la animacion de resizado se ha completado 492 this.ResizeBox.bind('complete', $.bind(this, function(){ 493 this.showImage(this.img.src, params); 494 })); 495 }); 496 497 this.img.onerror = $.bind(this, function() { 498 this.show('', this.options.dir+'/'+this.options.color+'/404.png', this.options.find); 499 }); 500 501 this.img.src = url; 502 503 } else { //code to show html pages 504 505 //this.lightbox.height = params['height']+($.browser.opera?2:0); 506 this.lightbox.height = params['height']; 507 this.replaceBox({'resize' : 1}); 508 509 if (url.indexOf('TB_inline') != -1) //INLINE ID 510 { 511 this.ResizeBox.bind('complete', $.bind(this, function(){ 512 this.showContent($('#'+params['inlineId']).html(), this.lightbox); 513 })); 514 } 515 else if(url.indexOf('TB_iframe') != -1) //IFRAME 516 { 517 var urlNoQuery = url.split('TB_'); 518 this.ResizeBox.bind('complete', $.bind(this, function(){ 519 this.showIframe(urlNoQuery[0], this.lightbox); 520 })); 521 } 522 else //AJAX 523 { 524 this.ResizeBox.bind('complete', $.bind(this, function(){ 525 $.ajax({ 526 url: url, 527 type: "GET", 528 cache: false, 529 error: $.bind(this, function(){this.show('', this.options.dir+'/'+this.options.color+'/404html.png', this.options.find)}), 530 success: $.bind(this, this.handlerFunc) 531 }); 532 })); 533 } 534 535 } 536 537 538 this.next = false; 539 this.prev = false; 540 //Si la imagen pertenece a un grupo 541 if (rel.length > this.options.find.length) 542 { 543 this.navigator = true; 544 var foundSelf = false; 545 var exit = false; 546 var self = this; 547 548 $.each(this.anchors, function(index){ 549 if ($(this).attr('rel') == rel && !exit) { 550 if ($(this).attr('href') == url) { 551 foundSelf = true; 552 } else { 553 if (foundSelf) { 554 self.next = self.getInfo(this, "Right"); 555 //stop searching 556 exit = true; 557 } else { 558 self.prev = self.getInfo(this, "Left"); 559 } 560 } 561 } 562 }); 563 } 564 565 this.addButtons(); 566 this.showNavBar(caption); 567 this.animate(1); 568 },// end function 569 570 calculate: function(x, y) { 571 // Resizing large images 572 var maxx = $(window).width() - 100; 573 var maxy = $(window).height() - 100; 574 575 if (x > maxx) 576 { 577 y = y * (maxx / x); 578 x = maxx; 579 if (y > maxy) 580 { 581 x = x * (maxy / y); 582 y = maxy; 583 } 584 } 585 else if (y > maxy) 586 { 587 x = x * (maxy / y); 588 y = maxy; 589 if (x > maxx) 590 { 591 y = y * (maxx / x); 592 x = maxx; 593 } 594 } 595 // End Resizing 596 return {x: parseInt(x), y: parseInt(y)}; 597 }, 598 599 handlerFunc: function(obj, html) { 600 this.showContent(html, this.lightbox); 601 }, 602 603 addButtons: function(){ 604 if(this.prev) this.prev.bind('click', $.bind(this, function(obj, event) {event.preventDefault();this.hook(this.prev);})); 605 if(this.next) this.next.bind('click', $.bind(this, function(obj, event) {event.preventDefault();this.hook(this.next);})); 606 }, 607 608 showNavBar: function() { 609 if (this.navigator) 610 { 611 this.bb.addClass("SLB-bbnav"); 612 this.Nav.empty(); 613 this.innerbb.empty(); 614 this.innerbb.append(this.Nav); 615 this.Descripcion.html(this.lightbox.title); 616 this.Nav.append(this.prev); 617 this.Nav.append(this.next); 618 this.Nav.append(this.Descripcion); 619 } 620 else 621 { 622 this.bb.removeClass("SLB-bbnav"); 623 this.innerbb.empty(); 624 } 625 }, 626 627 showImage: function(image, size) {
628 this.Background.empty().removeAttr('style').css({'width':'auto', 'height':'auto'}).append('<img id="'+this.options.name+'-Image"/>'); 629 this.Image = $('#'+this.options.name+'-Image'); 630 this.Image.attr('src', image).css({ 631 'width' : size['width'], 632 'height' : size['height'] 633 }); 634 635 this.Contenedor.css({ 636 //'background' : 'none' 637 }); 638 639 this.Contenido.empty().css({ 640 'background-color': 'transparent', 641 'padding' : '0px', 642 'width' : 'auto' 643 }); 644 }, 645 646 showContent: function(html, size) { 647 this.Background.empty().css({ 648 'width' : size['width']-0, 649 'height' : size['height']+35, 650 //'background-color' : size['background'] || '#000000' 651 /*'background-color' : '#ffffff'*/ 652 }); 653 654 this.Contenido.empty().css({ 655 'width' : size['width']-0, 656 'background-color' : size['background'] || '#000000' 657 }).append('<div id="'+this.options.name+'-Image"/>'); 658 659 this.Image = $('#'+this.options.name+'-Image'); 660 this.Image.css({ 661 'width' : size['width']-0, 662 'height' : size['height'], 663 'overflow' : 'auto', 664 /*'background' : size['height'] || '#000000'*/ 665 }).append(html); 666 667 this.Contenedor.css({ 668 //'background': 'none' 669 }); 670 }, 671 672 showIframe: function(src, size, bg) { 673 this.Background.empty().css({ 674 'width' : size['width']-0, 675 'height' : size['height']+35, 676 /*'background-color': size['background'] || '#000000'*/ 677 }); 678 679 var id = "if_"+new Date().getTime()+"-Image"; 680 681 this.Contenido.empty().css({ 682 'width' : size['width']-0, 683 /*'background-color' : size['background'] || '#000000',*/ 684 'padding' : '0px' 685 }).append('<iframe id="'+id+'" frameborder="0"></iframe>'); 686 687 this.Image = $('#'+id); 688 this.Image.css({ 689 'width' : size['width']-0, 690 'height' : size['height'], 691 /*'background' : size['background'] || '#ffffff'*/ 692 }).attr('src', src); 693 694 this.Contenedor.css({ 695 //'background' : 'none' 696 }); 697 }, 698 699 showLoading: function() { 700 this.Background.empty().removeAttr('style').css({'width':'auto', 'height':'auto'}); 701 this.Contenido.empty().css({ 702 //'background-color' : 'transparent', 703 'padding' : '0px', 704 'width' : 'auto' 705 }); 706 707 this.Contenedor.css({ 708 //'background' : 'url('+this.options.dir+'/'+this.options.color+'/loading.gif) no-repeat 50% 50%' 709 }); 710 711 this.Contenido.empty().css({ 712 //'background-color': 'transparent', 713 'padding' : '0px', 714 'width' : 'auto' 715 }); 716 717 this.replaceBox($.extend(this.options.BoxStyles, {'resize' : 1})); 718 }, 719 720 parseQuery: function (query) { 721 if( !query ) 722 return {}; 723 var params = {}; 724 725 var pairs = query.split(/[;&]/); 726 for ( var i = 0; i < pairs.length; i++ ) { 727 var pair = pairs[i].split('='); 728 if ( !pair || pair.length != 2 ) 729 continue; 730 params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' '); 731 } 732 return params; 733 }, 734 735 shake: function() { 736 var d=this.options.shake.distance; 737 var l=this.Wrapper.position(); 738 l=l.left; 739 for(x=0;x<this.options.shake.loops;x++) { 740 this.Wrapper.animate({left: l+d}, this.options.shake.duration, this.options.shake.transition) 741 .animate({left: l-d}, this.options.shake.duration, this.options.shake.transition); 742 } 743 this.Wrapper.animate({"left": l+d}, this.options.shake.duration, this.options.shake.transition) 744 .animate({"left": l}, this.options.shake.duration, this.options.shake.transition); 745 } 746 747 } 748})(jQuery);
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.