Changeset 9976 for extensions/lightbox/js/jquery.colorbox.js
- Timestamp:
- Apr 2, 2011, 11:53:02 AM (13 years ago)
- File:
-
- 1 edited
-
extensions/lightbox/js/jquery.colorbox.js (modified) (26 diffs)
Legend:
- Unmodified
- Added
- Removed
-
extensions/lightbox/js/jquery.colorbox.js
r7949 r9976 1 // ColorBox v1.3.1 4- a full featured, light-weight, customizable lightbox based on jQuery 1.3+2 // Copyright (c) 201 0Jack Moore - jack@colorpowered.com1 // ColorBox v1.3.16 - a full featured, light-weight, customizable lightbox based on jQuery 1.3+ 2 // Copyright (c) 2011 Jack Moore - jack@colorpowered.com 3 3 // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4 (function ($, window) { 5 4 (function ($, document, window) { 6 5 var 7 6 // ColorBox Default Settings. … … 23 22 html: false, 24 23 iframe: false, 24 fastIframe: true, 25 25 photo: false, 26 26 href: false, … … 62 62 event_closed = prefix + '_closed', 63 63 event_purge = prefix + '_purge', 64 event_loaded = prefix + '_loaded',65 64 66 65 // Special Handling for IE … … 89 88 $prev, 90 89 $close, 90 $groupControls, 91 91 92 92 // Variables for cached values or use across multiple functions 93 settings = {}, 93 94 interfaceHeight, 94 95 interfaceWidth, … … 97 98 element, 98 99 index, 99 settings,100 photo, 100 101 open, 101 102 active, … … 110 111 111 112 // jQuery object generator to reduce code size 112 function $div(id, css) { 113 id = id ? ' id="' + prefix + id + '"' : ''; 114 css = css ? ' style="' + css + '"' : ''; 115 return $('<div' + id + css + '/>'); 113 function $div(id, cssText) { 114 var div = document.createElement('div'); 115 if (id) { 116 div.id = prefix + id; 117 } 118 div.style.cssText = cssText || false; 119 return $(div); 116 120 } 117 121 … … 136 140 } 137 141 settings.rel = settings.rel || element.rel || 'nofollow'; 138 settings.href = settings.href || $(element).attr('href');142 settings.href = $.trim(settings.href || $(element).attr('href')); 139 143 settings.title = settings.title || element.title; 140 return settings;141 144 } 142 145 … … 198 201 element = elem; 199 202 200 settings = process($.extend({}, $.data(element, colorbox)));203 process($.extend(settings, $.data(element, colorbox))); 201 204 202 205 $related = $(element); … … 249 252 $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () { 250 253 $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); 251 }).trigger(' scroll.' + event_ie6);254 }).trigger('resize.' + event_ie6); 252 255 } 253 256 254 257 trigger(event_open, settings.onOpen); 255 258 256 $ current.add($prev).add($next).add($slideshow).add($title).hide();259 $groupControls.add($title).hide(); 257 260 258 261 $close.html(settings.close).show(); … … 311 314 // Create & Append jQuery Objects 312 315 $window = $(window); 313 $box = $div().attr({id: colorbox, 'class': isIE ? prefix + 'IE': ''});316 $box = $div().attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}); 314 317 $overlay = $div("Overlay", isIE6 ? 'position:absolute' : '').hide(); 315 318 … … 363 366 $box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide(); 364 367 365 // Setup button events. 366 $next.click(publicMethod.next); 367 $prev.click(publicMethod.prev); 368 $close.click(publicMethod.close); 368 // Setup button events. 369 $next.click(function () { 370 publicMethod.next(); 371 }); 372 $prev.click(function () { 373 publicMethod.prev(); 374 }); 375 $close.click(function () { 376 publicMethod.close(); 377 }); 378 379 $groupControls = $next.add($prev).add($current).add($slideshow); 369 380 370 381 // Adding the 'hover' class allowed the browser to load the hover-state … … 387 398 388 399 // Set Navigation Key Bindings 389 $(document).bind("keydown", function (e) { 390 if (open && settings.escKey && e.keyCode === 27) { 400 $(document).bind('keydown.' + prefix, function (e) { 401 var key = e.keyCode; 402 if (open && settings.escKey && key === 27) { 391 403 e.preventDefault(); 392 404 publicMethod.close(); 393 405 } 394 if (open && settings.arrowKey && !active &&$related[1]) {395 if ( e.keyCode === 37 && (index || settings.loop)) {406 if (open && settings.arrowKey && $related[1]) { 407 if (key === 37) { 396 408 e.preventDefault(); 397 409 $prev.click(); 398 } else if ( e.keyCode === 39 && (index < $related.length - 1 || settings.loop)) {410 } else if (key === 39) { 399 411 e.preventDefault(); 400 412 $next.click(); … … 485 497 } 486 498 487 var photo, 488 speed = settings.transition === "none" ? 0 : settings.speed; 499 var speed = settings.transition === "none" ? 0 : settings.speed; 489 500 490 501 $window.unbind('resize.' + prefix); … … 512 523 513 524 // floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width. 514 $('#' + prefix + 'Photo').css({cssFloat: 'none', marginLeft: 'auto', marginRight: 'auto'}); 515 525 //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'}); 526 527 $(photo).css({'float': 'none'}); 528 516 529 // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay. 517 530 if (isIE6) { … … 522 535 }); 523 536 } 524 537 525 538 function setPosition(s) { 526 var prev, prevSrc, next, nextSrc, total = $related.length, loop = settings.loop;527 539 publicMethod.position(s, function () { 528 function defilter() { 529 if (isIE) { 530 //IE adds a filter when ColorBox fades in and out that can cause problems if the loaded content contains transparent pngs. 531 $box[0].style.filter = false; 532 } 533 } 540 var prev, prevSrc, next, nextSrc, total = $related.length, iframe, complete; 534 541 535 542 if (!open) { 536 543 return; 537 544 } 545 546 complete = function () { 547 $loadingOverlay.hide(); 548 trigger(event_complete, settings.onComplete); 549 }; 538 550 539 551 if (isIE) { … … 544 556 } 545 557 546 $loaded.show(); 547 548 trigger(event_loaded); 549 550 $title.show().html(settings.title); 558 $title.html(settings.title).add($loaded).show(); 551 559 552 560 if (total > 1) { // handle grouping … … 555 563 } 556 564 557 $next[( loop || index < total - 1) ? "show" : "hide"]().html(settings.next);558 $prev[( loop || index) ? "show" : "hide"]().html(settings.previous);565 $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next); 566 $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous); 559 567 560 568 prev = index ? $related[index - 1] : $related[total - 1]; … … 581 589 } 582 590 } 583 } 584 585 $loadingOverlay.hide(); 591 } else { 592 $groupControls.hide(); 593 } 594 595 if (settings.iframe) { 596 iframe = $('<iframe/>').addClass(prefix + 'Iframe')[0]; 597 598 if (settings.fastIframe) { 599 complete(); 600 } else { 601 $(iframe).load(complete); 602 } 603 iframe.name = prefix + (+new Date()); 604 iframe.src = settings.href; 605 606 if (!settings.scrolling) { 607 iframe.scrolling = "no"; 608 } 609 610 if (isIE) { 611 iframe.frameBorder=0; 612 iframe.allowTransparency = "true"; 613 } 614 615 $(iframe).appendTo($loaded).one(event_purge, function () { 616 iframe.src = "//about:blank"; 617 }); 618 } else { 619 complete(); 620 } 586 621 587 622 if (settings.transition === 'fade') { 588 623 $box.fadeTo(speed, 1, function () { 589 defilter();624 $box[0].style.filter = ""; 590 625 }); 591 626 } else { 592 defilter();627 $box[0].style.filter = ""; 593 628 } 594 629 … … 596 631 publicMethod.position(0); 597 632 }); 598 599 trigger(event_complete, settings.onComplete);600 633 }); 601 634 } … … 611 644 612 645 publicMethod.load = function (launched) { 613 var href, img,setResize, prep = publicMethod.prep;646 var href, setResize, prep = publicMethod.prep; 614 647 615 648 active = true; 649 650 photo = false; 651 616 652 element = $related[index]; 617 653 618 654 if (!launched) { 619 settings = process($.extend({}, $.data(element, colorbox)));655 process($.extend(settings, $.data(element, colorbox))); 620 656 } 621 657 … … 661 697 // IFrame element won't be added to the DOM until it is ready to be displayed, 662 698 // to avoid problems with DOM-ready JS that might be trying to run in that iframe. 663 $box.one(event_loaded, function () {664 var $iframe = $("<iframe name='" + new Date().getTime() + "' frameborder=0" + (settings.scrolling ? "" : " scrolling='no'") + (isIE ? " allowtransparency='true'" : '') + " style='width:100%; height:100%; border:0; display:block;'/>");665 $iframe[0].src = settings.href;666 $iframe.appendTo($loaded).one(event_purge, function () {667 $iframe[0].src = '//about:blank';668 });669 });670 671 699 prep(" "); 672 700 } else if (settings.html) { 673 701 prep(settings.html); 674 702 } else if (isImage(href)) { 675 img = new Image(); 676 img.onload = function () { 703 $(photo = new Image()) 704 .addClass(prefix + 'Photo') 705 .error(function () { 706 settings.title = false; 707 prep($div('Error').text('This image could not be loaded')); 708 }) 709 .load(function () { 677 710 var percent; 678 img.onload = null; 679 img.id = prefix + 'Photo'; 680 $(img).css({border: 'none', display: 'block', cssFloat: 'left'}); 711 photo.onload = null; //stops animated gifs from firing the onload repeatedly. 712 681 713 if (settings.scalePhotos) { 682 714 setResize = function () { 683 img.height -= img.height * percent;684 img.width -= img.width * percent;715 photo.height -= photo.height * percent; 716 photo.width -= photo.width * percent; 685 717 }; 686 if (settings.mw && img.width > settings.mw) {687 percent = ( img.width - settings.mw) / img.width;718 if (settings.mw && photo.width > settings.mw) { 719 percent = (photo.width - settings.mw) / photo.width; 688 720 setResize(); 689 721 } 690 if (settings.mh && img.height > settings.mh) {691 percent = ( img.height - settings.mh) / img.height;722 if (settings.mh && photo.height > settings.mh) { 723 percent = (photo.height - settings.mh) / photo.height; 692 724 setResize(); 693 725 } … … 695 727 696 728 if (settings.h) { 697 img.style.marginTop = Math.max(settings.h - img.height, 0) / 2 + 'px';729 photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px'; 698 730 } 699 731 700 732 if ($related[1] && (index < $related.length - 1 || settings.loop)) { 701 $(img).css({cursor: 'pointer'}).click(publicMethod.next); 733 photo.style.cursor = 'pointer'; 734 photo.onclick = function () { 735 publicMethod.next(); 736 }; 702 737 } 703 738 704 739 if (isIE) { 705 img.style.msInterpolationMode = 'bicubic';706 } 707 708 setTimeout(function () { // Chrome will sometimes report a 0 by 0 size if there isn't pause in execution709 prep( img);740 photo.style.msInterpolationMode = 'bicubic'; 741 } 742 743 setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise. 744 prep(photo); 710 745 }, 1); 711 } ;712 713 setTimeout(function () { // Opera 10.6+ will sometimes load the src before the onload function is set714 img.src = href;715 }, 1); 746 }); 747 748 setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise. 749 photo.src = href; 750 }, 1); 716 751 } else if (href) { 717 752 $loadingBay.load(href, function (data, status, xhr) { 718 prep(status === 'error' ? 'Request unsuccessful: ' + xhr.statusText : $(this).children());753 prep(status === 'error' ? $div('Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents()); 719 754 }); 720 755 } 721 756 }; 722 757 723 758 // Navigates to the next page/image in a set. 724 759 publicMethod.next = function () { 725 if (!active ) {760 if (!active && $related[1] && (index < $related.length - 1 || settings.loop)) { 726 761 index = index < $related.length - 1 ? index + 1 : 0; 727 762 publicMethod.load(); … … 730 765 731 766 publicMethod.prev = function () { 732 if (!active ) {767 if (!active && $related[1] && (index || settings.loop)) { 733 768 index = index ? index - 1 : $related.length - 1; 734 769 publicMethod.load(); … … 739 774 publicMethod.close = function () { 740 775 if (open && !closing) { 776 741 777 closing = true; 742 778 … … 747 783 $window.unbind('.' + prefix + ' .' + event_ie6); 748 784 749 $overlay.fadeTo('fast', 0); 750 751 $box.stop().fadeTo('fast', 0, function () { 785 $overlay.fadeTo(200, 0); 786 787 $box.stop().fadeTo(300, 0, function () { 788 789 $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide(); 752 790 753 791 trigger(event_purge); 754 792 755 793 $loaded.remove(); 756 757 $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();758 794 759 795 setTimeout(function () { … … 776 812 $(publicMethod.init); 777 813 778 }(jQuery, this));814 }(jQuery, document, this));
Note: See TracChangeset
for help on using the changeset viewer.
