2 jQuery ColorBox v1.3.32 - 2013-01-31
3 (c) 2013 Jack Moore - jacklmoore.com/colorbox
4 license: http://www.opensource.org/licenses/mit-license.php
6 (function ($, document, window) {
8 // Default settings object.
9 // See http://jacklmoore.com/colorbox for details.
11 transition: "elastic",
35 current: "image {current} of {total}",
39 xhrError: "This content failed to load.",
40 imgError: "This image failed to load.",
49 slideshowStart: "start slideshow",
50 slideshowStop: "stop slideshow",
67 // Abstracting the HTML and event identifiers for easy rebranding
68 colorbox = 'colorbox',
70 boxElement = prefix + 'Element',
73 event_open = prefix + '_open',
74 event_load = prefix + '_load',
75 event_complete = prefix + '_complete',
76 event_cleanup = prefix + '_cleanup',
77 event_closed = prefix + '_closed',
78 event_purge = prefix + '_purge',
80 // Special Handling for IE
81 isIE = !$.support.leadingWhitespace, // IE6 to IE8
82 isIE6 = isIE && !window.XMLHttpRequest, // IE6
83 event_ie6 = prefix + '_IE6',
85 // Cached jQuery Object Variables
108 // Variables for cached values or use across multiple functions
130 // Convience function for creating new jQuery objects
131 function $tag(tag, id, css) {
132 var element = document.createElement(tag);
135 element.id = prefix + id;
139 element.style.cssText = css;
145 // Determine the next and previous members in a group.
146 function getIndex(increment) {
148 max = $related.length,
149 newIndex = (index + increment) % max;
151 return (newIndex < 0) ? max + newIndex : newIndex;
154 // Convert '%' and 'px' values to integers
155 function setSize(size, dimension) {
156 return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : $window.height()) / 100) : 1) * parseInt(size, 10));
159 // Checks an href to see if it is a photo.
160 // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
161 function isImage(url) {
162 return settings.photo || /\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(url);
165 // Assigns function results to their respective properties
166 function makeSettings() {
168 data = $.data(element, colorbox);
171 settings = $.extend({}, defaults);
172 if (console && console.log) {
173 console.log('Error: cboxElement missing settings object');
176 settings = $.extend({}, data);
179 for (i in settings) {
180 if ($.isFunction(settings[i]) && i.slice(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
181 settings[i] = settings[i].call(element);
185 settings.rel = settings.rel || element.rel || $(element).data('rel') || 'nofollow';
186 settings.href = settings.href || $(element).attr('href');
187 settings.title = settings.title || element.title;
189 if (typeof settings.href === "string") {
190 settings.href = $.trim(settings.href);
194 function trigger(event, callback) {
196 $(document).trigger(event);
199 $events.trigger(event);
201 if ($.isFunction(callback)) {
202 callback.call(element);
206 // Slideshow functionality
207 function slideshow() {
210 className = prefix + "Slideshow_",
211 click = "click." + prefix,
217 if (settings.slideshow && $related[1]) {
218 clear = function () {
219 clearTimeout(timeOut);
223 if (settings.loop || $related[index + 1]) {
224 timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
228 start = function () {
230 .html(settings.slideshowStop)
235 .bind(event_complete, set)
236 .bind(event_load, clear)
237 .bind(event_cleanup, stop);
239 $box.removeClass(className + "off").addClass(className + "on");
246 .unbind(event_complete, set)
247 .unbind(event_load, clear)
248 .unbind(event_cleanup, stop);
251 .html(settings.slideshowStart)
253 .one(click, function () {
258 $box.removeClass(className + "on").addClass(className + "off");
261 if (settings.slideshowAuto) {
267 $box.removeClass(className + "off " + className + "on");
271 function launch(target) {
278 $related = $(element);
282 if (settings.rel !== 'nofollow') {
283 $related = $('.' + boxElement).filter(function () {
284 var data = $.data(this, colorbox),
288 relRelated = $(this).data('rel') || data.rel || this.rel;
291 return (relRelated === settings.rel);
293 index = $related.index(element);
295 // Check direct calls to ColorBox.
297 $related = $related.add(element);
298 index = $related.length - 1;
303 open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
305 // Show colorbox so the sizes can be calculated in older versions of jQuery
306 $box.css({visibility:'hidden', display:'block'});
308 $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden').appendTo($content);
310 // Cache values needed for size calculations
311 interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
312 interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
313 loadedHeight = $loaded.outerHeight(true);
314 loadedWidth = $loaded.outerWidth(true);
316 if (settings.returnFocus) {
318 $events.one(event_closed, function () {
324 opacity: parseFloat(settings.opacity),
325 cursor: settings.overlayClose ? "pointer" : "auto",
326 visibility: 'visible'
329 // Opens inital empty ColorBox prior to content being loaded.
330 settings.w = setSize(settings.initialWidth, 'x');
331 settings.h = setSize(settings.initialHeight, 'y');
332 publicMethod.position();
335 $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () {
336 $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
337 }).trigger('resize.' + event_ie6);
342 trigger(event_open, settings.onOpen);
344 $groupControls.add($title).hide();
346 $close.html(settings.close).show();
349 publicMethod.load(true);
353 // ColorBox's markup needs to be added to the DOM prior to being called
354 // so that the browser will go ahead and load the CSS background images.
355 function appendHTML() {
356 if (!$box && document.body) {
360 $box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
361 $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
362 $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic"));
363 $wrap = $tag(div, "Wrapper");
364 $content = $tag(div, "Content").append(
365 $title = $tag(div, "Title"),
366 $current = $tag(div, "Current"),
367 $next = $tag(div, "Next"),
368 $prev = $tag(div, "Previous"),
369 $slideshow = $tag(div, "Slideshow"),
370 $close = $tag(div, "Close")
373 $wrap.append( // The 3x3 Grid that makes up ColorBox
375 $tag(div, "TopLeft"),
376 $topBorder = $tag(div, "TopCenter"),
377 $tag(div, "TopRight")
379 $tag(div, false, 'clear:left').append(
380 $leftBorder = $tag(div, "MiddleLeft"),
382 $rightBorder = $tag(div, "MiddleRight")
384 $tag(div, false, 'clear:left').append(
385 $tag(div, "BottomLeft"),
386 $bottomBorder = $tag(div, "BottomCenter"),
387 $tag(div, "BottomRight")
389 ).find('div div').css({'float': 'left'});
391 $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
393 $groupControls = $next.add($prev).add($current).add($slideshow);
395 $(document.body).append($overlay, $box.append($wrap, $loadingBay));
399 // Add ColorBox's event bindings
400 function addBindings() {
401 function clickHandler(e) {
402 // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
403 // See: http://jacklmoore.com/notes/click-events/
404 if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) {
414 // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
415 $next.click(function () {
418 $prev.click(function () {
421 $close.click(function () {
422 publicMethod.close();
424 $overlay.click(function () {
425 if (settings.overlayClose) {
426 publicMethod.close();
431 $(document).bind('keydown.' + prefix, function (e) {
433 if (open && settings.escKey && key === 27) {
435 publicMethod.close();
437 if (open && settings.arrowKey && $related[1]) {
441 } else if (key === 39) {
448 if ($.isFunction($.fn.on)) {
449 $(document).on('click.'+prefix, '.'+boxElement, clickHandler);
450 } else { // For jQuery 1.3.x -> 1.6.x
451 $('.'+boxElement).live('click.'+prefix, clickHandler);
459 // Don't do anything if ColorBox already exists.
464 // Append the HTML when the DOM loads
470 // Usage format: $.fn.colorbox.close();
471 // Usage from within an iframe: parent.$.fn.colorbox.close();
474 publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
477 options = options || {};
482 if ($.isFunction($this)) { // assume a call to $.colorbox
485 } else if (!$this[0]) { // colorbox being applied to empty collection
490 options.onComplete = callback;
493 $this.each(function () {
494 $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
495 }).addClass(boxElement);
497 if (($.isFunction(options.open) && options.open.call($this)) || options.open) {
505 publicMethod.position = function (speed, loadedCallback) {
510 offset = $box.offset(),
514 $window.unbind('resize.' + prefix);
516 // remove the modal so that it doesn't influence the document width/height
517 $box.css({top: -9e4, left: -9e4});
519 scrollTop = $window.scrollTop();
520 scrollLeft = $window.scrollLeft();
522 if (settings.fixed && !isIE6) {
523 offset.top -= scrollTop;
524 offset.left -= scrollLeft;
525 $box.css({position: 'fixed'});
529 $box.css({position: 'absolute'});
532 // keeps the top and left positions within the browser's viewport.
533 if (settings.right !== false) {
534 left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
535 } else if (settings.left !== false) {
536 left += setSize(settings.left, 'x');
538 left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
541 if (settings.bottom !== false) {
542 top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
543 } else if (settings.top !== false) {
544 top += setSize(settings.top, 'y');
546 top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
549 $box.css({top: offset.top, left: offset.left, visibility:'visible'});
551 // setting the speed to 0 to reduce the delay between same-sized content.
552 speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0;
554 // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
555 // but it has to be shrank down around the size of div#colorbox when it's done. If not,
556 // it can invoke an obscure IE bug when using iframes.
557 $wrap[0].style.width = $wrap[0].style.height = "9999px";
559 function modalDimensions(that) {
560 $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt(that.style.width,10) - interfaceWidth)+'px';
561 $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt(that.style.height,10) - interfaceHeight)+'px';
564 css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left};
566 if(speed===0){ // temporary workaround to side-step jQuery-UI 1.8 bug (http://bugs.jquery.com/ticket/12273)
569 $box.dequeue().animate(css, {
571 complete: function () {
572 modalDimensions(this);
576 // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
577 $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
578 $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
580 if (settings.reposition) {
581 setTimeout(function () { // small delay before binding onresize due to an IE8 bug.
582 $window.bind('resize.' + prefix, publicMethod.position);
586 if (loadedCallback) {
591 modalDimensions(this);
596 publicMethod.resize = function (options) {
598 options = options || {};
601 settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
603 if (options.innerWidth) {
604 settings.w = setSize(options.innerWidth, 'x');
606 $loaded.css({width: settings.w});
608 if (options.height) {
609 settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
611 if (options.innerHeight) {
612 settings.h = setSize(options.innerHeight, 'y');
614 if (!options.innerHeight && !options.height) {
615 $loaded.css({height: "auto"});
616 settings.h = $loaded.height();
618 $loaded.css({height: settings.h});
620 publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
624 publicMethod.prep = function (object) {
629 var callback, speed = settings.transition === "none" ? 0 : settings.speed;
631 $loaded.empty().remove(); // Using empty first may prevent some IE7 issues.
633 $loaded = $tag(div, 'LoadedContent').append(object);
635 function getWidth() {
636 settings.w = settings.w || $loaded.width();
637 settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
640 function getHeight() {
641 settings.h = settings.h || $loaded.height();
642 settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
647 .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
648 .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
649 .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
650 .prependTo($content);
654 // 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.
655 //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
657 $(photo).css({'float': 'none'});
660 callback = function () {
661 var total = $related.length,
663 frameBorder = 'frameBorder',
664 allowTransparency = 'allowTransparency',
671 function removeFilter() {
673 $box[0].style.removeAttribute('filter');
677 complete = function () {
678 clearTimeout(loadingTimer);
679 $loadingOverlay.remove();
680 trigger(event_complete, settings.onComplete);
684 //This fadeIn helps the bicubic resampling to kick-in.
690 $title.html(settings.title).add($loaded).show();
692 if (total > 1) { // handle grouping
693 if (typeof settings.current === "string") {
694 $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show();
697 $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
698 $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
700 if (settings.slideshow) {
704 // Preloads images within a rel group
705 if (settings.preloading) {
706 $.each([getIndex(-1), getIndex(1)], function(){
710 data = $.data(i, colorbox);
712 if (data && data.href) {
714 if ($.isFunction(src)) {
718 src = $(i).attr('href');
721 if (src && (isImage(src) || data.photo)) {
728 $groupControls.hide();
731 if (settings.iframe) {
732 iframe = $tag('iframe')[0];
734 if (frameBorder in iframe) {
735 iframe[frameBorder] = 0;
738 if (allowTransparency in iframe) {
739 iframe[allowTransparency] = "true";
742 if (!settings.scrolling) {
743 iframe.scrolling = "no";
749 name: (new Date()).getTime(), // give the iframe a unique name to prevent caching
750 'class': prefix + 'Iframe',
751 allowFullScreen : true, // allow HTML5 video to go fullscreen
752 webkitAllowFullScreen : true,
753 mozallowfullscreen : true
755 .one('load', complete)
758 $events.one(event_purge, function () {
759 iframe.src = "//about:blank";
762 if (settings.fastIframe) {
763 $(iframe).trigger('load');
769 if (settings.transition === 'fade') {
770 $box.fadeTo(speed, 1, removeFilter);
776 if (settings.transition === 'fade') {
777 $box.fadeTo(speed, 0, function () {
778 publicMethod.position(0, callback);
781 publicMethod.position(speed, callback);
785 publicMethod.load = function (launched) {
786 var href, setResize, prep = publicMethod.prep, $inline;
792 element = $related[index];
799 $box.add($overlay).removeClass(className);
801 if (settings.className) {
802 $box.add($overlay).addClass(settings.className);
804 className = settings.className;
806 trigger(event_purge);
808 trigger(event_load, settings.onLoad);
810 settings.h = settings.height ?
811 setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
812 settings.innerHeight && setSize(settings.innerHeight, 'y');
814 settings.w = settings.width ?
815 setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
816 settings.innerWidth && setSize(settings.innerWidth, 'x');
818 // Sets the minimum dimensions for use in image scaling
819 settings.mw = settings.w;
820 settings.mh = settings.h;
822 // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
823 // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
824 if (settings.maxWidth) {
825 settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
826 settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
828 if (settings.maxHeight) {
829 settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
830 settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
833 href = settings.href;
835 loadingTimer = setTimeout(function () {
836 $loadingOverlay.appendTo($content);
839 if (settings.inline) {
840 // Inserts an empty placeholder where inline content is being pulled from.
841 // An event is bound to put inline content back when ColorBox closes or loads new content.
842 $inline = $tag(div).hide().insertBefore($(href)[0]);
844 $events.one(event_purge, function () {
845 $inline.replaceWith($loaded.children());
849 } else if (settings.iframe) {
850 // IFrame element won't be added to the DOM until it is ready to be displayed,
851 // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
853 } else if (settings.html) {
855 } else if (isImage(href)) {
856 $(photo = new Image())
857 .addClass(prefix + 'Photo')
858 .bind('error',function () {
859 settings.title = false;
860 prep($tag(div, 'Error').html(settings.imgError));
862 .one('load', function () {
865 if (settings.scalePhotos) {
866 setResize = function () {
867 photo.height -= photo.height * percent;
868 photo.width -= photo.width * percent;
870 if (settings.mw && photo.width > settings.mw) {
871 percent = (photo.width - settings.mw) / photo.width;
874 if (settings.mh && photo.height > settings.mh) {
875 percent = (photo.height - settings.mh) / photo.height;
881 photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
884 if ($related[1] && (settings.loop || $related[index + 1])) {
885 photo.style.cursor = 'pointer';
886 photo.onclick = function () {
892 photo.style.msInterpolationMode = 'bicubic';
895 setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
900 setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
904 $loadingBay.load(href, settings.data, function (data, status) {
905 prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents());
910 // Navigates to the next page/image in a set.
911 publicMethod.next = function () {
912 if (!active && $related[1] && (settings.loop || $related[index + 1])) {
918 publicMethod.prev = function () {
919 if (!active && $related[1] && (settings.loop || index)) {
920 index = getIndex(-1);
925 // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
926 publicMethod.close = function () {
927 if (open && !closing) {
933 trigger(event_cleanup, settings.onCleanup);
935 $window.unbind('.' + prefix + ' .' + event_ie6);
937 $overlay.fadeTo(200, 0);
939 $box.stop().fadeTo(300, 0, function () {
941 $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
943 trigger(event_purge);
945 $loaded.empty().remove(); // Using empty first may prevent some IE7 issues.
947 setTimeout(function () {
949 trigger(event_closed, settings.onClosed);
955 // Removes changes ColorBox made to the document, but does not remove the plugin
957 publicMethod.remove = function () {
958 $([]).add($box).add($overlay).remove();
961 .removeData(colorbox)
962 .removeClass(boxElement);
964 $(document).unbind('click.'+prefix);
967 // A method for fetching the current element ColorBox is referencing.
968 // returns a jQuery object.
969 publicMethod.element = function () {
973 publicMethod.settings = defaults;
975 }(jQuery, document, window));