From 4201a3621b269c8dd2b41d960178f27662499207 Mon Sep 17 00:00:00 2001 From: aspark Date: Fri, 29 Jul 2016 18:20:53 +0800 Subject: [PATCH 1/3] multi window support --- jquery.colorbox.js | 1818 ++++++++++++++++++++++---------------------- 1 file changed, 925 insertions(+), 893 deletions(-) diff --git a/jquery.colorbox.js b/jquery.colorbox.js index 12dd1b2..833d942 100644 --- a/jquery.colorbox.js +++ b/jquery.colorbox.js @@ -4,1102 +4,1134 @@ http://www.jacklmoore.com/colorbox */ (function ($, document, window) { - var - // Default settings object. - // See http://jacklmoore.com/colorbox for details. - defaults = { - // data sources - html: false, - photo: false, - iframe: false, - inline: false, - - // behavior and appearance - transition: "elastic", - speed: 300, - fadeOut: 300, - width: false, - initialWidth: "600", - innerWidth: false, - maxWidth: false, - height: false, - initialHeight: "450", - innerHeight: false, - maxHeight: false, - scalePhotos: true, - scrolling: true, - opacity: 0.9, - preloading: true, - className: false, - overlayClose: true, - escKey: true, - arrowKey: true, - top: false, - bottom: false, - left: false, - right: false, - fixed: false, - data: undefined, - closeButton: true, - fastIframe: true, - open: false, - reposition: true, - loop: true, - slideshow: false, - slideshowAuto: true, - slideshowSpeed: 2500, - slideshowStart: "start slideshow", - slideshowStop: "stop slideshow", - photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i, - - // alternate image paths for high-res displays - retinaImage: false, - retinaUrl: false, - retinaSuffix: '@2x.$1', - - // internationalization - current: "image {current} of {total}", - previous: "previous", - next: "next", - close: "close", - xhrError: "This content failed to load.", - imgError: "This image failed to load.", - - // accessbility - returnFocus: true, - trapFocus: true, - - // callbacks - onOpen: false, - onLoad: false, - onComplete: false, - onCleanup: false, - onClosed: false, - - rel: function() { - return this.rel; - }, - href: function() { - // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container') - return $(this).attr('href'); - }, - title: function() { - return this.title; - }, - createImg: function() { - var img = new Image(); - var attrs = $(this).data('cbox-img-attrs'); + var _create = function(colorbox, prefix) { + var + // Default settings object. + // See http://jacklmoore.com/colorbox for details. + defaults = { + // data sources + html: false, + photo: false, + iframe: false, + inline: false, + + // behavior and appearance + transition: "elastic", + speed: 300, + fadeOut: 300, + width: false, + initialWidth: "600", + innerWidth: false, + maxWidth: false, + height: false, + initialHeight: "450", + innerHeight: false, + maxHeight: false, + scalePhotos: true, + scrolling: true, + opacity: 0.9, + preloading: true, + className: false, + overlayClose: true, + escKey: true, + arrowKey: true, + top: false, + bottom: false, + left: false, + right: false, + fixed: false, + data: undefined, + closeButton: true, + fastIframe: true, + open: false, + reposition: true, + loop: true, + slideshow: false, + slideshowAuto: true, + slideshowSpeed: 2500, + slideshowStart: "start slideshow", + slideshowStop: "stop slideshow", + photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i, + + // alternate image paths for high-res displays + retinaImage: false, + retinaUrl: false, + retinaSuffix: '@2x.$1', + + // internationalization + current: "image {current} of {total}", + previous: "previous", + next: "next", + close: "close", + xhrError: "This content failed to load.", + imgError: "This image failed to load.", + + // accessbility + returnFocus: true, + trapFocus: true, + + // callbacks + onOpen: false, + onLoad: false, + onComplete: false, + onCleanup: false, + onClosed: false, + + rel: function() { + return this.rel; + }, + href: function() { + // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container') + return $(this).attr('href'); + }, + title: function() { + return this.title; + }, + createImg: function() { + var img = new Image(); + var attrs = $(this).data('cbox-img-attrs'); - if (typeof attrs === 'object') { - $.each(attrs, function(key, val){ - img[key] = val; - }); - } + if (typeof attrs === 'object') { + $.each(attrs, function(key, val){ + img[key] = val; + }); + } - return img; - }, - createIframe: function() { - var iframe = document.createElement('iframe'); - var attrs = $(this).data('cbox-iframe-attrs'); + return img; + }, + createIframe: function() { + var iframe = document.createElement('iframe'); + var attrs = $(this).data('cbox-iframe-attrs'); - if (typeof attrs === 'object') { - $.each(attrs, function(key, val){ - iframe[key] = val; - }); + if (typeof attrs === 'object') { + $.each(attrs, function(key, val){ + iframe[key] = val; + }); + } + + if ('frameBorder' in iframe) { + iframe.frameBorder = 0; + } + if ('allowTransparency' in iframe) { + iframe.allowTransparency = "true"; + } + iframe.name = (new Date()).getTime(); // give the iframe a unique name to prevent caching + iframe.allowFullscreen = true; + + return iframe; } + }, - if ('frameBorder' in iframe) { - iframe.frameBorder = 0; + // Abstracting the HTML and event identifiers for easy rebranding + colorbox = colorbox || 'colorbox', + prefix = prefix || 'cbox', + boxElement = prefix + 'Element', + + // Events + event_open = prefix + '_open', + event_load = prefix + '_load', + event_complete = prefix + '_complete', + event_cleanup = prefix + '_cleanup', + event_closed = prefix + '_closed', + event_purge = prefix + '_purge', + + // Cached jQuery Object Variables + $overlay, + $box, + $wrap, + $content, + $topBorder, + $leftBorder, + $rightBorder, + $bottomBorder, + $related, + $window, + $loaded, + $loadingBay, + $loadingOverlay, + $title, + $current, + $slideshow, + $next, + $prev, + $close, + $groupControls, + $events = $(''), // $({}) would be prefered, but there is an issue with jQuery 1.4.2 + + // Variables for cached values or use across multiple functions + settings, + interfaceHeight, + interfaceWidth, + loadedHeight, + loadedWidth, + index, + photo, + open, + active, + closing, + loadingTimer, + publicMethod, + div = "div", + requests = 0, + previousCSS = {}, + init; + + // **************** + // HELPER FUNCTIONS + // **************** + + // Convenience function for creating new jQuery objects + function $tag(tag, id, css) { + var element = document.createElement(tag); + + if (id) { + element.id = prefix + id; } - if ('allowTransparency' in iframe) { - iframe.allowTransparency = "true"; + + if (css) { + element.style.cssText = css; } - iframe.name = (new Date()).getTime(); // give the iframe a unique name to prevent caching - iframe.allowFullscreen = true; - return iframe; - } - }, - - // Abstracting the HTML and event identifiers for easy rebranding - colorbox = 'colorbox', - prefix = 'cbox', - boxElement = prefix + 'Element', - - // Events - event_open = prefix + '_open', - event_load = prefix + '_load', - event_complete = prefix + '_complete', - event_cleanup = prefix + '_cleanup', - event_closed = prefix + '_closed', - event_purge = prefix + '_purge', - - // Cached jQuery Object Variables - $overlay, - $box, - $wrap, - $content, - $topBorder, - $leftBorder, - $rightBorder, - $bottomBorder, - $related, - $window, - $loaded, - $loadingBay, - $loadingOverlay, - $title, - $current, - $slideshow, - $next, - $prev, - $close, - $groupControls, - $events = $(''), // $({}) would be prefered, but there is an issue with jQuery 1.4.2 - - // Variables for cached values or use across multiple functions - settings, - interfaceHeight, - interfaceWidth, - loadedHeight, - loadedWidth, - index, - photo, - open, - active, - closing, - loadingTimer, - publicMethod, - div = "div", - requests = 0, - previousCSS = {}, - init; - - // **************** - // HELPER FUNCTIONS - // **************** - - // Convenience function for creating new jQuery objects - function $tag(tag, id, css) { - var element = document.createElement(tag); - - if (id) { - element.id = prefix + id; + return $(element); } - if (css) { - element.style.cssText = css; + // Get the window height using innerHeight when available to avoid an issue with iOS + // http://bugs.jquery.com/ticket/6724 + function winheight() { + return window.innerHeight ? window.innerHeight : $(window).height(); } - return $(element); - } - - // Get the window height using innerHeight when available to avoid an issue with iOS - // http://bugs.jquery.com/ticket/6724 - function winheight() { - return window.innerHeight ? window.innerHeight : $(window).height(); - } - - function Settings(element, options) { - if (options !== Object(options)) { - options = {}; - } + function Settings(element, options) { + if (options !== Object(options)) { + options = {}; + } - this.cache = {}; - this.el = element; + this.cache = {}; + this.el = element; - this.value = function(key) { - var dataAttr; + this.value = function(key) { + var dataAttr; - if (this.cache[key] === undefined) { - dataAttr = $(this.el).attr('data-cbox-'+key); + if (this.cache[key] === undefined) { + dataAttr = $(this.el).attr('data-cbox-'+key); - if (dataAttr !== undefined) { - this.cache[key] = dataAttr; - } else if (options[key] !== undefined) { - this.cache[key] = options[key]; - } else if (defaults[key] !== undefined) { - this.cache[key] = defaults[key]; + if (dataAttr !== undefined) { + this.cache[key] = dataAttr; + } else if (options[key] !== undefined) { + this.cache[key] = options[key]; + } else if (defaults[key] !== undefined) { + this.cache[key] = defaults[key]; + } } - } - return this.cache[key]; - }; + return this.cache[key]; + }; - this.get = function(key) { - var value = this.value(key); - return $.isFunction(value) ? value.call(this.el, this) : value; - }; - } + this.get = function(key) { + var value = this.value(key); + return $.isFunction(value) ? value.call(this.el, this) : value; + }; + } - // Determine the next and previous members in a group. - function getIndex(increment) { - var - max = $related.length, - newIndex = (index + increment) % max; + // Determine the next and previous members in a group. + function getIndex(increment) { + var + max = $related.length, + newIndex = (index + increment) % max; - return (newIndex < 0) ? max + newIndex : newIndex; - } + return (newIndex < 0) ? max + newIndex : newIndex; + } - // Convert '%' and 'px' values to integers - function setSize(size, dimension) { - return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); - } + // Convert '%' and 'px' values to integers + function setSize(size, dimension) { + return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); + } - // Checks an href to see if it is a photo. - // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex. - function isImage(settings, url) { - return settings.get('photo') || settings.get('photoRegex').test(url); - } + // Checks an href to see if it is a photo. + // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex. + function isImage(settings, url) { + return settings.get('photo') || settings.get('photoRegex').test(url); + } - function retinaUrl(settings, url) { - return settings.get('retinaUrl') && window.devicePixelRatio > 1 ? url.replace(settings.get('photoRegex'), settings.get('retinaSuffix')) : url; - } + function retinaUrl(settings, url) { + return settings.get('retinaUrl') && window.devicePixelRatio > 1 ? url.replace(settings.get('photoRegex'), settings.get('retinaSuffix')) : url; + } - function trapFocus(e) { - if ('contains' in $box[0] && !$box[0].contains(e.target) && e.target !== $overlay[0]) { - e.stopPropagation(); - $box.focus(); + function trapFocus(e) { + if ('contains' in $box[0] && !$box[0].contains(e.target) && e.target !== $overlay[0]) { + e.stopPropagation(); + $box.focus(); + } } - } - function setClass(str) { - if (setClass.str !== str) { - $box.add($overlay).removeClass(setClass.str).addClass(str); - setClass.str = str; + function setClass(str) { + if (setClass.str !== str) { + $box.add($overlay).removeClass(setClass.str).addClass(str); + setClass.str = str; + } } - } - function getRelated(rel) { - index = 0; + function getRelated(rel) { + index = 0; - if (rel && rel !== false && rel !== 'nofollow') { - $related = $('.' + boxElement).filter(function () { - var options = $.data(this, colorbox); - var settings = new Settings(this, options); - return (settings.get('rel') === rel); - }); - index = $related.index(settings.el); + if (rel && rel !== false && rel !== 'nofollow') { + $related = $('.' + boxElement).filter(function () { + var options = $.data(this, colorbox); + var settings = new Settings(this, options); + return (settings.get('rel') === rel); + }); + index = $related.index(settings.el); - // Check direct calls to Colorbox. - if (index === -1) { - $related = $related.add(settings.el); - index = $related.length - 1; + // Check direct calls to Colorbox. + if (index === -1) { + $related = $related.add(settings.el); + index = $related.length - 1; + } + } else { + $related = $(settings.el); } - } else { - $related = $(settings.el); } - } - function trigger(event) { - // for external use - $(document).trigger(event); - // for internal use - $events.triggerHandler(event); - } + function trigger(event) { + // for external use + $(document).trigger(event); + // for internal use + $events.triggerHandler(event); + } - var slideshow = (function(){ - var active, - className = prefix + "Slideshow_", - click = "click." + prefix, - timeOut; + var slideshow = (function(){ + var active, + className = prefix + "Slideshow_", + click = "click." + prefix, + timeOut; - function clear () { - clearTimeout(timeOut); - } + function clear () { + clearTimeout(timeOut); + } - function set() { - if (settings.get('loop') || $related[index + 1]) { - clear(); - timeOut = setTimeout(publicMethod.next, settings.get('slideshowSpeed')); + function set() { + if (settings.get('loop') || $related[index + 1]) { + clear(); + timeOut = setTimeout(publicMethod.next, settings.get('slideshowSpeed')); + } } - } - function start() { - $slideshow - .html(settings.get('slideshowStop')) - .unbind(click) - .one(click, stop); + function start() { + $slideshow + .html(settings.get('slideshowStop')) + .unbind(click) + .one(click, stop); - $events - .bind(event_complete, set) - .bind(event_load, clear); + $events + .bind(event_complete, set) + .bind(event_load, clear); - $box.removeClass(className + "off").addClass(className + "on"); - } + $box.removeClass(className + "off").addClass(className + "on"); + } - function stop() { - clear(); + function stop() { + clear(); - $events - .unbind(event_complete, set) - .unbind(event_load, clear); + $events + .unbind(event_complete, set) + .unbind(event_load, clear); - $slideshow - .html(settings.get('slideshowStart')) - .unbind(click) - .one(click, function () { - publicMethod.next(); - start(); - }); + $slideshow + .html(settings.get('slideshowStart')) + .unbind(click) + .one(click, function () { + publicMethod.next(); + start(); + }); - $box.removeClass(className + "on").addClass(className + "off"); - } + $box.removeClass(className + "on").addClass(className + "off"); + } - function reset() { - active = false; - $slideshow.hide(); - clear(); - $events - .unbind(event_complete, set) - .unbind(event_load, clear); - $box.removeClass(className + "off " + className + "on"); - } + function reset() { + active = false; + $slideshow.hide(); + clear(); + $events + .unbind(event_complete, set) + .unbind(event_load, clear); + $box.removeClass(className + "off " + className + "on"); + } - return function(){ - if (active) { - if (!settings.get('slideshow')) { - $events.unbind(event_cleanup, reset); - reset(); - } - } else { - if (settings.get('slideshow') && $related[1]) { - active = true; - $events.one(event_cleanup, reset); - if (settings.get('slideshowAuto')) { - start(); - } else { - stop(); + return function(){ + if (active) { + if (!settings.get('slideshow')) { + $events.unbind(event_cleanup, reset); + reset(); + } + } else { + if (settings.get('slideshow') && $related[1]) { + active = true; + $events.one(event_cleanup, reset); + if (settings.get('slideshowAuto')) { + start(); + } else { + stop(); + } + $slideshow.show(); } - $slideshow.show(); } - } - }; + }; - }()); + }()); - function launch(element) { - var options; + function launch(element) { + var options; - if (!closing) { + if (!closing) { - options = $(element).data(colorbox); + options = $(element).data(colorbox); - settings = new Settings(element, options); + settings = new Settings(element, options); - getRelated(settings.get('rel')); + getRelated(settings.get('rel')); - if (!open) { - open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. + if (!open) { + open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. - setClass(settings.get('className')); + setClass(settings.get('className')); - // Show colorbox so the sizes can be calculated in older versions of jQuery - $box.css({visibility:'hidden', display:'block', opacity:''}); + // Show colorbox so the sizes can be calculated in older versions of jQuery + $box.css({visibility:'hidden', display:'block', opacity:''}); - $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden'); - $content.css({width:'', height:''}).append($loaded); + $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden'); + $content.css({width:'', height:''}).append($loaded); - // Cache values needed for size calculations - interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height(); - interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); - loadedHeight = $loaded.outerHeight(true); - loadedWidth = $loaded.outerWidth(true); + // Cache values needed for size calculations + interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height(); + interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); + loadedHeight = $loaded.outerHeight(true); + loadedWidth = $loaded.outerWidth(true); - // Opens inital empty Colorbox prior to content being loaded. - var initialWidth = setSize(settings.get('initialWidth'), 'x'); - var initialHeight = setSize(settings.get('initialHeight'), 'y'); - var maxWidth = settings.get('maxWidth'); - var maxHeight = settings.get('maxHeight'); + // Opens inital empty Colorbox prior to content being loaded. + var initialWidth = setSize(settings.get('initialWidth'), 'x'); + var initialHeight = setSize(settings.get('initialHeight'), 'y'); + var maxWidth = settings.get('maxWidth'); + var maxHeight = settings.get('maxHeight'); - settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0); - settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0); + settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0); + settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0); - $loaded.css({width:'', height:settings.h}); - publicMethod.position(); + $loaded.css({width:'', height:settings.h}); + publicMethod.position(); - trigger(event_open); - settings.get('onOpen'); + trigger(event_open); + settings.get('onOpen'); - $groupControls.add($title).hide(); + $groupControls.add($title).hide(); - $box.focus(); + $box.focus(); - if (settings.get('trapFocus')) { - // Confine focus to the modal - // Uses event capturing that is not supported in IE8- - if (document.addEventListener) { + if (settings.get('trapFocus')) { + // Confine focus to the modal + // Uses event capturing that is not supported in IE8- + if (document.addEventListener) { - document.addEventListener('focus', trapFocus, true); + document.addEventListener('focus', trapFocus, true); + $events.one(event_closed, function () { + document.removeEventListener('focus', trapFocus, true); + }); + } + } + + // Return focus on closing + if (settings.get('returnFocus')) { $events.one(event_closed, function () { - document.removeEventListener('focus', trapFocus, true); + $(settings.el).focus(); }); } } - // Return focus on closing - if (settings.get('returnFocus')) { - $events.one(event_closed, function () { - $(settings.el).focus(); - }); - } - } + var opacity = parseFloat(settings.get('opacity')); + $overlay.css({ + opacity: opacity === opacity ? opacity : '', + cursor: settings.get('overlayClose') ? 'pointer' : '', + visibility: 'visible' + }).show(); - var opacity = parseFloat(settings.get('opacity')); - $overlay.css({ - opacity: opacity === opacity ? opacity : '', - cursor: settings.get('overlayClose') ? 'pointer' : '', - visibility: 'visible' - }).show(); + if (settings.get('closeButton')) { + $close.html(settings.get('close')).appendTo($content); + } else { + $close.appendTo('
'); // replace with .detach() when dropping jQuery < 1.4 + } - if (settings.get('closeButton')) { - $close.html(settings.get('close')).appendTo($content); - } else { - $close.appendTo('
'); // replace with .detach() when dropping jQuery < 1.4 + load(); } - - load(); } - } - // Colorbox's markup needs to be added to the DOM prior to being called - // so that the browser will go ahead and load the CSS background images. - function appendHTML() { - if (!$box) { - init = false; - $window = $(window); - $box = $tag(div).attr({ - id: colorbox, - 'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS. - role: 'dialog', - tabindex: '-1' - }).hide(); - $overlay = $tag(div, "Overlay").hide(); - $loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]); - $wrap = $tag(div, "Wrapper"); - $content = $tag(div, "Content").append( - $title = $tag(div, "Title"), - $current = $tag(div, "Current"), - $prev = $('