jquery.colorbox.js 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105
  1. /*!
  2. Colorbox 1.6.4
  3. license: MIT
  4. http://www.jacklmoore.com/colorbox
  5. */
  6. (function ($, document, window) {
  7. var
  8. // Default settings object.
  9. // See http://jacklmoore.com/colorbox for details.
  10. defaults = {
  11. // data sources
  12. html: false,
  13. photo: false,
  14. iframe: false,
  15. inline: false,
  16. // behavior and appearance
  17. transition: "elastic",
  18. speed: 300,
  19. fadeOut: 300,
  20. width: false,
  21. initialWidth: "600",
  22. innerWidth: false,
  23. maxWidth: false,
  24. height: false,
  25. initialHeight: "450",
  26. innerHeight: false,
  27. maxHeight: false,
  28. scalePhotos: true,
  29. scrolling: true,
  30. opacity: 0.9,
  31. preloading: true,
  32. className: false,
  33. overlayClose: true,
  34. escKey: true,
  35. arrowKey: true,
  36. top: false,
  37. bottom: false,
  38. left: false,
  39. right: false,
  40. fixed: false,
  41. data: undefined,
  42. closeButton: true,
  43. fastIframe: true,
  44. open: false,
  45. reposition: true,
  46. loop: true,
  47. slideshow: false,
  48. slideshowAuto: true,
  49. slideshowSpeed: 2500,
  50. slideshowStart: "start slideshow",
  51. slideshowStop: "stop slideshow",
  52. photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i,
  53. // alternate image paths for high-res displays
  54. retinaImage: false,
  55. retinaUrl: false,
  56. retinaSuffix: '@2x.$1',
  57. // internationalization
  58. current: "image {current} of {total}",
  59. previous: "previous",
  60. next: "next",
  61. close: "close",
  62. xhrError: "This content failed to load.",
  63. imgError: "This image failed to load.",
  64. // accessbility
  65. returnFocus: true,
  66. trapFocus: true,
  67. // callbacks
  68. onOpen: false,
  69. onLoad: false,
  70. onComplete: false,
  71. onCleanup: false,
  72. onClosed: false,
  73. rel: function() {
  74. return this.rel;
  75. },
  76. href: function() {
  77. // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container')
  78. return $(this).attr('href');
  79. },
  80. title: function() {
  81. return this.title;
  82. },
  83. createImg: function() {
  84. var img = new Image();
  85. var attrs = $(this).data('cbox-img-attrs');
  86. if (typeof attrs === 'object') {
  87. $.each(attrs, function(key, val){
  88. img[key] = val;
  89. });
  90. }
  91. return img;
  92. },
  93. createIframe: function() {
  94. var iframe = document.createElement('iframe');
  95. var attrs = $(this).data('cbox-iframe-attrs');
  96. if (typeof attrs === 'object') {
  97. $.each(attrs, function(key, val){
  98. iframe[key] = val;
  99. });
  100. }
  101. if ('frameBorder' in iframe) {
  102. iframe.frameBorder = 0;
  103. }
  104. if ('allowTransparency' in iframe) {
  105. iframe.allowTransparency = "true";
  106. }
  107. iframe.name = (new Date()).getTime(); // give the iframe a unique name to prevent caching
  108. iframe.allowFullscreen = true;
  109. return iframe;
  110. }
  111. },
  112. // Abstracting the HTML and event identifiers for easy rebranding
  113. colorbox = 'colorbox',
  114. prefix = 'cbox',
  115. boxElement = prefix + 'Element',
  116. // Events
  117. event_open = prefix + '_open',
  118. event_load = prefix + '_load',
  119. event_complete = prefix + '_complete',
  120. event_cleanup = prefix + '_cleanup',
  121. event_closed = prefix + '_closed',
  122. event_purge = prefix + '_purge',
  123. // Cached jQuery Object Variables
  124. $overlay,
  125. $box,
  126. $wrap,
  127. $content,
  128. $topBorder,
  129. $leftBorder,
  130. $rightBorder,
  131. $bottomBorder,
  132. $related,
  133. $window,
  134. $loaded,
  135. $loadingBay,
  136. $loadingOverlay,
  137. $title,
  138. $current,
  139. $slideshow,
  140. $next,
  141. $prev,
  142. $close,
  143. $groupControls,
  144. $events = $('<a/>'), // $({}) would be preferred, but there is an issue with jQuery 1.4.2
  145. // Variables for cached values or use across multiple functions
  146. settings,
  147. interfaceHeight,
  148. interfaceWidth,
  149. loadedHeight,
  150. loadedWidth,
  151. index,
  152. photo,
  153. open,
  154. active,
  155. closing,
  156. loadingTimer,
  157. publicMethod,
  158. div = "div",
  159. requests = 0,
  160. previousCSS = {},
  161. init;
  162. // ****************
  163. // HELPER FUNCTIONS
  164. // ****************
  165. // Convenience function for creating new jQuery objects
  166. function $tag(tag, id, css) {
  167. var element = document.createElement(tag);
  168. if (id) {
  169. element.id = prefix + id;
  170. }
  171. if (css) {
  172. element.style.cssText = css;
  173. }
  174. return $(element);
  175. }
  176. // Get the window height using innerHeight when available to avoid an issue with iOS
  177. // http://bugs.jquery.com/ticket/6724
  178. function winheight() {
  179. return window.innerHeight ? window.innerHeight : $(window).height();
  180. }
  181. function Settings(element, options) {
  182. if (options !== Object(options)) {
  183. options = {};
  184. }
  185. this.cache = {};
  186. this.el = element;
  187. this.value = function(key) {
  188. var dataAttr;
  189. if (this.cache[key] === undefined) {
  190. dataAttr = $(this.el).attr('data-cbox-'+key);
  191. if (dataAttr !== undefined) {
  192. this.cache[key] = dataAttr;
  193. } else if (options[key] !== undefined) {
  194. this.cache[key] = options[key];
  195. } else if (defaults[key] !== undefined) {
  196. this.cache[key] = defaults[key];
  197. }
  198. }
  199. return this.cache[key];
  200. };
  201. this.get = function(key) {
  202. var value = this.value(key);
  203. return $.isFunction(value) ? value.call(this.el, this) : value;
  204. };
  205. }
  206. // Determine the next and previous members in a group.
  207. function getIndex(increment) {
  208. var
  209. max = $related.length,
  210. newIndex = (index + increment) % max;
  211. return (newIndex < 0) ? max + newIndex : newIndex;
  212. }
  213. // Convert '%' and 'px' values to integers
  214. function setSize(size, dimension) {
  215. return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10));
  216. }
  217. // Checks an href to see if it is a photo.
  218. // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex.
  219. function isImage(settings, url) {
  220. return settings.get('photo') || settings.get('photoRegex').test(url);
  221. }
  222. function retinaUrl(settings, url) {
  223. return settings.get('retinaUrl') && window.devicePixelRatio > 1 ? url.replace(settings.get('photoRegex'), settings.get('retinaSuffix')) : url;
  224. }
  225. function trapFocus(e) {
  226. if ('contains' in $box[0] && !$box[0].contains(e.target) && e.target !== $overlay[0]) {
  227. e.stopPropagation();
  228. $box.focus();
  229. }
  230. }
  231. function setClass(str) {
  232. if (setClass.str !== str) {
  233. $box.add($overlay).removeClass(setClass.str).addClass(str);
  234. setClass.str = str;
  235. }
  236. }
  237. function getRelated(rel) {
  238. index = 0;
  239. if (rel && rel !== false && rel !== 'nofollow') {
  240. $related = $('.' + boxElement).filter(function () {
  241. var options = $.data(this, colorbox);
  242. var settings = new Settings(this, options);
  243. return (settings.get('rel') === rel);
  244. });
  245. index = $related.index(settings.el);
  246. // Check direct calls to Colorbox.
  247. if (index === -1) {
  248. $related = $related.add(settings.el);
  249. index = $related.length - 1;
  250. }
  251. } else {
  252. $related = $(settings.el);
  253. }
  254. }
  255. function trigger(event) {
  256. // for external use
  257. $(document).trigger(event);
  258. // for internal use
  259. $events.triggerHandler(event);
  260. }
  261. var slideshow = (function(){
  262. var active,
  263. className = prefix + "Slideshow_",
  264. click = "click." + prefix,
  265. timeOut;
  266. function clear () {
  267. clearTimeout(timeOut);
  268. }
  269. function set() {
  270. if (settings.get('loop') || $related[index + 1]) {
  271. clear();
  272. timeOut = setTimeout(publicMethod.next, settings.get('slideshowSpeed'));
  273. }
  274. }
  275. function start() {
  276. $slideshow
  277. .html(settings.get('slideshowStop'))
  278. .unbind(click)
  279. .one(click, stop);
  280. $events
  281. .bind(event_complete, set)
  282. .bind(event_load, clear);
  283. $box.removeClass(className + "off").addClass(className + "on");
  284. }
  285. function stop() {
  286. clear();
  287. $events
  288. .unbind(event_complete, set)
  289. .unbind(event_load, clear);
  290. $slideshow
  291. .html(settings.get('slideshowStart'))
  292. .unbind(click)
  293. .one(click, function () {
  294. publicMethod.next();
  295. start();
  296. });
  297. $box.removeClass(className + "on").addClass(className + "off");
  298. }
  299. function reset() {
  300. active = false;
  301. $slideshow.hide();
  302. clear();
  303. $events
  304. .unbind(event_complete, set)
  305. .unbind(event_load, clear);
  306. $box.removeClass(className + "off " + className + "on");
  307. }
  308. return function(){
  309. if (active) {
  310. if (!settings.get('slideshow')) {
  311. $events.unbind(event_cleanup, reset);
  312. reset();
  313. }
  314. } else {
  315. if (settings.get('slideshow') && $related[1]) {
  316. active = true;
  317. $events.one(event_cleanup, reset);
  318. if (settings.get('slideshowAuto')) {
  319. start();
  320. } else {
  321. stop();
  322. }
  323. $slideshow.show();
  324. }
  325. }
  326. };
  327. }());
  328. function launch(element) {
  329. var options;
  330. if (!closing) {
  331. options = $(element).data(colorbox);
  332. settings = new Settings(element, options);
  333. getRelated(settings.get('rel'));
  334. if (!open) {
  335. open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
  336. setClass(settings.get('className'));
  337. // Show colorbox so the sizes can be calculated in older versions of jQuery
  338. $box.css({visibility:'hidden', display:'block', opacity:''});
  339. $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden');
  340. $content.css({width:'', height:''}).append($loaded);
  341. // Cache values needed for size calculations
  342. interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();
  343. interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
  344. loadedHeight = $loaded.outerHeight(true);
  345. loadedWidth = $loaded.outerWidth(true);
  346. // Opens inital empty Colorbox prior to content being loaded.
  347. var initialWidth = setSize(settings.get('initialWidth'), 'x');
  348. var initialHeight = setSize(settings.get('initialHeight'), 'y');
  349. var maxWidth = settings.get('maxWidth');
  350. var maxHeight = settings.get('maxHeight');
  351. settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0);
  352. settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0);
  353. $loaded.css({width:'', height:settings.h});
  354. publicMethod.position();
  355. trigger(event_open);
  356. settings.get('onOpen');
  357. $groupControls.add($title).hide();
  358. $box.focus();
  359. if (settings.get('trapFocus')) {
  360. // Confine focus to the modal
  361. // Uses event capturing that is not supported in IE8-
  362. if (document.addEventListener) {
  363. document.addEventListener('focus', trapFocus, true);
  364. $events.one(event_closed, function () {
  365. document.removeEventListener('focus', trapFocus, true);
  366. });
  367. }
  368. }
  369. // Return focus on closing
  370. if (settings.get('returnFocus')) {
  371. $events.one(event_closed, function () {
  372. $(settings.el).focus();
  373. });
  374. }
  375. }
  376. var opacity = parseFloat(settings.get('opacity'));
  377. $overlay.css({
  378. opacity: opacity === opacity ? opacity : '',
  379. cursor: settings.get('overlayClose') ? 'pointer' : '',
  380. visibility: 'visible'
  381. }).show();
  382. if (settings.get('closeButton')) {
  383. $close.html(settings.get('close')).appendTo($content);
  384. } else {
  385. $close.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
  386. }
  387. load();
  388. }
  389. }
  390. // Colorbox's markup needs to be added to the DOM prior to being called
  391. // so that the browser will go ahead and load the CSS background images.
  392. function appendHTML() {
  393. if (!$box) {
  394. init = false;
  395. $window = $(window);
  396. $box = $tag(div).attr({
  397. id: colorbox,
  398. 'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS.
  399. role: 'dialog',
  400. tabindex: '-1'
  401. }).hide();
  402. $overlay = $tag(div, "Overlay").hide();
  403. $loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]);
  404. $wrap = $tag(div, "Wrapper");
  405. $content = $tag(div, "Content").append(
  406. $title = $tag(div, "Title"),
  407. $current = $tag(div, "Current"),
  408. $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
  409. $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
  410. $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
  411. $loadingOverlay
  412. );
  413. $close = $('<button type="button"/>').attr({id:prefix+'Close'});
  414. $wrap.append( // The 3x3 Grid that makes up Colorbox
  415. $tag(div).append(
  416. $tag(div, "TopLeft"),
  417. $topBorder = $tag(div, "TopCenter"),
  418. $tag(div, "TopRight")
  419. ),
  420. $tag(div, false, 'clear:left').append(
  421. $leftBorder = $tag(div, "MiddleLeft"),
  422. $content,
  423. $rightBorder = $tag(div, "MiddleRight")
  424. ),
  425. $tag(div, false, 'clear:left').append(
  426. $tag(div, "BottomLeft"),
  427. $bottomBorder = $tag(div, "BottomCenter"),
  428. $tag(div, "BottomRight")
  429. )
  430. ).find('div div').css({'float': 'left'});
  431. $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;');
  432. $groupControls = $next.add($prev).add($current).add($slideshow);
  433. }
  434. if (document.body && !$box.parent().length) {
  435. $(document.body).append($overlay, $box.append($wrap, $loadingBay));
  436. }
  437. }
  438. // Add Colorbox's event bindings
  439. function addBindings() {
  440. function clickHandler(e) {
  441. // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
  442. // See: http://jacklmoore.com/notes/click-events/
  443. if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey)) {
  444. e.preventDefault();
  445. launch(this);
  446. }
  447. }
  448. if ($box) {
  449. if (!init) {
  450. init = true;
  451. // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
  452. $next.click(function () {
  453. publicMethod.next();
  454. });
  455. $prev.click(function () {
  456. publicMethod.prev();
  457. });
  458. $close.click(function () {
  459. publicMethod.close();
  460. });
  461. $overlay.click(function () {
  462. if (settings.get('overlayClose')) {
  463. publicMethod.close();
  464. }
  465. });
  466. // Key Bindings
  467. $(document).bind('keydown.' + prefix, function (e) {
  468. var key = e.keyCode;
  469. if (open && settings.get('escKey') && key === 27) {
  470. e.preventDefault();
  471. publicMethod.close();
  472. }
  473. if (open && settings.get('arrowKey') && $related[1] && !e.altKey) {
  474. if (key === 37) {
  475. e.preventDefault();
  476. $prev.click();
  477. } else if (key === 39) {
  478. e.preventDefault();
  479. $next.click();
  480. }
  481. }
  482. });
  483. if ($.isFunction($.fn.on)) {
  484. // For jQuery 1.7+
  485. $(document).on('click.'+prefix, '.'+boxElement, clickHandler);
  486. } else {
  487. // For jQuery 1.3.x -> 1.6.x
  488. // This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed.
  489. // This is not here for jQuery 1.9, it's here for legacy users.
  490. $('.'+boxElement).live('click.'+prefix, clickHandler);
  491. }
  492. }
  493. return true;
  494. }
  495. return false;
  496. }
  497. // Don't do anything if Colorbox already exists.
  498. if ($[colorbox]) {
  499. return;
  500. }
  501. // Append the HTML when the DOM loads
  502. $(appendHTML);
  503. // ****************
  504. // PUBLIC FUNCTIONS
  505. // Usage format: $.colorbox.close();
  506. // Usage from within an iframe: parent.jQuery.colorbox.close();
  507. // ****************
  508. publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
  509. var settings;
  510. var $obj = this;
  511. options = options || {};
  512. if ($.isFunction($obj)) { // assume a call to $.colorbox
  513. $obj = $('<a/>');
  514. options.open = true;
  515. }
  516. if (!$obj[0]) { // colorbox being applied to empty collection
  517. return $obj;
  518. }
  519. appendHTML();
  520. if (addBindings()) {
  521. if (callback) {
  522. options.onComplete = callback;
  523. }
  524. $obj.each(function () {
  525. var old = $.data(this, colorbox) || {};
  526. $.data(this, colorbox, $.extend(old, options));
  527. }).addClass(boxElement);
  528. settings = new Settings($obj[0], options);
  529. if (settings.get('open')) {
  530. launch($obj[0]);
  531. }
  532. }
  533. return $obj;
  534. };
  535. publicMethod.position = function (speed, loadedCallback) {
  536. var
  537. css,
  538. top = 0,
  539. left = 0,
  540. offset = $box.offset(),
  541. scrollTop,
  542. scrollLeft;
  543. $window.unbind('resize.' + prefix);
  544. // remove the modal so that it doesn't influence the document width/height
  545. $box.css({top: -9e4, left: -9e4});
  546. scrollTop = $window.scrollTop();
  547. scrollLeft = $window.scrollLeft();
  548. if (settings.get('fixed')) {
  549. offset.top -= scrollTop;
  550. offset.left -= scrollLeft;
  551. $box.css({position: 'fixed'});
  552. } else {
  553. top = scrollTop;
  554. left = scrollLeft;
  555. $box.css({position: 'absolute'});
  556. }
  557. // keeps the top and left positions within the browser's viewport.
  558. if (settings.get('right') !== false) {
  559. left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.get('right'), 'x'), 0);
  560. } else if (settings.get('left') !== false) {
  561. left += setSize(settings.get('left'), 'x');
  562. } else {
  563. left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
  564. }
  565. if (settings.get('bottom') !== false) {
  566. top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.get('bottom'), 'y'), 0);
  567. } else if (settings.get('top') !== false) {
  568. top += setSize(settings.get('top'), 'y');
  569. } else {
  570. top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
  571. }
  572. $box.css({top: offset.top, left: offset.left, visibility:'visible'});
  573. // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
  574. // but it has to be shrank down around the size of div#colorbox when it's done. If not,
  575. // it can invoke an obscure IE bug when using iframes.
  576. $wrap[0].style.width = $wrap[0].style.height = "9999px";
  577. function modalDimensions() {
  578. $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt($box[0].style.width,10) - interfaceWidth)+'px';
  579. $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt($box[0].style.height,10) - interfaceHeight)+'px';
  580. }
  581. css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left};
  582. // setting the speed to 0 if the content hasn't changed size or position
  583. if (speed) {
  584. var tempSpeed = 0;
  585. $.each(css, function(i){
  586. if (css[i] !== previousCSS[i]) {
  587. tempSpeed = speed;
  588. return;
  589. }
  590. });
  591. speed = tempSpeed;
  592. }
  593. previousCSS = css;
  594. if (!speed) {
  595. $box.css(css);
  596. }
  597. $box.dequeue().animate(css, {
  598. duration: speed || 0,
  599. complete: function () {
  600. modalDimensions();
  601. active = false;
  602. // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
  603. $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
  604. $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
  605. if (settings.get('reposition')) {
  606. setTimeout(function () { // small delay before binding onresize due to an IE8 bug.
  607. $window.bind('resize.' + prefix, publicMethod.position);
  608. }, 1);
  609. }
  610. if ($.isFunction(loadedCallback)) {
  611. loadedCallback();
  612. }
  613. },
  614. step: modalDimensions
  615. });
  616. };
  617. publicMethod.resize = function (options) {
  618. var scrolltop;
  619. if (open) {
  620. options = options || {};
  621. if (options.width) {
  622. settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
  623. }
  624. if (options.innerWidth) {
  625. settings.w = setSize(options.innerWidth, 'x');
  626. }
  627. $loaded.css({width: settings.w});
  628. if (options.height) {
  629. settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
  630. }
  631. if (options.innerHeight) {
  632. settings.h = setSize(options.innerHeight, 'y');
  633. }
  634. if (!options.innerHeight && !options.height) {
  635. scrolltop = $loaded.scrollTop();
  636. $loaded.css({height: "auto"});
  637. settings.h = $loaded.height();
  638. }
  639. $loaded.css({height: settings.h});
  640. if(scrolltop) {
  641. $loaded.scrollTop(scrolltop);
  642. }
  643. publicMethod.position(settings.get('transition') === "none" ? 0 : settings.get('speed'));
  644. }
  645. };
  646. publicMethod.prep = function (object) {
  647. if (!open) {
  648. return;
  649. }
  650. var callback, speed = settings.get('transition') === "none" ? 0 : settings.get('speed');
  651. $loaded.remove();
  652. $loaded = $tag(div, 'LoadedContent').append(object);
  653. function getWidth() {
  654. settings.w = settings.w || $loaded.width();
  655. settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
  656. return settings.w;
  657. }
  658. function getHeight() {
  659. settings.h = settings.h || $loaded.height();
  660. settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
  661. return settings.h;
  662. }
  663. $loaded.hide()
  664. .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
  665. .css({width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden'})
  666. .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
  667. .prependTo($content);
  668. $loadingBay.hide();
  669. // 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.
  670. $(photo).css({'float': 'none'});
  671. setClass(settings.get('className'));
  672. callback = function () {
  673. var total = $related.length,
  674. iframe,
  675. complete;
  676. if (!open) {
  677. return;
  678. }
  679. function removeFilter() { // Needed for IE8 in versions of jQuery prior to 1.7.2
  680. if ($.support.opacity === false) {
  681. $box[0].style.removeAttribute('filter');
  682. }
  683. }
  684. complete = function () {
  685. clearTimeout(loadingTimer);
  686. $loadingOverlay.hide();
  687. trigger(event_complete);
  688. settings.get('onComplete');
  689. };
  690. $title.html(settings.get('title')).show();
  691. $loaded.show();
  692. if (total > 1) { // handle grouping
  693. if (typeof settings.get('current') === "string") {
  694. $current.html(settings.get('current').replace('{current}', index + 1).replace('{total}', total)).show();
  695. }
  696. $next[(settings.get('loop') || index < total - 1) ? "show" : "hide"]().html(settings.get('next'));
  697. $prev[(settings.get('loop') || index) ? "show" : "hide"]().html(settings.get('previous'));
  698. slideshow();
  699. // Preloads images within a rel group
  700. if (settings.get('preloading')) {
  701. $.each([getIndex(-1), getIndex(1)], function(){
  702. var img,
  703. i = $related[this],
  704. settings = new Settings(i, $.data(i, colorbox)),
  705. src = settings.get('href');
  706. if (src && isImage(settings, src)) {
  707. src = retinaUrl(settings, src);
  708. img = document.createElement('img');
  709. img.src = src;
  710. }
  711. });
  712. }
  713. } else {
  714. $groupControls.hide();
  715. }
  716. if (settings.get('iframe')) {
  717. iframe = settings.get('createIframe');
  718. if (!settings.get('scrolling')) {
  719. iframe.scrolling = "no";
  720. }
  721. $(iframe)
  722. .attr({
  723. src: settings.get('href'),
  724. 'class': prefix + 'Iframe'
  725. })
  726. .one('load', complete)
  727. .appendTo($loaded);
  728. $events.one(event_purge, function () {
  729. iframe.src = "//about:blank";
  730. });
  731. if (settings.get('fastIframe')) {
  732. $(iframe).trigger('load');
  733. }
  734. } else {
  735. complete();
  736. }
  737. if (settings.get('transition') === 'fade') {
  738. $box.fadeTo(speed, 1, removeFilter);
  739. } else {
  740. removeFilter();
  741. }
  742. };
  743. if (settings.get('transition') === 'fade') {
  744. $box.fadeTo(speed, 0, function () {
  745. publicMethod.position(0, callback);
  746. });
  747. } else {
  748. publicMethod.position(speed, callback);
  749. }
  750. };
  751. function load () {
  752. var href, setResize, prep = publicMethod.prep, $inline, request = ++requests;
  753. active = true;
  754. photo = false;
  755. trigger(event_purge);
  756. trigger(event_load);
  757. settings.get('onLoad');
  758. settings.h = settings.get('height') ?
  759. setSize(settings.get('height'), 'y') - loadedHeight - interfaceHeight :
  760. settings.get('innerHeight') && setSize(settings.get('innerHeight'), 'y');
  761. settings.w = settings.get('width') ?
  762. setSize(settings.get('width'), 'x') - loadedWidth - interfaceWidth :
  763. settings.get('innerWidth') && setSize(settings.get('innerWidth'), 'x');
  764. // Sets the minimum dimensions for use in image scaling
  765. settings.mw = settings.w;
  766. settings.mh = settings.h;
  767. // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
  768. // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
  769. if (settings.get('maxWidth')) {
  770. settings.mw = setSize(settings.get('maxWidth'), 'x') - loadedWidth - interfaceWidth;
  771. settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
  772. }
  773. if (settings.get('maxHeight')) {
  774. settings.mh = setSize(settings.get('maxHeight'), 'y') - loadedHeight - interfaceHeight;
  775. settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
  776. }
  777. href = settings.get('href');
  778. loadingTimer = setTimeout(function () {
  779. $loadingOverlay.show();
  780. }, 100);
  781. if (settings.get('inline')) {
  782. var $target = $(href).eq(0);
  783. // Inserts an empty placeholder where inline content is being pulled from.
  784. // An event is bound to put inline content back when Colorbox closes or loads new content.
  785. $inline = $('<div>').hide().insertBefore($target);
  786. $events.one(event_purge, function () {
  787. $inline.replaceWith($target);
  788. });
  789. prep($target);
  790. } else if (settings.get('iframe')) {
  791. // IFrame element won't be added to the DOM until it is ready to be displayed,
  792. // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
  793. prep(" ");
  794. } else if (settings.get('html')) {
  795. prep(settings.get('html'));
  796. } else if (isImage(settings, href)) {
  797. href = retinaUrl(settings, href);
  798. photo = settings.get('createImg');
  799. $(photo)
  800. .addClass(prefix + 'Photo')
  801. .bind('error.'+prefix,function () {
  802. prep($tag(div, 'Error').html(settings.get('imgError')));
  803. })
  804. .one('load', function () {
  805. if (request !== requests) {
  806. return;
  807. }
  808. // A small pause because some browsers will occasionally report a
  809. // img.width and img.height of zero immediately after the img.onload fires
  810. setTimeout(function(){
  811. var percent;
  812. if (settings.get('retinaImage') && window.devicePixelRatio > 1) {
  813. photo.height = photo.height / window.devicePixelRatio;
  814. photo.width = photo.width / window.devicePixelRatio;
  815. }
  816. if (settings.get('scalePhotos')) {
  817. setResize = function () {
  818. photo.height -= photo.height * percent;
  819. photo.width -= photo.width * percent;
  820. };
  821. if (settings.mw && photo.width > settings.mw) {
  822. percent = (photo.width - settings.mw) / photo.width;
  823. setResize();
  824. }
  825. if (settings.mh && photo.height > settings.mh) {
  826. percent = (photo.height - settings.mh) / photo.height;
  827. setResize();
  828. }
  829. }
  830. if (settings.h) {
  831. photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
  832. }
  833. if ($related[1] && (settings.get('loop') || $related[index + 1])) {
  834. photo.style.cursor = 'pointer';
  835. $(photo).bind('click.'+prefix, function () {
  836. publicMethod.next();
  837. });
  838. }
  839. photo.style.width = photo.width + 'px';
  840. photo.style.height = photo.height + 'px';
  841. prep(photo);
  842. }, 1);
  843. });
  844. photo.src = href;
  845. } else if (href) {
  846. $loadingBay.load(href, settings.get('data'), function (data, status) {
  847. if (request === requests) {
  848. prep(status === 'error' ? $tag(div, 'Error').html(settings.get('xhrError')) : $(this).contents());
  849. }
  850. });
  851. }
  852. }
  853. // Navigates to the next page/image in a set.
  854. publicMethod.next = function () {
  855. if (!active && $related[1] && (settings.get('loop') || $related[index + 1])) {
  856. index = getIndex(1);
  857. launch($related[index]);
  858. }
  859. };
  860. publicMethod.prev = function () {
  861. if (!active && $related[1] && (settings.get('loop') || index)) {
  862. index = getIndex(-1);
  863. launch($related[index]);
  864. }
  865. };
  866. // Note: to use this within an iframe use the following format: parent.jQuery.colorbox.close();
  867. publicMethod.close = function () {
  868. if (open && !closing) {
  869. closing = true;
  870. open = false;
  871. trigger(event_cleanup);
  872. settings.get('onCleanup');
  873. $window.unbind('.' + prefix);
  874. $overlay.fadeTo(settings.get('fadeOut') || 0, 0);
  875. $box.stop().fadeTo(settings.get('fadeOut') || 0, 0, function () {
  876. $box.hide();
  877. $overlay.hide();
  878. trigger(event_purge);
  879. $loaded.remove();
  880. setTimeout(function () {
  881. closing = false;
  882. trigger(event_closed);
  883. settings.get('onClosed');
  884. }, 1);
  885. });
  886. }
  887. };
  888. // Removes changes Colorbox made to the document, but does not remove the plugin.
  889. publicMethod.remove = function () {
  890. if (!$box) { return; }
  891. $box.stop();
  892. $[colorbox].close();
  893. $box.stop(false, true).remove();
  894. $overlay.remove();
  895. closing = false;
  896. $box = null;
  897. $('.' + boxElement)
  898. .removeData(colorbox)
  899. .removeClass(boxElement);
  900. $(document).unbind('click.'+prefix).unbind('keydown.'+prefix);
  901. };
  902. // A method for fetching the current element Colorbox is referencing.
  903. // returns a jQuery object.
  904. publicMethod.element = function () {
  905. return $(settings.el);
  906. };
  907. publicMethod.settings = defaults;
  908. }(jQuery, document, window));