1/* 2 * SexyLightBox 2 by Eduardo D. Sada (http://www.coders.me) 3 * versión 2.0.1 4 * To be used with mootools 1.2 5 * 6 * Licensed under the MIT License: 7 * http://www.opensource.org/licenses/mit-license.php 8 */ 9 10var SexyLightBox = new Class({ 11 getOptions: { 12 name: 'TB', 13 zIndex: 65555, 14 onReturn: false, 15 onReturnFunction : $empty, 16 BoxStyles: { 17 'width': 486, 18 'height': 320 19 }, 20 OverlayStyles: { 21 'background-color': '#fff', 22 'opacity': 0.6 23 }, 24 25 Skin : { 26 'white' : { 27 hexcolor :'#FFFFFF', 28 captionColor:'#000000' 29 }, 30 'black' : { 31 hexcolor :'#000000', 32 captionColor:'#FFFFFF' 33 34 } 35 }, 36 color :'black', 37 find :'sexylightbox', 38 imagesdir :'/images', 39 background :'bgSexy.png', 40 backgroundIE:'bgSexy.gif', 41 closeButton : 'SexyClose.png', 42 showDuration: 200, 43 showEffect : Fx.Transitions.linear, 44 closeDuration: 200, 45 closeEffect : Fx.Transitions.linear, 46 moveDuration: 800, 47 moveEffect : Fx.Transitions.Back.easeInOut, 48 resizeDuration:800, 49 resizeEffect: Fx.Transitions.Back.easeInOut 50 }, 51 52 initialize: function(options){ 53 this.setOptions(this.getOptions, options); 54 55 if(Browser.Engine.trident4) 56 this.strBG = this.options.imagesdir+'/'+this.options.color+'/'+this.options.backgroundIE; 57 else 58 this.strBG = this.options.imagesdir+'/'+this.options.color+'/'+this.options.background; 59 60 this.options.display == 0; 61 62 /** 63 * Creamos los elementos 64 ************************/ 65 this.Overlay = new Element('div', { 66 'styles': { 67 'display': 'none', 68 'z-index': this.options.zIndex, 69 'position': 'absolute', 70 'top': '0', 71 'left': '0', 72 'background-color': this.options.OverlayStyles['background-color'], 73 'opacity': 0, 74 'height': window.getScrollHeight() + 'px', 75 'width': window.getScrollWidth() + 'px' 76 } 77 }); 78 79 this.Wraper = new Element('div', { 80 'class': 'SexyLightBox_cb', 81 'styles': { 82 'z-index': this.options.zIndex, 83 'display': 'none', 84 'position': 'absolute', 85 'top': -this.options.BoxStyles['height']+'px', 86 'left': (window.getScroll().x + (window.getSize().x - this.options.BoxStyles['width']) / 2).toInt()+'px' 87 } 88 }); 89 90 this.Clapclap = new Element('div', { 91 'styles': { 92 'position': 'absolute', 93 'left': '7px', 94 'top': '7px', 95 'float': 'left', 96 'overflow':'hidden', 97 'z-index': this.options.zIndex + 1 98 } 99 }).injectInside(this.Wraper); 100 101 this.Contenedor = new Element('div', { 102 'styles': { 103 'position': 'absolute', 104 'width': this.options.BoxStyles['width'] + 'px', 105 'z-index': this.options.zIndex + 2 106 } 107 }).injectInside(this.Wraper); 108 109 110 this.bt = new Element('div', {'class': 'bt','styles':{'background-image':'url('+this.strBG+')'}}).injectInside(this.Contenedor); 111 112 this.CloseButton = new Element('a', {'href':'#'}).injectInside(this.bt); 113 new Element('img', {'src': this.options.imagesdir+'/'+this.options.color+'/'+this.options.closeButton}).injectInside(this.CloseButton); 114 115 new Element('div',{'styles':{'background-image':'url('+this.strBG+')'}}).injectInside(this.bt); 116 117 this.Contenido = new Element('div', { 118 'class':'i1', 119 'styles':{ 120 'height': this.options.BoxStyles['height'] + 'px', 121 'border-left-color': this.options.Skin[this.options.color].hexcolor, 122 'border-right-color': this.options.Skin[this.options.color].hexcolor 123 } 124 }).injectInside(this.Contenedor); 125 126 this.bb = new Element('div', {'class':'bb','styles':{'background-image':'url('+this.strBG+')'}}).injectInside(this.Contenedor); 127 this.innerbb = new Element('div', {'class':'innerbb','styles':{'background-image':'url('+this.strBG+')'}}).injectInside(this.bb); 128 this.Nav = new Element('div', {'class':'nav','styles':{'color':this.options.Skin[this.options.color].captionColor}}); 129 this.Descripcion = new Element('strong',{'styles':{'color':this.options.Skin[this.options.color].captionColor}}); 130 131 this.Overlay.injectInside(document.body); 132 this.Wraper.injectInside(document.body); 133 134 /** 135 * AGREGAMOS LOS EVENTOS 136 ************************/ 137 138 this.CloseButton.addEvent('click', function(event) { 139 event.stop(); 140 this.display(0); 141 }.bind(this)); 142 143 window.addEvent('resize', function() { 144 if(this.options.display == 1) { 145 this.replaceBox(); 146 } else { 147 this.Overlay.set('styles', { 148 'height': '0px', 149 'width': '0px' 150 }); 151 } 152 }.bind(this)); 153 154 window.addEvent('scroll', function() { 155 if(this.options.display == 1) { 156 this.replaceBox(); 157 } 158 }.bind(this)); 159 160 this.Overlay.addEvent('click', function() { 161 this.display(0); 162 }.bind(this)); 163 164 this.anchors = []; 165 166 var imageURL = /\.(jpe?g|png|gif|bmp)/gi; 167 168 $$("a", "area").each(function(el) { 169 if (el.getProperty('rel') && el.getProperty('rel').test("^"+this.options.find)){ 170 el.addEvent('click', function(event) { 171 event.stop(); 172 this.hook(el); 173 }.bind(this)); 174 this.anchors.push(el); 175 } 176 }.bind(this)); 177 178 this.MoveBox = $empty(); 179 180 }, 181 182 /* 183 Function: hook 184 Recuperar los parametros del enlace, y enviarselos a la funcion show 185 186 Argument: 187 enlace - object, la referencia a un elemento link. 188 */ 189 hook: function(enlace) { 190 enlace.blur(); 191 this.show((enlace.title || enlace.name || ""), enlace.href, (enlace.getProperty('rel') || false)); 192 }, 193 194 195 196 197 /* 198 Property: display 199 Show or close box 200 201 Argument: 202 option - integer, 1 to Show box and 0 to close box (with a transition). 203 */ 204 display: function(option) { 205 // Detener la transicion por las dudas 206 if(this.Transition) 207 this.Transition.cancel(); 208 209 // Mostrar lo sexy que es LightBox 210 if(this.options.display == 0 && option != 0 || option == 1) { 211 212 if(Browser.Engine.trident4) 213 $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); 214 215 this.Overlay.setStyle('display', 'block'); 216 this.options.display = 1; 217 this.fireEvent('onShowStart', [this.Overlay]); 218 219 this.Transition = new Fx.Tween(this.Overlay, 220 { 221 property: 'opacity', 222 duration: this.options.showDuration, 223 transition: this.options.showEffect, 224 onComplete: function() { 225 226 sizes = window.getSize(); 227 scrollito = window.getScroll(); 228 this.Wraper.setStyles({ 229 'display': 'block', 230 'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt() 231 }); 232 233 this.fireEvent('onShowComplete', [this.Overlay]); 234 235 }.bind(this) 236 } 237 ).start(this.options.OverlayStyles['opacity']);
238 239 } 240 // Cerrar el Lightbox 241 else 242 { 243 if(Browser.Engine.trident4) 244 $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); 245 246 this.Wraper.setStyles({ 247 'display': 'none', 248 'top': 0 249 }); 250 this.options.display = 0; 251 252 this.fireEvent('onCloseStart', [this.Overlay]); 253 254 this.Transition = new Fx.Tween(this.Overlay, 255 { 256 property: 'opacity', 257 duration: this.options.closeDuration, 258 transition: this.options.closeEffect, 259 onComplete: function() { 260 this.fireEvent('onCloseComplete', [this.Overlay]); 261 }.bind(this) 262 } 263 ).start(0); 264 265 } 266 267 }, 268 269 270 /* 271 Property: replaceBox 272 Cambiar de tamaño y posicionar el lightbox en el centro de la pantalla 273 */ 274 replaceBox: function(data) { 275 sizes = window.getSize(); 276 scrollito = window.getScroll(); 277 278 data = $extend({ 279 'width' : this.ajustarWidth, 280 'height' : this.ajustarHeight, 281 'resize' : 0 282 }, data || {}); 283 284 if(this.MoveBox) 285 this.MoveBox.cancel(); 286 287 this.MoveBox = new Fx.Morph(this.Wraper, { 288 duration: this.options.moveDuration, 289 transition: this.options.moveEffect 290 }).start({ 291 'left': (scrollito.x + (sizes.x - data.width) / 2).toInt(), 292 'top': (scrollito.y + (sizes.y - data.height) / 2).toInt()-40 293 }); 294 295 296 if (data.resize) { 297 if(this.ResizeBox2) 298 this.ResizeBox2.cancel(); 299 this.ResizeBox2 = new Fx.Morph(this.Contenido, { 300 duration: this.options.resizeDuration, 301 transition: this.options.resizeEffect 302 }).start({ 303 'height': data.height+ 'px' 304 }); 305 306 if(this.ResizeBox) 307 this.ResizeBox.cancel(); 308 309 this.ResizeBox = new Fx.Morph(this.Contenedor, { 310 duration: this.options.resizeDuration, 311 transition: this.options.resizeEffect 312 }).start({ 313 'width': data.width + 'px' 314 }); 315 } 316 317 this.Overlay.set('styles', { 318 'height': window.getScrollHeight() + 'px', 319 'width': window.getScrollWidth() + 'px' 320 }); 321 322 }, 323 324 /* 325 Function: getInfo 326 Devolver los botones de navegacion 327 */ 328 getInfo: function (image, id) { 329 return new Element('a', { 330 'id' : this.options.name+id, 331 'title' : image.title, 332 'href' : image.href, 333 'rel' : image.getProperty('rel') 334 }).adopt(new Element('img', { 335 'src' : this.options.imagesdir+'/'+this.options.color+'/SexyBt'+id+'.png', 336 'class' : 'bt'+id 337 })); 338 }, 339 340 /* 341 Function: show 342 Verificar que el enlace apunte hacia una imagen, y preparar el lightbox. 343 */ 344 show: function(caption, url, rel) { 345 this.MostrarNav = false; 346 this.showLoading(); 347 348 349 // check if a query string is involved 350 var baseURL = url.match(/(.+)?/)[1] || url; 351 352 // regex to check if a href refers to an image 353 var imageURL = /\.(jpe?g|png|gif|bmp)/gi; 354 355 // check for images 356 if ( baseURL.match(imageURL) ) { 357 358 359 // Si la imagen pertenece a un grupo 360 if (rel.length > this.options.find.length) 361 { 362 this.MostrarNav = true; //Mostrar barra de navegacion 363 364 var foundSelf = false; 365 var exit = false; 366 367 this.anchors.each(function(image){ 368 369 370 if (image.getProperty('rel') == rel && !exit) { 371 if (image.href == url) { 372 foundSelf = true; 373 } else { 374 if (foundSelf) { 375 this.next = this.getInfo(image, "Right"); 376 // stop searching 377 exit = true; 378 } 379 else { 380 this.prev = this.getInfo(image, "Left"); 381 } 382 } 383 } 384 }.bind(this)); 385 386 } 387 388 /** 389 * Cargar Imagen. 390 *****************/ 391 this.imgPreloader = new Image(); 392 this.imgPreloader.onload = function() { 393 this.imgPreloader.onload=function(){}; 394 395 // Resizing large images 396 var x = window.getWidth() - 80; 397 var y = window.getHeight() - 80; 398 var imageWidth = this.imgPreloader.width; 399 var imageHeight = this.imgPreloader.height; 400 401 if (imageWidth > x) 402 { 403 imageHeight = imageHeight * (x / imageWidth);
404 imageWidth = x; 405 if (imageHeight > y) 406 { 407 imageWidth = imageWidth * (y / imageHeight); 408 imageHeight = y; 409 } 410 } 411 else if (imageHeight > y) 412 { 413 imageWidth = imageWidth * (y / imageHeight); 414 imageHeight = y; 415 if (imageWidth > x) 416 { 417 imageHeight = imageHeight * (x / imageWidth); 418 imageWidth = x; 419 } 420 } 421 // End Resizing 422 423 424 425 // Ajustar el tamaño del lightbox 426 if (this.MostrarNav || caption){ 427 this.ajustarHeight = (imageHeight-21); 428 }else{ 429 this.ajustarHeight = (imageHeight-34); 430 }; 431 432 this.ajustarWidth = (imageWidth+14); 433 434 this.replaceBox({ 435 'width' :this.ajustarWidth, 436 'height' :this.ajustarHeight, 437 'resize' : 1 438 }); 439 440 // Mostrar la imagen, solo cuando la animacion de resizado se ha completado 441 this.ResizeBox.addEvent('onComplete', function() { 442 this.showImage(this.imgPreloader.src, {'width':imageWidth, 'height': imageHeight}); 443 }.bind(this)); 444 this.addButtons(); 445 }.bind(this); 446 447 this.imgPreloader.onerror = function() { 448 449 if (this.MostrarNav || caption){ 450 this.ajustarHeight = (this.options.BoxStyles['height']-21); 451 }else{ 452 this.ajustarHeight = (this.options.BoxStyles['height']-34); 453 }; 454 455 this.ajustarWidth = (this.options.BoxStyles['width']+14); 456 457 this.replaceBox({ 458 'width' :this.ajustarWidth, 459 'height' :this.ajustarHeight, 460 'resize' : 1 461 }); 462 463 // Mostrar la imagen, solo cuando la animacion de resizado se ha completado 464 this.ResizeBox.addEvent('onComplete', function() { 465 this.showImage(this.options.imagesdir+'/'+this.options.color+'/404.png', this.options.BoxStyles); 466 }.bind(this)); 467 468 this.addButtons(); 469 }.bind(this); 470 471 this.imgPreloader.src = url; 472 473 } else { //code to show html pages 474 475 var queryString = url.match(/\?(.+)/)[1]; 476 var params = this.parseQuery( queryString ); 477 478 // Ajustar el tamaño del lightbox 479 if (this.MostrarNav || caption){ 480 this.ajustarHeight = (params['height'].toInt()-21); 481 }else{ 482 this.ajustarHeight = (params['height'].toInt()-34); 483 }; 484 485 this.ajustarWidth = (params['width'].toInt()+14); 486 487 this.replaceBox({ 488 'width' :this.ajustarWidth, 489 'height' :this.ajustarHeight, 490 'resize' : 1 491 }); 492 493 if (url.indexOf('TB_inline') != -1) { 494 // Mostrar la imagen, solo cuando la animacion de resizado se ha completado 495 this.ResizeBox.addEvent('onComplete', function() { 496 this.showContent($(params['inlineId']).get('html'), {'width':this.ajustarWidth, 'height': this.ajustarHeight+34}); 497 }.bind(this)); 498 499 } else if(url.indexOf('TB_iframe') != -1) { 500 var urlNoQuery = url.split('TB_'); 501 // Mostrar la imagen, solo cuando la animacion de resizado se ha completado 502 this.ResizeBox.addEvent('onComplete', function() { 503 this.showIframe(urlNoQuery[0], {'width':this.ajustarWidth, 'height': this.ajustarHeight+34}); 504 }.bind(this)); 505 506 } else { 507 this.ResizeBox.addEvent('onComplete', function() { 508 var myRequest = new Request.HTML({ 509 url: url, 510 method: 'get', 511 onSuccess: this.handlerFunc.bind(this) 512 }).send(); 513 514 }.bind(this)); 515 516 } 517 518 519 } 520 521 522 this.showNav(caption); 523 524 this.display(1); 525 }, 526 527 handlerFunc: function(tree, elements, html) { 528 this.showContent(html, {'width':this.ajustarWidth, 'height': this.ajustarHeight+34}); 529 }, 530 531 addButtons: function(){ 532 if(this.prev) this.prev.addEvent('click', function(event) {event.stop();this.hook(this.prev);}.bind(this)); 533 if(this.next) this.next.addEvent('click', function(event) {event.stop();this.hook(this.next);}.bind(this)); 534 }, 535 536 /** 537 * Mostrar navegacion. 538 *****************/ 539 showNav: function(caption) { 540 if (this.MostrarNav || caption) { 541 this.bb.addClass("bbnav"); 542 this.Nav.empty(); 543 this.Nav.injectInside(this.innerbb); 544 this.Descripcion.set('html', caption); 545 this.Nav.adopt(this.prev); 546 this.Nav.adopt(this.next); 547 this.Descripcion.injectInside(this.Nav); 548 } 549 else 550 { 551 this.bb.removeClass("bbnav"); 552 this.innerbb.empty(); 553 } 554 }, 555 556 showImage: function(image, size) { 557 this.Image = new Element('img', { 'src' : image, 'styles': { 558 width: size['width'], 559 height: size['height'] 560 }}).injectInside(this.Clapclap.empty().erase('styles').set('styles', {width:'auto', height:'auto', overflow: 'visible'})); 561 562 this.Contenedor.setStyles({ 563 'background' : 'none' 564 });
565 566 this.Contenido.empty().set('styles', { 567 'background-color': 'transparent', 568 padding: '0px', 569 overflow: 'visible', 570 width: 'auto' 571 }); 572 }, 573 574 showContent: function(html, size) { 575 this.Clapclap.set('styles', { 576 width: size['width']-14, 577 height: size['height'], 578 'background-color': '#ffffff' 579 }); 580 581 this.Image = new Element('div', { 'styles': { 582 width: size['width']-14-40, 583 height: size['height']-34, 584 background: '#ffffff' 585 }}).set('html',html).injectInside(this.Contenido.empty().set('styles', { 586 'background-color': '#ffffff', 587 padding: '0 20px', 588 overflow: 'auto', 589 width: size['width']-14-40 590 })); 591 this.Contenedor.setStyles({ 592 'background' : 'none' 593 }); 594 }, 595 596 showIframe: function(src, size) { 597 this.Clapclap.set('styles', { 598 width: size['width']-14, 599 height: size['height'], 600 'background-color': '#ffffff' 601 }); 602 603 this.Image = new Element('iframe', { 604 frameborder: 0, 605 'styles': { 606 width: size['width']-14, 607 height: size['height']-34, 608 background: '#ffffff' 609 }}).set('src',src).injectInside(this.Contenido.empty().set('styles', { 610 'background-color': '#ffffff', 611 padding: '0px', 612 overflow: 'visible', 613 width: size['width']-14 614 })); 615 this.Contenedor.setStyles({ 616 'background' : 'none' 617 }); 618 }, 619 620 showLoading: function() { 621 this.Clapclap.empty().erase('styles').set('styles', {width:'auto', height:'auto'}); 622 623 this.Contenido.empty().set('styles', { 624 'background-color': 'transparent', 625 padding: '0px', 626 overflow: 'visible', 627 width: 'auto' 628 }); 629 630 this.Contenedor.setStyles({ 631 'background' : 'url('+this.options.imagesdir+'/'+this.options.color+'/loading.gif) no-repeat 50% 50%' 632 }); 633 634 this.replaceBox({ 635 'width' : this.options.BoxStyles['width'], 636 'height' : this.options.BoxStyles['height'], 637 'resize' : 1 638 }); 639 }, 640 641 parseQuery: function (query) { 642 if( !query ) 643 return {}; 644 var params = {}; 645 646 var pairs = query.split(/[;&]/); 647 for ( var i = 0; i < pairs.length; i++ ) { 648 var pair = pairs[i].split('='); 649 if ( !pair || pair.length != 2 ) 650 continue; 651 params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' '); 652 } 653 return params; 654 } 655 656 657}); 658 659SexyLightBox.implement(new Events, new Options);
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.