Imported Upstream version 1.4.6
Agustin Henze
11 years ago
| 0 | 0 | ## About ColorBox: |
| 1 | 1 | A customizable lightbox plugin for jQuery. See the [project page](http://jacklmoore.com/colorbox/) for documentation and a demonstration, and the [FAQ](http://jacklmoore.com/colorbox/faq/) for solutions and examples to common issues. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php). |
| 2 | 2 | |
| 3 | ## Translations Welcome | |
| 4 | Send me your language configuration files. See /i18n/jquery.colorbox-de.js as an example. | |
| 5 | ||
| 3 | 6 | ## Changelog: |
| 7 | ||
| 8 | ### Version 1.4.6 - 2013/3/19 | |
| 9 | ||
| 10 | * Minor change to work around a jQuery 1.4.2 bug for legacy users. | |
| 11 | ||
| 12 | ### Version 1.4.5 - 2013/3/10 | |
| 13 | ||
| 14 | * Minor change to apply the close and className properties sooner. | |
| 15 | ||
| 16 | ### Version 1.4.4 - 2013/3/10 | |
| 17 | ||
| 18 | * Fixed an issue with percent-based heights in iOS | |
| 19 | * Fixed an issue with ajax requests being applied at the wrong time. | |
| 20 | ||
| 21 | ### Version 1.4.3 - 2013/2/18 | |
| 22 | ||
| 23 | * Made image preloading aware of retina settings. | |
| 24 | ||
| 25 | ### Version 1.4.2 - 2013/2/18 | |
| 26 | ||
| 27 | * Removed $.contains for compatibility with jQuery 1.3.x | |
| 28 | ||
| 29 | ### Version 1.4.1 - 2013/2/14 | |
| 30 | ||
| 31 | * Ignored left and right arrow keypresses if combined with the alt key. | |
| 32 | ||
| 33 | ### Version 1.4.0 - 2013/2/12 | |
| 34 | ||
| 35 | * Better accessibility: | |
| 36 | * Replaced div controls with buttons | |
| 37 | * Tabbed navigation confined to modal window | |
| 38 | * Added aria role | |
| 39 | ||
| 40 | ### Version 1.3.34 - 2013/2/4 | |
| 41 | ||
| 42 | * Updated manifest for plugins.jquery.com | |
| 43 | ||
| 44 | ### Version 1.3.33 - 2013/2/4 | |
| 45 | ||
| 46 | * Added retina display properties: retinaImage, retinaUrl, retinaSuffix | |
| 47 | * Fixed iframe scrolling on iOS devices. | |
| 48 | ||
| 49 | ### Version 1.3.32 - 2013/1/31 | |
| 50 | ||
| 51 | * Improved internal event subscribing & fixed event bug introduced in v1.3.21 | |
| 52 | ||
| 53 | ### Version 1.3.31 - 2013/1/28 | |
| 54 | ||
| 55 | * Fixed a size-calculation bug introduced in the previous commit. | |
| 56 | ||
| 57 | ### Version 1.3.30 - 2013/1/25 | |
| 58 | ||
| 59 | * Delayed border-width calculations until after opening, to avoid a bug in FF when using ColorBox in a hidden iframe. | |
| 60 | ||
| 61 | ### Version 1.3.29 - 2013/1/24 | |
| 62 | ||
| 63 | * Fixes bug with bubbling delegated events, introduced in the previous commit. | |
| 64 | ||
| 65 | ### Version 1.3.28 - 2013/1/24 | |
| 66 | ||
| 67 | * Fixed compatibility issue with old versions of jQuery (1.3.2-1.4.2) | |
| 68 | ||
| 69 | ### Version 1.3.27 - 2013/1/23 | |
| 70 | ||
| 71 | * Added className property. | |
| 72 | ||
| 73 | ### Version 1.3.26 - 2013/1/23 | |
| 74 | ||
| 75 | * Minor bugfix: clear the onload event handler after photo has loaded. | |
| 76 | ||
| 77 | ### Version 1.3.25 - 2013/1/23 | |
| 78 | ||
| 79 | * Removed grunt file & added Bower component.json. | |
| 80 | ||
| 81 | ### Version 1.3.24 - 2013/1/22 | |
| 82 | ||
| 83 | * Added generated files (jquery.colorbox.js / jquery.colorbox-min.js) back to the repository. | |
| 84 | ||
| 85 | ### Version 1.3.23 - 2013/1/18 | |
| 86 | ||
| 87 | * Minor bugfix for calling ColorBox on empty jQuery collections without a selector. | |
| 88 | ||
| 89 | ### Version 1.3.22 - 2013/1/17 | |
| 90 | ||
| 91 | * Recommit for plugins.jquery.com | |
| 92 | ||
| 93 | ### Version 1.3.21 - 2013/1/15 | |
| 94 | Files Changed: *.js | |
| 95 | ||
| 96 | * Fixed compatability issues with jQuery 1.9 | |
| 4 | 97 | |
| 5 | 98 | ### Version 1.3.20 - August 15 2012 |
| 6 | 99 | Files Changed:jquery.colorbox.js |
| 0 | // ColorBox v1.3.20.1 - jQuery lightbox plugin | |
| 1 | // (c) 2012 Jack Moore - jacklmoore.com | |
| 2 | // License: http://www.opensource.org/licenses/mit-license.php | |
| 3 | (function(e,t,n){function G(n,r,i){var o=t.createElement(n);return r&&(o.id=s+r),i&&(o.style.cssText=i),e(o)}function Y(e){var t=T.length,n=(U+e)%t;return n<0?t+n:n}function Z(e,t){return Math.round((/%/.test(e)?(t==="x"?tt():nt())/100:1)*parseInt(e,10))}function et(e){return B.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(e)}function tt(){return n.innerWidth||N.width()}function nt(){return n.innerHeight||N.height()}function rt(){var t,n=e.data(R,i);n==null?(B=e.extend({},r),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},n);for(t in B)e.isFunction(B[t])&&t.slice(0,2)!=="on"&&(B[t]=B[t].call(R));B.rel=B.rel||R.rel||"nofollow",B.href=B.href||e(R).attr("href"),B.title=B.title||R.title,typeof B.href=="string"&&(B.href=e.trim(B.href))}function it(t,n){e.event.trigger(t),n&&n.call(R)}function st(){var e,t=s+"Slideshow_",n="click."+s,r,i,o;B.slideshow&&T[1]?(r=function(){M.text(B.slideshowStop).unbind(n).bind(f,function(){if(B.loop||T[U+1])e=setTimeout(J.next,B.slideshowSpeed)}).bind(a,function(){clearTimeout(e)}).one(n+" "+l,i),g.removeClass(t+"off").addClass(t+"on"),e=setTimeout(J.next,B.slideshowSpeed)},i=function(){clearTimeout(e),M.text(B.slideshowStart).unbind([f,a,l,n].join(" ")).one(n,function(){J.next(),r()}),g.removeClass(t+"on").addClass(t+"off")},B.slideshowAuto?r():i()):g.removeClass(t+"off "+t+"on")}function ot(t){V||(R=t,rt(),T=e(R),U=0,B.rel!=="nofollow"&&(T=e("."+o).filter(function(){var t=e.data(this,i),n;return t&&(n=t.rel||this.rel),n===B.rel}),U=T.index(R),U===-1&&(T=T.add(R),U=T.length-1)),W||(W=X=!0,g.show(),B.returnFocus&&e(R).blur().one(c,function(){e(this).focus()}),m.css({opacity:+B.opacity,cursor:B.overlayClose?"pointer":"auto"}).show(),B.w=Z(B.initialWidth,"x"),B.h=Z(B.initialHeight,"y"),J.position(),d&&N.bind("resize."+v+" scroll."+v,function(){m.css({width:tt(),height:nt(),top:N.scrollTop(),left:N.scrollLeft()})}).trigger("resize."+v),it(u,B.onOpen),H.add(A).hide(),P.html(B.close).show()),J.load(!0))}function ut(){!g&&t.body&&(Q=!1,N=e(n),g=G(K).attr({id:i,"class":p?s+(d?"IE6":"IE"):""}).hide(),m=G(K,"Overlay",d?"position:absolute":"").hide(),L=G(K,"LoadingOverlay").add(G(K,"LoadingGraphic")),y=G(K,"Wrapper"),b=G(K,"Content").append(C=G(K,"LoadedContent","width:0; height:0; overflow:hidden"),A=G(K,"Title"),O=G(K,"Current"),_=G(K,"Next"),D=G(K,"Previous"),M=G(K,"Slideshow").bind(u,st),P=G(K,"Close")),y.append(G(K).append(G(K,"TopLeft"),w=G(K,"TopCenter"),G(K,"TopRight")),G(K,!1,"clear:left").append(E=G(K,"MiddleLeft"),b,S=G(K,"MiddleRight")),G(K,!1,"clear:left").append(G(K,"BottomLeft"),x=G(K,"BottomCenter"),G(K,"BottomRight"))).find("div div").css({"float":"left"}),k=G(K,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),H=_.add(D).add(O).add(M),e(t.body).append(m,g.append(y,k)))}function at(){return g?(Q||(Q=!0,j=w.height()+x.height()+b.outerHeight(!0)-b.height(),F=E.width()+S.width()+b.outerWidth(!0)-b.width(),I=C.outerHeight(!0),q=C.outerWidth(!0),g.css({"padding-bottom":j,"padding-right":F}),_.click(function(){J.next()}),D.click(function(){J.prev()}),P.click(function(){J.close()}),m.click(function(){B.overlayClose&&J.close()}),e(t).bind("keydown."+s,function(e){var t=e.keyCode;W&&B.escKey&&t===27&&(e.preventDefault(),J.close()),W&&B.arrowKey&&T[1]&&(t===37?(e.preventDefault(),D.click()):t===39&&(e.preventDefault(),_.click()))}),e("."+o,t).live("click",function(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),ot(this))})),!0):!1}var r={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,inline:!1,html:!1,iframe:!1,fastIframe:!0,photo:!1,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",open:!1,returnFocus:!0,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:undefined},i="colorbox",s="cbox",o=s+"Element",u=s+"_open",a=s+"_load",f=s+"_complete",l=s+"_cleanup",c=s+"_closed",h=s+"_purge",p=!e.support.opacity&&!e.support.style,d=p&&!n.XMLHttpRequest,v=s+"_IE6",m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D,P,H,B,j,F,I,q,R,U,z,W,X,V,$,J,K="div",Q;if(e.colorbox)return;e(ut),J=e.fn[i]=e[i]=function(t,n){var s=this;t=t||{},ut();if(at()){if(!s[0]){if(s.selector)return s;s=e("<a/>"),t.open=!0}n&&(t.onComplete=n),s.each(function(){e.data(this,i,e.extend({},e.data(this,i)||r,t))}).addClass(o),(e.isFunction(t.open)&&t.open.call(s)||t.open)&&ot(s[0])}return s},J.position=function(e,t){function f(e){w[0].style.width=x[0].style.width=b[0].style.width=e.style.width,b[0].style.height=E[0].style.height=S[0].style.height=e.style.height}var n,r=0,i=0,o=g.offset(),u,a;N.unbind("resize."+s),g.css({top:-9e4,left:-9e4}),u=N.scrollTop(),a=N.scrollLeft(),B.fixed&&!d?(o.top-=u,o.left-=a,g.css({position:"fixed"})):(r=u,i=a,g.css({position:"absolute"})),B.right!==!1?i+=Math.max(tt()-B.w-q-F-Z(B.right,"x"),0):B.left!==!1?i+=Z(B.left,"x"):i+=Math.round(Math.max(tt()-B.w-q-F,0)/2),B.bottom!==!1?r+=Math.max(nt()-B.h-I-j-Z(B.bottom,"y"),0):B.top!==!1?r+=Z(B.top,"y"):r+=Math.round(Math.max(nt()-B.h-I-j,0)/2),g.css({top:o.top,left:o.left}),e=g.width()===B.w+q&&g.height()===B.h+I?0:e||0,y[0].style.width=y[0].style.height="9999px",n={width:B.w+q,height:B.h+I,top:r,left:i},e===0&&g.css(n),g.dequeue().animate(n,{duration:e,complete:function(){f(this),X=!1,y[0].style.width=B.w+q+F+"px",y[0].style.height=B.h+I+j+"px",B.reposition&&setTimeout(function(){N.bind("resize."+s,J.position)},1),t&&t()},step:function(){f(this)}})},J.resize=function(e){W&&(e=e||{},e.width&&(B.w=Z(e.width,"x")-q-F),e.innerWidth&&(B.w=Z(e.innerWidth,"x")),C.css({width:B.w}),e.height&&(B.h=Z(e.height,"y")-I-j),e.innerHeight&&(B.h=Z(e.innerHeight,"y")),!e.innerHeight&&!e.height&&(C.css({height:"auto"}),B.h=C.height()),C.css({height:B.h}),J.position(B.transition==="none"?0:B.speed))},J.prep=function(t){function o(){return B.w=B.w||C.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function u(){return B.h=B.h||C.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(!W)return;var n,r=B.transition==="none"?0:B.speed;C.remove(),C=G(K,"LoadedContent").append(t),C.hide().appendTo(k.show()).css({width:o(),overflow:B.scrolling?"auto":"hidden"}).css({height:u()}).prependTo(b),k.hide(),e(z).css({"float":"none"}),d&&e("select").not(g.find("select")).filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one(l,function(){this.style.visibility="inherit"}),n=function(){function y(){p&&g[0].style.removeAttribute("filter")}var t,n,o=T.length,u,a="frameBorder",l="allowTransparency",c,d,v,m;if(!W)return;c=function(){clearTimeout($),L.detach().hide(),it(f,B.onComplete)},p&&z&&C.fadeIn(100),A.html(B.title).add(C).show();if(o>1){typeof B.current=="string"&&O.html(B.current.replace("{current}",U+1).replace("{total}",o)).show(),_[B.loop||U<o-1?"show":"hide"]().html(B.next),D[B.loop||U?"show":"hide"]().html(B.previous),B.slideshow&&M.show();if(B.preloading){t=[Y(-1),Y(1)];while(n=T[t.pop()])m=e.data(n,i),m&&m.href?(d=m.href,e.isFunction(d)&&(d=d.call(n))):d=n.href,et(d)&&(v=new Image,v.src=d)}}else H.hide();B.iframe?(u=G("iframe")[0],a in u&&(u[a]=0),l in u&&(u[l]="true"),u.name=s+ +(new Date),B.fastIframe?c():e(u).one("load",c),u.src=B.href,B.scrolling||(u.scrolling="no"),e(u).addClass(s+"Iframe").appendTo(C).one(h,function(){u.src="//about:blank"})):c(),B.transition==="fade"?g.fadeTo(r,1,y):y()},B.transition==="fade"?g.fadeTo(r,0,function(){J.position(0,n)}):J.position(r,n)},J.load=function(t){var n,r,i=J.prep;X=!0,z=!1,R=T[U],t||rt(),it(h),it(a,B.onLoad),B.h=B.height?Z(B.height,"y")-I-j:B.innerHeight&&Z(B.innerHeight,"y"),B.w=B.width?Z(B.width,"x")-q-F:B.innerWidth&&Z(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=Z(B.maxWidth,"x")-q-F,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=Z(B.maxHeight,"y")-I-j,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,$=setTimeout(function(){L.show().appendTo(b)},100),B.inline?(G(K).hide().insertBefore(e(n)[0]).one(h,function(){e(this).replaceWith(C.children())}),i(e(n))):B.iframe?i(" "):B.html?i(B.html):et(n)?(e(z=new Image).addClass(s+"Photo").error(function(){B.title=!1,i(G(K,"Error").html(B.imgError))}).load(function(){var e;z.onload=null,B.scalePhotos&&(r=function(){z.height-=z.height*e,z.width-=z.width*e},B.mw&&z.width>B.mw&&(e=(z.width-B.mw)/z.width,r()),B.mh&&z.height>B.mh&&(e=(z.height-B.mh)/z.height,r())),B.h&&(z.style.marginTop=Math.max(B.h-z.height,0)/2+"px"),T[1]&&(B.loop||T[U+1])&&(z.style.cursor="pointer",z.onclick=function(){J.next()}),p&&(z.style.msInterpolationMode="bicubic"),setTimeout(function(){i(z)},1)}),setTimeout(function(){z.src=n},1)):n&&k.load(n,B.data,function(t,n,r){i(n==="error"?G(K,"Error").html(B.xhrError):e(this).contents())})},J.next=function(){!X&&T[1]&&(B.loop||T[U+1])&&(U=Y(1),J.load())},J.prev=function(){!X&&T[1]&&(B.loop||U)&&(U=Y(-1),J.load())},J.close=function(){W&&!V&&(V=!0,W=!1,it(l,B.onCleanup),N.unbind("."+s+" ."+v),m.fadeTo(200,0),g.stop().fadeTo(300,0,function(){g.add(m).css({opacity:1,cursor:"auto"}).hide(),it(h),C.remove(),setTimeout(function(){V=!1,it(c,B.onClosed)},1)}))},J.remove=function(){e([]).add(g).add(m).remove(),g=null,e("."+o).removeData(i).removeClass(o).die()},J.element=function(){return e(R)},J.settings=r})(jQuery,document,this);⏎ |
| 0 | // ColorBox v1.3.20.1 - jQuery lightbox plugin | |
| 1 | // (c) 2012 Jack Moore - jacklmoore.com | |
| 2 | // License: http://www.opensource.org/licenses/mit-license.php | |
| 3 | (function ($, document, window) { | |
| 4 | var | |
| 5 | // Default settings object. | |
| 6 | // See http://jacklmoore.com/colorbox for details. | |
| 7 | defaults = { | |
| 8 | transition: "elastic", | |
| 9 | speed: 300, | |
| 10 | width: false, | |
| 11 | initialWidth: "600", | |
| 12 | innerWidth: false, | |
| 13 | maxWidth: false, | |
| 14 | height: false, | |
| 15 | initialHeight: "450", | |
| 16 | innerHeight: false, | |
| 17 | maxHeight: false, | |
| 18 | scalePhotos: true, | |
| 19 | scrolling: true, | |
| 20 | inline: false, | |
| 21 | html: false, | |
| 22 | iframe: false, | |
| 23 | fastIframe: true, | |
| 24 | photo: false, | |
| 25 | href: false, | |
| 26 | title: false, | |
| 27 | rel: false, | |
| 28 | opacity: 0.9, | |
| 29 | preloading: true, | |
| 30 | ||
| 31 | current: "image {current} of {total}", | |
| 32 | previous: "previous", | |
| 33 | next: "next", | |
| 34 | close: "close", | |
| 35 | xhrError: "This content failed to load.", | |
| 36 | imgError: "This image failed to load.", | |
| 37 | ||
| 38 | open: false, | |
| 39 | returnFocus: true, | |
| 40 | reposition: true, | |
| 41 | loop: true, | |
| 42 | slideshow: false, | |
| 43 | slideshowAuto: true, | |
| 44 | slideshowSpeed: 2500, | |
| 45 | slideshowStart: "start slideshow", | |
| 46 | slideshowStop: "stop slideshow", | |
| 47 | onOpen: false, | |
| 48 | onLoad: false, | |
| 49 | onComplete: false, | |
| 50 | onCleanup: false, | |
| 51 | onClosed: false, | |
| 52 | overlayClose: true, | |
| 53 | escKey: true, | |
| 54 | arrowKey: true, | |
| 55 | top: false, | |
| 56 | bottom: false, | |
| 57 | left: false, | |
| 58 | right: false, | |
| 59 | fixed: false, | |
| 60 | data: undefined | |
| 61 | }, | |
| 62 | ||
| 63 | // Abstracting the HTML and event identifiers for easy rebranding | |
| 64 | colorbox = 'colorbox', | |
| 65 | prefix = 'cbox', | |
| 66 | boxElement = prefix + 'Element', | |
| 67 | ||
| 68 | // Events | |
| 69 | event_open = prefix + '_open', | |
| 70 | event_load = prefix + '_load', | |
| 71 | event_complete = prefix + '_complete', | |
| 72 | event_cleanup = prefix + '_cleanup', | |
| 73 | event_closed = prefix + '_closed', | |
| 74 | event_purge = prefix + '_purge', | |
| 75 | ||
| 76 | // Special Handling for IE | |
| 77 | isIE = !$.support.opacity && !$.support.style, // IE7 & IE8 | |
| 78 | isIE6 = isIE && !window.XMLHttpRequest, // IE6 | |
| 79 | event_ie6 = prefix + '_IE6', | |
| 80 | ||
| 81 | // Cached jQuery Object Variables | |
| 82 | $overlay, | |
| 83 | $box, | |
| 84 | $wrap, | |
| 85 | $content, | |
| 86 | $topBorder, | |
| 87 | $leftBorder, | |
| 88 | $rightBorder, | |
| 89 | $bottomBorder, | |
| 90 | $related, | |
| 91 | $window, | |
| 92 | $loaded, | |
| 93 | $loadingBay, | |
| 94 | $loadingOverlay, | |
| 95 | $title, | |
| 96 | $current, | |
| 97 | $slideshow, | |
| 98 | $next, | |
| 99 | $prev, | |
| 100 | $close, | |
| 101 | $groupControls, | |
| 102 | ||
| 103 | // Variables for cached values or use across multiple functions | |
| 104 | settings, | |
| 105 | interfaceHeight, | |
| 106 | interfaceWidth, | |
| 107 | loadedHeight, | |
| 108 | loadedWidth, | |
| 109 | element, | |
| 110 | index, | |
| 111 | photo, | |
| 112 | open, | |
| 113 | active, | |
| 114 | closing, | |
| 115 | loadingTimer, | |
| 116 | publicMethod, | |
| 117 | div = "div", | |
| 118 | init; | |
| 119 | ||
| 120 | // **************** | |
| 121 | // HELPER FUNCTIONS | |
| 122 | // **************** | |
| 123 | ||
| 124 | // Convience function for creating new jQuery objects | |
| 125 | function $tag(tag, id, css) { | |
| 126 | var element = document.createElement(tag); | |
| 127 | ||
| 128 | if (id) { | |
| 129 | element.id = prefix + id; | |
| 130 | } | |
| 131 | ||
| 132 | if (css) { | |
| 133 | element.style.cssText = css; | |
| 134 | } | |
| 135 | ||
| 136 | return $(element); | |
| 137 | } | |
| 138 | ||
| 139 | // Determine the next and previous members in a group. | |
| 140 | function getIndex(increment) { | |
| 141 | var | |
| 142 | max = $related.length, | |
| 143 | newIndex = (index + increment) % max; | |
| 144 | ||
| 145 | return (newIndex < 0) ? max + newIndex : newIndex; | |
| 146 | } | |
| 147 | ||
| 148 | // Convert '%' and 'px' values to integers | |
| 149 | function setSize(size, dimension) { | |
| 150 | return Math.round((/%/.test(size) ? ((dimension === 'x' ? winWidth() : winHeight()) / 100) : 1) * parseInt(size, 10)); | |
| 151 | } | |
| 152 | ||
| 153 | // Checks an href to see if it is a photo. | |
| 154 | // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex. | |
| 155 | function isImage(url) { | |
| 156 | return settings.photo || /\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(url); | |
| 157 | } | |
| 158 | ||
| 159 | function winWidth() { | |
| 160 | // $(window).width() is incorrect for some mobile browsers, but | |
| 161 | // window.innerWidth is unsupported in IE8 and lower. | |
| 162 | return window.innerWidth || $window.width(); | |
| 163 | } | |
| 164 | ||
| 165 | function winHeight() { | |
| 166 | return window.innerHeight || $window.height(); | |
| 167 | } | |
| 168 | ||
| 169 | // Assigns function results to their respective properties | |
| 170 | function makeSettings() { | |
| 171 | var i, | |
| 172 | data = $.data(element, colorbox); | |
| 173 | ||
| 174 | if (data == null) { | |
| 175 | settings = $.extend({}, defaults); | |
| 176 | if (console && console.log) { | |
| 177 | console.log('Error: cboxElement missing settings object'); | |
| 178 | } | |
| 179 | } else { | |
| 180 | settings = $.extend({}, data); | |
| 181 | } | |
| 182 | ||
| 183 | for (i in settings) { | |
| 184 | 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. | |
| 185 | settings[i] = settings[i].call(element); | |
| 186 | } | |
| 187 | } | |
| 188 | ||
| 189 | settings.rel = settings.rel || element.rel || 'nofollow'; | |
| 190 | settings.href = settings.href || $(element).attr('href'); | |
| 191 | settings.title = settings.title || element.title; | |
| 192 | ||
| 193 | if (typeof settings.href === "string") { | |
| 194 | settings.href = $.trim(settings.href); | |
| 195 | } | |
| 196 | } | |
| 197 | ||
| 198 | function trigger(event, callback) { | |
| 199 | $.event.trigger(event); | |
| 200 | if (callback) { | |
| 201 | callback.call(element); | |
| 202 | } | |
| 203 | } | |
| 204 | ||
| 205 | // Slideshow functionality | |
| 206 | function slideshow() { | |
| 207 | var | |
| 208 | timeOut, | |
| 209 | className = prefix + "Slideshow_", | |
| 210 | click = "click." + prefix, | |
| 211 | start, | |
| 212 | stop, | |
| 213 | clear; | |
| 214 | ||
| 215 | if (settings.slideshow && $related[1]) { | |
| 216 | start = function () { | |
| 217 | $slideshow | |
| 218 | .text(settings.slideshowStop) | |
| 219 | .unbind(click) | |
| 220 | .bind(event_complete, function () { | |
| 221 | if (settings.loop || $related[index + 1]) { | |
| 222 | timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed); | |
| 223 | } | |
| 224 | }) | |
| 225 | .bind(event_load, function () { | |
| 226 | clearTimeout(timeOut); | |
| 227 | }) | |
| 228 | .one(click + ' ' + event_cleanup, stop); | |
| 229 | $box.removeClass(className + "off").addClass(className + "on"); | |
| 230 | timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed); | |
| 231 | }; | |
| 232 | ||
| 233 | stop = function () { | |
| 234 | clearTimeout(timeOut); | |
| 235 | $slideshow | |
| 236 | .text(settings.slideshowStart) | |
| 237 | .unbind([event_complete, event_load, event_cleanup, click].join(' ')) | |
| 238 | .one(click, function () { | |
| 239 | publicMethod.next(); | |
| 240 | start(); | |
| 241 | }); | |
| 242 | $box.removeClass(className + "on").addClass(className + "off"); | |
| 243 | }; | |
| 244 | ||
| 245 | if (settings.slideshowAuto) { | |
| 246 | start(); | |
| 247 | } else { | |
| 248 | stop(); | |
| 249 | } | |
| 250 | } else { | |
| 251 | $box.removeClass(className + "off " + className + "on"); | |
| 252 | } | |
| 253 | } | |
| 254 | ||
| 255 | function launch(target) { | |
| 256 | if (!closing) { | |
| 257 | ||
| 258 | element = target; | |
| 259 | ||
| 260 | makeSettings(); | |
| 261 | ||
| 262 | $related = $(element); | |
| 263 | ||
| 264 | index = 0; | |
| 265 | ||
| 266 | if (settings.rel !== 'nofollow') { | |
| 267 | $related = $('.' + boxElement).filter(function () { | |
| 268 | var data = $.data(this, colorbox), | |
| 269 | relRelated; | |
| 270 | ||
| 271 | if (data) { | |
| 272 | relRelated = data.rel || this.rel; | |
| 273 | } | |
| 274 | ||
| 275 | return (relRelated === settings.rel); | |
| 276 | }); | |
| 277 | index = $related.index(element); | |
| 278 | ||
| 279 | // Check direct calls to ColorBox. | |
| 280 | if (index === -1) { | |
| 281 | $related = $related.add(element); | |
| 282 | index = $related.length - 1; | |
| 283 | } | |
| 284 | } | |
| 285 | ||
| 286 | if (!open) { | |
| 287 | open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. | |
| 288 | ||
| 289 | $box.show(); | |
| 290 | ||
| 291 | if (settings.returnFocus) { | |
| 292 | $(element).blur().one(event_closed, function () { | |
| 293 | $(this).focus(); | |
| 294 | }); | |
| 295 | } | |
| 296 | ||
| 297 | // +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5' | |
| 298 | $overlay.css({"opacity": +settings.opacity, "cursor": settings.overlayClose ? "pointer" : "auto"}).show(); | |
| 299 | ||
| 300 | // Opens inital empty ColorBox prior to content being loaded. | |
| 301 | settings.w = setSize(settings.initialWidth, 'x'); | |
| 302 | settings.h = setSize(settings.initialHeight, 'y'); | |
| 303 | publicMethod.position(); | |
| 304 | ||
| 305 | if (isIE6) { | |
| 306 | $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () { | |
| 307 | $overlay.css({width: winWidth(), height: winHeight(), top: $window.scrollTop(), left: $window.scrollLeft()}); | |
| 308 | }).trigger('resize.' + event_ie6); | |
| 309 | } | |
| 310 | ||
| 311 | trigger(event_open, settings.onOpen); | |
| 312 | ||
| 313 | $groupControls.add($title).hide(); | |
| 314 | ||
| 315 | $close.html(settings.close).show(); | |
| 316 | } | |
| 317 | ||
| 318 | publicMethod.load(true); | |
| 319 | } | |
| 320 | } | |
| 321 | ||
| 322 | // ColorBox's markup needs to be added to the DOM prior to being called | |
| 323 | // so that the browser will go ahead and load the CSS background images. | |
| 324 | function appendHTML() { | |
| 325 | if (!$box && document.body) { | |
| 326 | init = false; | |
| 327 | ||
| 328 | $window = $(window); | |
| 329 | $box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide(); | |
| 330 | $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide(); | |
| 331 | $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")); | |
| 332 | $wrap = $tag(div, "Wrapper"); | |
| 333 | $content = $tag(div, "Content").append( | |
| 334 | $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'), | |
| 335 | $title = $tag(div, "Title"), | |
| 336 | $current = $tag(div, "Current"), | |
| 337 | $next = $tag(div, "Next"), | |
| 338 | $prev = $tag(div, "Previous"), | |
| 339 | $slideshow = $tag(div, "Slideshow").bind(event_open, slideshow), | |
| 340 | $close = $tag(div, "Close") | |
| 341 | ); | |
| 342 | ||
| 343 | $wrap.append( // The 3x3 Grid that makes up ColorBox | |
| 344 | $tag(div).append( | |
| 345 | $tag(div, "TopLeft"), | |
| 346 | $topBorder = $tag(div, "TopCenter"), | |
| 347 | $tag(div, "TopRight") | |
| 348 | ), | |
| 349 | $tag(div, false, 'clear:left').append( | |
| 350 | $leftBorder = $tag(div, "MiddleLeft"), | |
| 351 | $content, | |
| 352 | $rightBorder = $tag(div, "MiddleRight") | |
| 353 | ), | |
| 354 | $tag(div, false, 'clear:left').append( | |
| 355 | $tag(div, "BottomLeft"), | |
| 356 | $bottomBorder = $tag(div, "BottomCenter"), | |
| 357 | $tag(div, "BottomRight") | |
| 358 | ) | |
| 359 | ).find('div div').css({'float': 'left'}); | |
| 360 | ||
| 361 | $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none'); | |
| 362 | ||
| 363 | $groupControls = $next.add($prev).add($current).add($slideshow); | |
| 364 | ||
| 365 | $(document.body).append($overlay, $box.append($wrap, $loadingBay)); | |
| 366 | } | |
| 367 | } | |
| 368 | ||
| 369 | // Add ColorBox's event bindings | |
| 370 | function addBindings() { | |
| 371 | if ($box) { | |
| 372 | if (!init) { | |
| 373 | init = true; | |
| 374 | ||
| 375 | // Cache values needed for size calculations | |
| 376 | interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6 | |
| 377 | interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); | |
| 378 | loadedHeight = $loaded.outerHeight(true); | |
| 379 | loadedWidth = $loaded.outerWidth(true); | |
| 380 | ||
| 381 | // Setting padding to remove the need to do size conversions during the animation step. | |
| 382 | $box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}); | |
| 383 | ||
| 384 | // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly. | |
| 385 | $next.click(function () { | |
| 386 | publicMethod.next(); | |
| 387 | }); | |
| 388 | $prev.click(function () { | |
| 389 | publicMethod.prev(); | |
| 390 | }); | |
| 391 | $close.click(function () { | |
| 392 | publicMethod.close(); | |
| 393 | }); | |
| 394 | $overlay.click(function () { | |
| 395 | if (settings.overlayClose) { | |
| 396 | publicMethod.close(); | |
| 397 | } | |
| 398 | }); | |
| 399 | ||
| 400 | // Key Bindings | |
| 401 | $(document).bind('keydown.' + prefix, function (e) { | |
| 402 | var key = e.keyCode; | |
| 403 | if (open && settings.escKey && key === 27) { | |
| 404 | e.preventDefault(); | |
| 405 | publicMethod.close(); | |
| 406 | } | |
| 407 | if (open && settings.arrowKey && $related[1]) { | |
| 408 | if (key === 37) { | |
| 409 | e.preventDefault(); | |
| 410 | $prev.click(); | |
| 411 | } else if (key === 39) { | |
| 412 | e.preventDefault(); | |
| 413 | $next.click(); | |
| 414 | } | |
| 415 | } | |
| 416 | }); | |
| 417 | ||
| 418 | $('.' + boxElement, document).live('click', function (e) { | |
| 419 | // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt. | |
| 420 | // See: http://jacklmoore.com/notes/click-events/ | |
| 421 | if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) { | |
| 422 | e.preventDefault(); | |
| 423 | launch(this); | |
| 424 | } | |
| 425 | }); | |
| 426 | } | |
| 427 | return true; | |
| 428 | } | |
| 429 | return false; | |
| 430 | } | |
| 431 | ||
| 432 | // Don't do anything if ColorBox already exists. | |
| 433 | if ($.colorbox) { | |
| 434 | return; | |
| 435 | } | |
| 436 | ||
| 437 | // Append the HTML when the DOM loads | |
| 438 | $(appendHTML); | |
| 439 | ||
| 440 | ||
| 441 | // **************** | |
| 442 | // PUBLIC FUNCTIONS | |
| 443 | // Usage format: $.fn.colorbox.close(); | |
| 444 | // Usage from within an iframe: parent.$.fn.colorbox.close(); | |
| 445 | // **************** | |
| 446 | ||
| 447 | publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) { | |
| 448 | var $this = this; | |
| 449 | ||
| 450 | options = options || {}; | |
| 451 | ||
| 452 | appendHTML(); | |
| 453 | ||
| 454 | if (addBindings()) { | |
| 455 | if (!$this[0]) { | |
| 456 | if ($this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit. | |
| 457 | return $this; | |
| 458 | } | |
| 459 | // if no selector was given (ie. $.colorbox()), create a temporary element to work with | |
| 460 | $this = $('<a/>'); | |
| 461 | options.open = true; // assume an immediate open | |
| 462 | } | |
| 463 | ||
| 464 | if (callback) { | |
| 465 | options.onComplete = callback; | |
| 466 | } | |
| 467 | ||
| 468 | $this.each(function () { | |
| 469 | $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options)); | |
| 470 | }).addClass(boxElement); | |
| 471 | ||
| 472 | if (($.isFunction(options.open) && options.open.call($this)) || options.open) { | |
| 473 | launch($this[0]); | |
| 474 | } | |
| 475 | } | |
| 476 | ||
| 477 | return $this; | |
| 478 | }; | |
| 479 | ||
| 480 | publicMethod.position = function (speed, loadedCallback) { | |
| 481 | var | |
| 482 | css, | |
| 483 | top = 0, | |
| 484 | left = 0, | |
| 485 | offset = $box.offset(), | |
| 486 | scrollTop, | |
| 487 | scrollLeft; | |
| 488 | ||
| 489 | $window.unbind('resize.' + prefix); | |
| 490 | ||
| 491 | // remove the modal so that it doesn't influence the document width/height | |
| 492 | $box.css({top: -9e4, left: -9e4}); | |
| 493 | ||
| 494 | scrollTop = $window.scrollTop(); | |
| 495 | scrollLeft = $window.scrollLeft(); | |
| 496 | ||
| 497 | if (settings.fixed && !isIE6) { | |
| 498 | offset.top -= scrollTop; | |
| 499 | offset.left -= scrollLeft; | |
| 500 | $box.css({position: 'fixed'}); | |
| 501 | } else { | |
| 502 | top = scrollTop; | |
| 503 | left = scrollLeft; | |
| 504 | $box.css({position: 'absolute'}); | |
| 505 | } | |
| 506 | ||
| 507 | // keeps the top and left positions within the browser's viewport. | |
| 508 | if (settings.right !== false) { | |
| 509 | left += Math.max(winWidth() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0); | |
| 510 | } else if (settings.left !== false) { | |
| 511 | left += setSize(settings.left, 'x'); | |
| 512 | } else { | |
| 513 | left += Math.round(Math.max(winWidth() - settings.w - loadedWidth - interfaceWidth, 0) / 2); | |
| 514 | } | |
| 515 | ||
| 516 | if (settings.bottom !== false) { | |
| 517 | top += Math.max(winHeight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0); | |
| 518 | } else if (settings.top !== false) { | |
| 519 | top += setSize(settings.top, 'y'); | |
| 520 | } else { | |
| 521 | top += Math.round(Math.max(winHeight() - settings.h - loadedHeight - interfaceHeight, 0) / 2); | |
| 522 | } | |
| 523 | ||
| 524 | $box.css({top: offset.top, left: offset.left}); | |
| 525 | ||
| 526 | // setting the speed to 0 to reduce the delay between same-sized content. | |
| 527 | speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0; | |
| 528 | ||
| 529 | // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, | |
| 530 | // but it has to be shrank down around the size of div#colorbox when it's done. If not, | |
| 531 | // it can invoke an obscure IE bug when using iframes. | |
| 532 | $wrap[0].style.width = $wrap[0].style.height = "9999px"; | |
| 533 | ||
| 534 | function modalDimensions(that) { | |
| 535 | $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width; | |
| 536 | $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height; | |
| 537 | } | |
| 538 | ||
| 539 | css = {width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: top, left: left}; | |
| 540 | if(speed===0){ // temporary workaround to side-step jQuery-UI 1.8 bug (http://bugs.jquery.com/ticket/12273) | |
| 541 | $box.css(css); | |
| 542 | } | |
| 543 | $box.dequeue().animate(css, { | |
| 544 | duration: speed, | |
| 545 | complete: function () { | |
| 546 | modalDimensions(this); | |
| 547 | ||
| 548 | active = false; | |
| 549 | ||
| 550 | // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. | |
| 551 | $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px"; | |
| 552 | $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px"; | |
| 553 | ||
| 554 | if (settings.reposition) { | |
| 555 | setTimeout(function () { // small delay before binding onresize due to an IE8 bug. | |
| 556 | $window.bind('resize.' + prefix, publicMethod.position); | |
| 557 | }, 1); | |
| 558 | } | |
| 559 | ||
| 560 | if (loadedCallback) { | |
| 561 | loadedCallback(); | |
| 562 | } | |
| 563 | }, | |
| 564 | step: function () { | |
| 565 | modalDimensions(this); | |
| 566 | } | |
| 567 | }); | |
| 568 | }; | |
| 569 | ||
| 570 | publicMethod.resize = function (options) { | |
| 571 | if (open) { | |
| 572 | options = options || {}; | |
| 573 | ||
| 574 | if (options.width) { | |
| 575 | settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth; | |
| 576 | } | |
| 577 | if (options.innerWidth) { | |
| 578 | settings.w = setSize(options.innerWidth, 'x'); | |
| 579 | } | |
| 580 | $loaded.css({width: settings.w}); | |
| 581 | ||
| 582 | if (options.height) { | |
| 583 | settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight; | |
| 584 | } | |
| 585 | if (options.innerHeight) { | |
| 586 | settings.h = setSize(options.innerHeight, 'y'); | |
| 587 | } | |
| 588 | if (!options.innerHeight && !options.height) { | |
| 589 | $loaded.css({height: "auto"}); | |
| 590 | settings.h = $loaded.height(); | |
| 591 | } | |
| 592 | $loaded.css({height: settings.h}); | |
| 593 | ||
| 594 | publicMethod.position(settings.transition === "none" ? 0 : settings.speed); | |
| 595 | } | |
| 596 | }; | |
| 597 | ||
| 598 | publicMethod.prep = function (object) { | |
| 599 | if (!open) { | |
| 600 | return; | |
| 601 | } | |
| 602 | ||
| 603 | var callback, speed = settings.transition === "none" ? 0 : settings.speed; | |
| 604 | ||
| 605 | $loaded.remove(); | |
| 606 | $loaded = $tag(div, 'LoadedContent').append(object); | |
| 607 | ||
| 608 | function getWidth() { | |
| 609 | settings.w = settings.w || $loaded.width(); | |
| 610 | settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; | |
| 611 | return settings.w; | |
| 612 | } | |
| 613 | function getHeight() { | |
| 614 | settings.h = settings.h || $loaded.height(); | |
| 615 | settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; | |
| 616 | return settings.h; | |
| 617 | } | |
| 618 | ||
| 619 | $loaded.hide() | |
| 620 | .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations. | |
| 621 | .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'}) | |
| 622 | .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height. | |
| 623 | .prependTo($content); | |
| 624 | ||
| 625 | $loadingBay.hide(); | |
| 626 | ||
| 627 | // 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. | |
| 628 | //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'}); | |
| 629 | ||
| 630 | $(photo).css({'float': 'none'}); | |
| 631 | ||
| 632 | // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay. | |
| 633 | if (isIE6) { | |
| 634 | $('select').not($box.find('select')).filter(function () { | |
| 635 | return this.style.visibility !== 'hidden'; | |
| 636 | }).css({'visibility': 'hidden'}).one(event_cleanup, function () { | |
| 637 | this.style.visibility = 'inherit'; | |
| 638 | }); | |
| 639 | } | |
| 640 | ||
| 641 | callback = function () { | |
| 642 | var preload, | |
| 643 | i, | |
| 644 | total = $related.length, | |
| 645 | iframe, | |
| 646 | frameBorder = 'frameBorder', | |
| 647 | allowTransparency = 'allowTransparency', | |
| 648 | complete, | |
| 649 | src, | |
| 650 | img, | |
| 651 | data; | |
| 652 | ||
| 653 | if (!open) { | |
| 654 | return; | |
| 655 | } | |
| 656 | ||
| 657 | function removeFilter() { | |
| 658 | if (isIE) { | |
| 659 | $box[0].style.removeAttribute('filter'); | |
| 660 | } | |
| 661 | } | |
| 662 | ||
| 663 | complete = function () { | |
| 664 | clearTimeout(loadingTimer); | |
| 665 | // Detaching forces Andriod stock browser to redraw the area underneat the loading overlay. Hiding alone isn't enough. | |
| 666 | $loadingOverlay.detach().hide(); | |
| 667 | trigger(event_complete, settings.onComplete); | |
| 668 | }; | |
| 669 | ||
| 670 | if (isIE) { | |
| 671 | //This fadeIn helps the bicubic resampling to kick-in. | |
| 672 | if (photo) { | |
| 673 | $loaded.fadeIn(100); | |
| 674 | } | |
| 675 | } | |
| 676 | ||
| 677 | $title.html(settings.title).add($loaded).show(); | |
| 678 | ||
| 679 | if (total > 1) { // handle grouping | |
| 680 | if (typeof settings.current === "string") { | |
| 681 | $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show(); | |
| 682 | } | |
| 683 | ||
| 684 | $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next); | |
| 685 | $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous); | |
| 686 | ||
| 687 | if (settings.slideshow) { | |
| 688 | $slideshow.show(); | |
| 689 | } | |
| 690 | ||
| 691 | // Preloads images within a rel group | |
| 692 | if (settings.preloading) { | |
| 693 | preload = [ | |
| 694 | getIndex(-1), | |
| 695 | getIndex(1) | |
| 696 | ]; | |
| 697 | while (i = $related[preload.pop()]) { | |
| 698 | data = $.data(i, colorbox); | |
| 699 | ||
| 700 | if (data && data.href) { | |
| 701 | src = data.href; | |
| 702 | if ($.isFunction(src)) { | |
| 703 | src = src.call(i); | |
| 704 | } | |
| 705 | } else { | |
| 706 | src = i.href; | |
| 707 | } | |
| 708 | ||
| 709 | if (isImage(src)) { | |
| 710 | img = new Image(); | |
| 711 | img.src = src; | |
| 712 | } | |
| 713 | } | |
| 714 | } | |
| 715 | } else { | |
| 716 | $groupControls.hide(); | |
| 717 | } | |
| 718 | ||
| 719 | if (settings.iframe) { | |
| 720 | iframe = $tag('iframe')[0]; | |
| 721 | ||
| 722 | if (frameBorder in iframe) { | |
| 723 | iframe[frameBorder] = 0; | |
| 724 | } | |
| 725 | if (allowTransparency in iframe) { | |
| 726 | iframe[allowTransparency] = "true"; | |
| 727 | } | |
| 728 | // give the iframe a unique name to prevent caching | |
| 729 | iframe.name = prefix + (+new Date()); | |
| 730 | if (settings.fastIframe) { | |
| 731 | complete(); | |
| 732 | } else { | |
| 733 | $(iframe).one('load', complete); | |
| 734 | } | |
| 735 | iframe.src = settings.href; | |
| 736 | if (!settings.scrolling) { | |
| 737 | iframe.scrolling = "no"; | |
| 738 | } | |
| 739 | $(iframe).addClass(prefix + 'Iframe').appendTo($loaded).one(event_purge, function () { | |
| 740 | iframe.src = "//about:blank"; | |
| 741 | }); | |
| 742 | } else { | |
| 743 | complete(); | |
| 744 | } | |
| 745 | ||
| 746 | if (settings.transition === 'fade') { | |
| 747 | $box.fadeTo(speed, 1, removeFilter); | |
| 748 | } else { | |
| 749 | removeFilter(); | |
| 750 | } | |
| 751 | }; | |
| 752 | ||
| 753 | if (settings.transition === 'fade') { | |
| 754 | $box.fadeTo(speed, 0, function () { | |
| 755 | publicMethod.position(0, callback); | |
| 756 | }); | |
| 757 | } else { | |
| 758 | publicMethod.position(speed, callback); | |
| 759 | } | |
| 760 | }; | |
| 761 | ||
| 762 | publicMethod.load = function (launched) { | |
| 763 | var href, setResize, prep = publicMethod.prep; | |
| 764 | ||
| 765 | active = true; | |
| 766 | ||
| 767 | photo = false; | |
| 768 | ||
| 769 | element = $related[index]; | |
| 770 | ||
| 771 | if (!launched) { | |
| 772 | makeSettings(); | |
| 773 | } | |
| 774 | ||
| 775 | trigger(event_purge); | |
| 776 | ||
| 777 | trigger(event_load, settings.onLoad); | |
| 778 | ||
| 779 | settings.h = settings.height ? | |
| 780 | setSize(settings.height, 'y') - loadedHeight - interfaceHeight : | |
| 781 | settings.innerHeight && setSize(settings.innerHeight, 'y'); | |
| 782 | ||
| 783 | settings.w = settings.width ? | |
| 784 | setSize(settings.width, 'x') - loadedWidth - interfaceWidth : | |
| 785 | settings.innerWidth && setSize(settings.innerWidth, 'x'); | |
| 786 | ||
| 787 | // Sets the minimum dimensions for use in image scaling | |
| 788 | settings.mw = settings.w; | |
| 789 | settings.mh = settings.h; | |
| 790 | ||
| 791 | // Re-evaluate the minimum width and height based on maxWidth and maxHeight values. | |
| 792 | // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead. | |
| 793 | if (settings.maxWidth) { | |
| 794 | settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth; | |
| 795 | settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw; | |
| 796 | } | |
| 797 | if (settings.maxHeight) { | |
| 798 | settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight; | |
| 799 | settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh; | |
| 800 | } | |
| 801 | ||
| 802 | href = settings.href; | |
| 803 | ||
| 804 | loadingTimer = setTimeout(function () { | |
| 805 | $loadingOverlay.show().appendTo($content); | |
| 806 | }, 100); | |
| 807 | ||
| 808 | if (settings.inline) { | |
| 809 | // Inserts an empty placeholder where inline content is being pulled from. | |
| 810 | // An event is bound to put inline content back when ColorBox closes or loads new content. | |
| 811 | $tag(div).hide().insertBefore($(href)[0]).one(event_purge, function () { | |
| 812 | $(this).replaceWith($loaded.children()); | |
| 813 | }); | |
| 814 | prep($(href)); | |
| 815 | } else if (settings.iframe) { | |
| 816 | // IFrame element won't be added to the DOM until it is ready to be displayed, | |
| 817 | // to avoid problems with DOM-ready JS that might be trying to run in that iframe. | |
| 818 | prep(" "); | |
| 819 | } else if (settings.html) { | |
| 820 | prep(settings.html); | |
| 821 | } else if (isImage(href)) { | |
| 822 | $(photo = new Image()) | |
| 823 | .addClass(prefix + 'Photo') | |
| 824 | .error(function () { | |
| 825 | settings.title = false; | |
| 826 | prep($tag(div, 'Error').html(settings.imgError)); | |
| 827 | }) | |
| 828 | .load(function () { | |
| 829 | var percent; | |
| 830 | photo.onload = null; //stops animated gifs from firing the onload repeatedly. | |
| 831 | ||
| 832 | if (settings.scalePhotos) { | |
| 833 | setResize = function () { | |
| 834 | photo.height -= photo.height * percent; | |
| 835 | photo.width -= photo.width * percent; | |
| 836 | }; | |
| 837 | if (settings.mw && photo.width > settings.mw) { | |
| 838 | percent = (photo.width - settings.mw) / photo.width; | |
| 839 | setResize(); | |
| 840 | } | |
| 841 | if (settings.mh && photo.height > settings.mh) { | |
| 842 | percent = (photo.height - settings.mh) / photo.height; | |
| 843 | setResize(); | |
| 844 | } | |
| 845 | } | |
| 846 | ||
| 847 | if (settings.h) { | |
| 848 | photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px'; | |
| 849 | } | |
| 850 | ||
| 851 | if ($related[1] && (settings.loop || $related[index + 1])) { | |
| 852 | photo.style.cursor = 'pointer'; | |
| 853 | photo.onclick = function () { | |
| 854 | publicMethod.next(); | |
| 855 | }; | |
| 856 | } | |
| 857 | ||
| 858 | if (isIE) { | |
| 859 | photo.style.msInterpolationMode = 'bicubic'; | |
| 860 | } | |
| 861 | ||
| 862 | setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise. | |
| 863 | prep(photo); | |
| 864 | }, 1); | |
| 865 | }); | |
| 866 | ||
| 867 | setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise. | |
| 868 | photo.src = href; | |
| 869 | }, 1); | |
| 870 | } else if (href) { | |
| 871 | $loadingBay.load(href, settings.data, function (data, status, xhr) { | |
| 872 | prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents()); | |
| 873 | }); | |
| 874 | } | |
| 875 | }; | |
| 876 | ||
| 877 | // Navigates to the next page/image in a set. | |
| 878 | publicMethod.next = function () { | |
| 879 | if (!active && $related[1] && (settings.loop || $related[index + 1])) { | |
| 880 | index = getIndex(1); | |
| 881 | publicMethod.load(); | |
| 882 | } | |
| 883 | }; | |
| 884 | ||
| 885 | publicMethod.prev = function () { | |
| 886 | if (!active && $related[1] && (settings.loop || index)) { | |
| 887 | index = getIndex(-1); | |
| 888 | publicMethod.load(); | |
| 889 | } | |
| 890 | }; | |
| 891 | ||
| 892 | // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close(); | |
| 893 | publicMethod.close = function () { | |
| 894 | if (open && !closing) { | |
| 895 | ||
| 896 | closing = true; | |
| 897 | ||
| 898 | open = false; | |
| 899 | ||
| 900 | trigger(event_cleanup, settings.onCleanup); | |
| 901 | ||
| 902 | $window.unbind('.' + prefix + ' .' + event_ie6); | |
| 903 | ||
| 904 | $overlay.fadeTo(200, 0); | |
| 905 | ||
| 906 | $box.stop().fadeTo(300, 0, function () { | |
| 907 | ||
| 908 | $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide(); | |
| 909 | ||
| 910 | trigger(event_purge); | |
| 911 | ||
| 912 | $loaded.remove(); | |
| 913 | ||
| 914 | setTimeout(function () { | |
| 915 | closing = false; | |
| 916 | trigger(event_closed, settings.onClosed); | |
| 917 | }, 1); | |
| 918 | }); | |
| 919 | } | |
| 920 | }; | |
| 921 | ||
| 922 | // Removes changes ColorBox made to the document, but does not remove the plugin | |
| 923 | // from jQuery. | |
| 924 | publicMethod.remove = function () { | |
| 925 | $([]).add($box).add($overlay).remove(); | |
| 926 | $box = null; | |
| 927 | $('.' + boxElement) | |
| 928 | .removeData(colorbox) | |
| 929 | .removeClass(boxElement) | |
| 930 | .die(); | |
| 931 | }; | |
| 932 | ||
| 933 | // A method for fetching the current element ColorBox is referencing. | |
| 934 | // returns a jQuery object. | |
| 935 | publicMethod.element = function () { | |
| 936 | return $(element); | |
| 937 | }; | |
| 938 | ||
| 939 | publicMethod.settings = defaults; | |
| 940 | ||
| 941 | }(jQuery, document, this));⏎ |
| 0 | { | |
| 1 | "name": "colorbox", | |
| 2 | "title": "ColorBox", | |
| 3 | "description": "A lightweight customizable lightbox plugin", | |
| 4 | "keywords": [ | |
| 5 | "modal", | |
| 6 | "lightbox", | |
| 7 | "window", | |
| 8 | "popup", | |
| 9 | "ui" | |
| 10 | ], | |
| 11 | "version": "1.4.6", | |
| 12 | "author": { | |
| 13 | "name": "Jack Moore", | |
| 14 | "url": "http://www.jacklmoore.com", | |
| 15 | "email": "hello@jacklmoore.com" | |
| 16 | }, | |
| 17 | "licenses": [ | |
| 18 | { | |
| 19 | "type": "MIT", | |
| 20 | "url": "http://www.opensource.org/licenses/mit-license.php" | |
| 21 | } | |
| 22 | ], | |
| 23 | "homepage": "http://jacklmoore.com/colorbox", | |
| 24 | "demo": "http://jacklmoore.com/colorbox", | |
| 25 | "dependencies": { | |
| 26 | "jquery": ">=1.3.2" | |
| 27 | } | |
| 28 | }⏎ |
| 0 | { | |
| 1 | "name": "jquery-colorbox", | |
| 2 | "version": "1.4.6", | |
| 3 | "main": "./jquery.colorbox-min.js", | |
| 4 | "dependencies": { | |
| 5 | "jquery": ">=1.3.2" | |
| 6 | } | |
| 7 | }⏎ |
Binary diff not shown
Binary diff not shown
| 0 | <div style="width:504px; height:412px; overflow:hidden;"> | |
| 1 | <object> | |
| 2 | <param name="allowfullscreen" value="true" /><param name="wmode" value="opaque" /> | |
| 3 | <param name="allowscriptaccess" value="always" /> | |
| 4 | <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2285902&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /> | |
| 5 | <embed src="http://vimeo.com/moogaloop.swf?clip_id=2285902&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque" allowscriptaccess="always" width="504" height="412"></embed> | |
| 6 | </object> | |
| 7 | </div>⏎ |
| 5 | 5 | #cboxOverlay{position:fixed; width:100%; height:100%;} |
| 6 | 6 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} |
| 7 | 7 | #cboxContent{position:relative;} |
| 8 | #cboxLoadedContent{overflow:auto;} | |
| 8 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} | |
| 9 | 9 | #cboxTitle{margin:0;} |
| 10 | 10 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} |
| 11 | 11 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} |
| 12 | 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} |
| 13 | 13 | .cboxIframe{width:100%; height:100%; display:block; border:0;} |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} | |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} | |
| 15 | 15 | |
| 16 | 16 | /* |
| 17 | 17 | User Style: |
| 19 | 19 | ordered & tabbed in a way that represents the nesting of the generated HTML. |
| 20 | 20 | */ |
| 21 | 21 | #cboxOverlay{background:url(images/overlay.png) repeat 0 0;} |
| 22 | #colorbox{} | |
| 22 | #colorbox{outline:0;} | |
| 23 | 23 | #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;} |
| 24 | 24 | #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;} |
| 25 | 25 | #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;} |
| 34 | 34 | #cboxLoadedContent{margin-bottom:28px;} |
| 35 | 35 | #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} |
| 36 | 36 | #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} |
| 37 | #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;} | |
| 38 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} | |
| 39 | ||
| 40 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
| 41 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } | |
| 42 | ||
| 43 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
| 44 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
| 45 | ||
| 37 | 46 | #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} |
| 38 | 47 | #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} |
| 39 | 48 | #cboxPrevious:hover{background-position:-75px -25px;} |
| 40 | 49 | #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} |
| 41 | 50 | #cboxNext:hover{background-position:-50px -25px;} |
| 42 | #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;} | |
| 43 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} | |
| 44 | 51 | #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} |
| 45 | 52 | #cboxClose:hover{background-position:-25px -25px;} |
| 46 | 53 | |
| 8 | 8 | h2{font-size:13px; margin:15px 0 0 0;} |
| 9 | 9 | </style> |
| 10 | 10 | <link rel="stylesheet" href="colorbox.css" /> |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 12 | <script src="../colorbox/jquery.colorbox.js"></script> | |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| 12 | <script src="../jquery.colorbox.js"></script> | |
| 13 | 13 | <script> |
| 14 | 14 | $(document).ready(function(){ |
| 15 | 15 | //Examples of how to assign the ColorBox event to elements |
| 19 | 19 | $(".group4").colorbox({rel:'group4', slideshow:true}); |
| 20 | 20 | $(".ajax").colorbox(); |
| 21 | 21 | $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
| 22 | $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); | |
| 22 | 23 | $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); |
| 23 | 24 | $(".inline").colorbox({inline:true, width:"50%"}); |
| 24 | 25 | $(".callbacks").colorbox({ |
| 28 | 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
| 29 | 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
| 30 | 31 | }); |
| 32 | ||
| 33 | $('.non-retina').colorbox({rel:'group5', transition:'none'}) | |
| 34 | $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); | |
| 31 | 35 | |
| 32 | 36 | //Example of preserving a JavaScript event for inline calls. |
| 33 | 37 | $("#click").click(function(){ |
| 39 | 43 | </head> |
| 40 | 44 | <body> |
| 41 | 45 | <h1>ColorBox Demonstration</h1> |
| 42 | ||
| 43 | 46 | <h2>Elastic Transition</h2> |
| 44 | 47 | <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
| 45 | 48 | <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
| 62 | 65 | |
| 63 | 66 | <h2>Other Content Types</h2> |
| 64 | 67 | <p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
| 65 | <p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> | |
| 66 | 68 | <p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
| 67 | <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> | |
| 69 | <p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p> | |
| 70 | <p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p> | |
| 68 | 71 | <p><a class='inline' href="#inline_content">Inline HTML</a></p> |
| 69 | 72 | |
| 70 | 73 | <h2>Demonstration of using callbacks</h2> |
| 71 | 74 | <p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> |
| 72 | 75 | |
| 76 | ||
| 77 | <h2>Retina Images</h2> | |
| 78 | <p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p> | |
| 79 | <p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p> | |
| 80 | ||
| 73 | 81 | <!-- This contains the hidden content for inline calls --> |
| 74 | 82 | <div style='display:none'> |
| 75 | 83 | <div id='inline_content' style='padding:10px; background:#fff;'> |
| 79 | 87 | |
| 80 | 88 | <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> |
| 81 | 89 | <p>Updating Content Example:<br /> |
| 82 | <a class="ajax" href="../content/flash.html">Click here to load new content</a></p> | |
| 90 | <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p> | |
| 83 | 91 | </div> |
| 84 | 92 | </div> |
| 85 | 93 | </body> |
| 5 | 5 | #cboxOverlay{position:fixed; width:100%; height:100%;} |
| 6 | 6 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} |
| 7 | 7 | #cboxContent{position:relative;} |
| 8 | #cboxLoadedContent{overflow:auto;} | |
| 8 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} | |
| 9 | 9 | #cboxTitle{margin:0;} |
| 10 | 10 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} |
| 11 | 11 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} |
| 12 | 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} |
| 13 | 13 | .cboxIframe{width:100%; height:100%; display:block; border:0;} |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} | |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} | |
| 15 | 15 | |
| 16 | 16 | /* |
| 17 | 17 | User Style: |
| 19 | 19 | ordered & tabbed in a way that represents the nesting of the generated HTML. |
| 20 | 20 | */ |
| 21 | 21 | #cboxOverlay{background:#fff;} |
| 22 | #colorbox{} | |
| 23 | #cboxContent{margin-top:32px; overflow:visible;} | |
| 22 | #colorbox{outline:0;} | |
| 23 | #cboxContent{margin-top:32px; overflow:visible; background:#000;} | |
| 24 | 24 | .cboxIframe{background:#fff;} |
| 25 | 25 | #cboxError{padding:50px; border:1px solid #ccc;} |
| 26 | 26 | #cboxLoadedContent{background:#000; padding:1px;} |
| 28 | 28 | #cboxLoadingOverlay{background:#000;} |
| 29 | 29 | #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} |
| 30 | 30 | #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} |
| 31 | #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;} | |
| 31 | ||
| 32 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
| 33 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;} | |
| 34 | ||
| 35 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
| 36 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
| 37 | ||
| 32 | 38 | #cboxPrevious{background-position:0px 0px; right:44px;} |
| 33 | 39 | #cboxPrevious:hover{background-position:0px -25px;} |
| 34 | 40 | #cboxNext{background-position:-25px 0px; right:22px;} |
| 8 | 8 | h2{font-size:13px; margin:15px 0 0 0;} |
| 9 | 9 | </style> |
| 10 | 10 | <link rel="stylesheet" href="colorbox.css" /> |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 12 | <script src="../colorbox/jquery.colorbox.js"></script> | |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| 12 | <script src="../jquery.colorbox.js"></script> | |
| 13 | 13 | <script> |
| 14 | 14 | $(document).ready(function(){ |
| 15 | 15 | //Examples of how to assign the ColorBox event to elements |
| 19 | 19 | $(".group4").colorbox({rel:'group4', slideshow:true}); |
| 20 | 20 | $(".ajax").colorbox(); |
| 21 | 21 | $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
| 22 | $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); | |
| 22 | 23 | $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); |
| 23 | 24 | $(".inline").colorbox({inline:true, width:"50%"}); |
| 24 | 25 | $(".callbacks").colorbox({ |
| 28 | 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
| 29 | 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
| 30 | 31 | }); |
| 32 | ||
| 33 | $('.non-retina').colorbox({rel:'group5', transition:'none'}) | |
| 34 | $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); | |
| 31 | 35 | |
| 32 | 36 | //Example of preserving a JavaScript event for inline calls. |
| 33 | 37 | $("#click").click(function(){ |
| 39 | 43 | </head> |
| 40 | 44 | <body> |
| 41 | 45 | <h1>ColorBox Demonstration</h1> |
| 42 | ||
| 43 | 46 | <h2>Elastic Transition</h2> |
| 44 | 47 | <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
| 45 | 48 | <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
| 62 | 65 | |
| 63 | 66 | <h2>Other Content Types</h2> |
| 64 | 67 | <p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
| 65 | <p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> | |
| 66 | 68 | <p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
| 67 | <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> | |
| 69 | <p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p> | |
| 70 | <p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p> | |
| 68 | 71 | <p><a class='inline' href="#inline_content">Inline HTML</a></p> |
| 69 | 72 | |
| 70 | 73 | <h2>Demonstration of using callbacks</h2> |
| 71 | 74 | <p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> |
| 72 | 75 | |
| 76 | ||
| 77 | <h2>Retina Images</h2> | |
| 78 | <p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p> | |
| 79 | <p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p> | |
| 80 | ||
| 73 | 81 | <!-- This contains the hidden content for inline calls --> |
| 74 | 82 | <div style='display:none'> |
| 75 | 83 | <div id='inline_content' style='padding:10px; background:#fff;'> |
| 79 | 87 | |
| 80 | 88 | <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> |
| 81 | 89 | <p>Updating Content Example:<br /> |
| 82 | <a class="ajax" href="../content/flash.html">Click here to load new content</a></p> | |
| 90 | <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p> | |
| 83 | 91 | </div> |
| 84 | 92 | </div> |
| 85 | 93 | </body> |
| 5 | 5 | #cboxOverlay{position:fixed; width:100%; height:100%;} |
| 6 | 6 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} |
| 7 | 7 | #cboxContent{position:relative;} |
| 8 | #cboxLoadedContent{overflow:auto;} | |
| 8 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} | |
| 9 | 9 | #cboxTitle{margin:0;} |
| 10 | 10 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} |
| 11 | 11 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} |
| 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none;} | |
| 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} | |
| 13 | 13 | .cboxIframe{width:100%; height:100%; display:block; border:0;} |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} | |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} | |
| 15 | 15 | |
| 16 | 16 | /* |
| 17 | 17 | User Style: |
| 19 | 19 | ordered & tabbed in a way that represents the nesting of the generated HTML. |
| 20 | 20 | */ |
| 21 | 21 | #cboxOverlay{background:#000;} |
| 22 | #colorbox{} | |
| 23 | #cboxContent{margin-top:20px;} | |
| 22 | #colorbox{outline:0;} | |
| 23 | #cboxContent{margin-top:20px;background:#000;} | |
| 24 | 24 | .cboxIframe{background:#fff;} |
| 25 | 25 | #cboxError{padding:50px; border:1px solid #ccc;} |
| 26 | 26 | #cboxLoadedContent{border:5px solid #000; background:#fff;} |
| 27 | 27 | #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} |
| 28 | 28 | #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} |
| 29 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} | |
| 30 | ||
| 31 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
| 32 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } | |
| 33 | ||
| 34 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
| 35 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
| 36 | ||
| 29 | 37 | #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} |
| 30 | 38 | #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;} |
| 31 | 39 | #cboxPrevious:hover{background-position:bottom left;} |
| 32 | 40 | #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;} |
| 33 | 41 | #cboxNext:hover{background-position:bottom right;} |
| 34 | #cboxLoadingOverlay{background:#000;} | |
| 35 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} | |
| 36 | 42 | #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;} |
| 37 | #cboxClose:hover{background-position:bottom center;}⏎ | |
| 43 | #cboxClose:hover{background-position:bottom center;} | |
| 8 | 8 | h2{font-size:13px; margin:15px 0 0 0;} |
| 9 | 9 | </style> |
| 10 | 10 | <link rel="stylesheet" href="colorbox.css" /> |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 12 | <script src="../colorbox/jquery.colorbox.js"></script> | |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| 12 | <script src="../jquery.colorbox.js"></script> | |
| 13 | 13 | <script> |
| 14 | 14 | $(document).ready(function(){ |
| 15 | 15 | //Examples of how to assign the ColorBox event to elements |
| 19 | 19 | $(".group4").colorbox({rel:'group4', slideshow:true}); |
| 20 | 20 | $(".ajax").colorbox(); |
| 21 | 21 | $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
| 22 | $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); | |
| 22 | 23 | $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); |
| 23 | 24 | $(".inline").colorbox({inline:true, width:"50%"}); |
| 24 | 25 | $(".callbacks").colorbox({ |
| 28 | 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
| 29 | 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
| 30 | 31 | }); |
| 32 | ||
| 33 | $('.non-retina').colorbox({rel:'group5', transition:'none'}) | |
| 34 | $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); | |
| 31 | 35 | |
| 32 | 36 | //Example of preserving a JavaScript event for inline calls. |
| 33 | 37 | $("#click").click(function(){ |
| 39 | 43 | </head> |
| 40 | 44 | <body> |
| 41 | 45 | <h1>ColorBox Demonstration</h1> |
| 42 | ||
| 43 | 46 | <h2>Elastic Transition</h2> |
| 44 | 47 | <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
| 45 | 48 | <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
| 62 | 65 | |
| 63 | 66 | <h2>Other Content Types</h2> |
| 64 | 67 | <p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
| 65 | <p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> | |
| 66 | 68 | <p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
| 67 | <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> | |
| 69 | <p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p> | |
| 70 | <p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p> | |
| 68 | 71 | <p><a class='inline' href="#inline_content">Inline HTML</a></p> |
| 69 | 72 | |
| 70 | 73 | <h2>Demonstration of using callbacks</h2> |
| 71 | 74 | <p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> |
| 72 | 75 | |
| 76 | ||
| 77 | <h2>Retina Images</h2> | |
| 78 | <p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p> | |
| 79 | <p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p> | |
| 80 | ||
| 73 | 81 | <!-- This contains the hidden content for inline calls --> |
| 74 | 82 | <div style='display:none'> |
| 75 | 83 | <div id='inline_content' style='padding:10px; background:#fff;'> |
| 79 | 87 | |
| 80 | 88 | <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> |
| 81 | 89 | <p>Updating Content Example:<br /> |
| 82 | <a class="ajax" href="../content/flash.html">Click here to load new content</a></p> | |
| 90 | <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p> | |
| 83 | 91 | </div> |
| 84 | 92 | </div> |
| 85 | 93 | </body> |
| 5 | 5 | #cboxOverlay{position:fixed; width:100%; height:100%;} |
| 6 | 6 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} |
| 7 | 7 | #cboxContent{position:relative;} |
| 8 | #cboxLoadedContent{overflow:auto;} | |
| 8 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} | |
| 9 | 9 | #cboxTitle{margin:0;} |
| 10 | 10 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} |
| 11 | 11 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} |
| 12 | 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} |
| 13 | 13 | .cboxIframe{width:100%; height:100%; display:block; border:0;} |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} | |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} | |
| 15 | 15 | |
| 16 | 16 | /* |
| 17 | 17 | User Style: |
| 19 | 19 | ordered & tabbed in a way that represents the nesting of the generated HTML. |
| 20 | 20 | */ |
| 21 | 21 | #cboxOverlay{background:#fff;} |
| 22 | #colorbox{} | |
| 22 | #colorbox{outline:0;} | |
| 23 | 23 | #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;} |
| 24 | 24 | #cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;} |
| 25 | 25 | #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;} |
| 34 | 34 | #cboxLoadedContent{margin-bottom:20px;} |
| 35 | 35 | #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} |
| 36 | 36 | #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;} |
| 37 | #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;} | |
| 38 | ||
| 39 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
| 40 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } | |
| 41 | ||
| 42 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
| 43 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
| 44 | ||
| 37 | 45 | #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} |
| 38 | 46 | #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} |
| 39 | 47 | #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} |
| 40 | #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;} | |
| 41 | 48 | #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;} |
| 42 | 49 | |
| 43 | 50 | /* |
| 8 | 8 | h2{font-size:13px; margin:15px 0 0 0;} |
| 9 | 9 | </style> |
| 10 | 10 | <link rel="stylesheet" href="colorbox.css" /> |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 12 | <script src="../colorbox/jquery.colorbox.js"></script> | |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| 12 | <script src="../jquery.colorbox.js"></script> | |
| 13 | 13 | <script> |
| 14 | 14 | $(document).ready(function(){ |
| 15 | 15 | //Examples of how to assign the ColorBox event to elements |
| 19 | 19 | $(".group4").colorbox({rel:'group4', slideshow:true}); |
| 20 | 20 | $(".ajax").colorbox(); |
| 21 | 21 | $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
| 22 | $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); | |
| 22 | 23 | $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); |
| 23 | 24 | $(".inline").colorbox({inline:true, width:"50%"}); |
| 24 | 25 | $(".callbacks").colorbox({ |
| 28 | 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
| 29 | 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
| 30 | 31 | }); |
| 32 | ||
| 33 | $('.non-retina').colorbox({rel:'group5', transition:'none'}) | |
| 34 | $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); | |
| 31 | 35 | |
| 32 | 36 | //Example of preserving a JavaScript event for inline calls. |
| 33 | 37 | $("#click").click(function(){ |
| 39 | 43 | </head> |
| 40 | 44 | <body> |
| 41 | 45 | <h1>ColorBox Demonstration</h1> |
| 42 | ||
| 43 | 46 | <h2>Elastic Transition</h2> |
| 44 | 47 | <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
| 45 | 48 | <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
| 62 | 65 | |
| 63 | 66 | <h2>Other Content Types</h2> |
| 64 | 67 | <p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
| 65 | <p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> | |
| 66 | 68 | <p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
| 67 | <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> | |
| 69 | <p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p> | |
| 70 | <p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p> | |
| 68 | 71 | <p><a class='inline' href="#inline_content">Inline HTML</a></p> |
| 69 | 72 | |
| 70 | 73 | <h2>Demonstration of using callbacks</h2> |
| 71 | 74 | <p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> |
| 72 | 75 | |
| 76 | ||
| 77 | <h2>Retina Images</h2> | |
| 78 | <p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p> | |
| 79 | <p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p> | |
| 80 | ||
| 73 | 81 | <!-- This contains the hidden content for inline calls --> |
| 74 | 82 | <div style='display:none'> |
| 75 | 83 | <div id='inline_content' style='padding:10px; background:#fff;'> |
| 79 | 87 | |
| 80 | 88 | <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> |
| 81 | 89 | <p>Updating Content Example:<br /> |
| 82 | <a class="ajax" href="../content/flash.html">Click here to load new content</a></p> | |
| 90 | <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p> | |
| 83 | 91 | </div> |
| 84 | 92 | </div> |
| 85 | 93 | </body> |
| 5 | 5 | #cboxOverlay{position:fixed; width:100%; height:100%;} |
| 6 | 6 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} |
| 7 | 7 | #cboxContent{position:relative;} |
| 8 | #cboxLoadedContent{overflow:auto;} | |
| 8 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} | |
| 9 | 9 | #cboxTitle{margin:0;} |
| 10 | 10 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} |
| 11 | 11 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} |
| 12 | 12 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} |
| 13 | 13 | .cboxIframe{width:100%; height:100%; display:block; border:0;} |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} | |
| 14 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} | |
| 15 | 15 | |
| 16 | 16 | /* |
| 17 | 17 | User Style: |
| 19 | 19 | ordered & tabbed in a way that represents the nesting of the generated HTML. |
| 20 | 20 | */ |
| 21 | 21 | #cboxOverlay{background:#000;} |
| 22 | #colorbox{} | |
| 22 | #colorbox{outline:0;} | |
| 23 | 23 | #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;} |
| 24 | 24 | #cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;} |
| 25 | 25 | #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;} |
| 36 | 36 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} |
| 37 | 37 | #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} |
| 38 | 38 | #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} |
| 39 | ||
| 40 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
| 41 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} | |
| 39 | 42 | |
| 40 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} | |
| 43 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
| 44 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
| 45 | ||
| 41 | 46 | #cboxPrevious{left:0px; background-position: -51px -25px;} |
| 42 | 47 | #cboxPrevious:hover{background-position:-51px 0px;} |
| 43 | 48 | #cboxNext{left:27px; background-position:-75px -25px;} |
| 44 | 49 | #cboxNext:hover{background-position:-75px 0px;} |
| 45 | 50 | #cboxClose{right:0; background-position:-100px -25px;} |
| 46 | 51 | #cboxClose:hover{background-position:-100px 0px;} |
| 47 | ||
| 52 | ||
| 48 | 53 | .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} |
| 49 | 54 | .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;} |
| 50 | 55 | .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} |
| 8 | 8 | h2{font-size:13px; margin:15px 0 0 0;} |
| 9 | 9 | </style> |
| 10 | 10 | <link rel="stylesheet" href="colorbox.css" /> |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 12 | <script src="../colorbox/jquery.colorbox.js"></script> | |
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| 12 | <script src="../jquery.colorbox.js"></script> | |
| 13 | 13 | <script> |
| 14 | 14 | $(document).ready(function(){ |
| 15 | 15 | //Examples of how to assign the ColorBox event to elements |
| 19 | 19 | $(".group4").colorbox({rel:'group4', slideshow:true}); |
| 20 | 20 | $(".ajax").colorbox(); |
| 21 | 21 | $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
| 22 | $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); | |
| 22 | 23 | $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); |
| 23 | 24 | $(".inline").colorbox({inline:true, width:"50%"}); |
| 24 | 25 | $(".callbacks").colorbox({ |
| 28 | 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
| 29 | 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
| 30 | 31 | }); |
| 32 | ||
| 33 | $('.non-retina').colorbox({rel:'group5', transition:'none'}) | |
| 34 | $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); | |
| 31 | 35 | |
| 32 | 36 | //Example of preserving a JavaScript event for inline calls. |
| 33 | 37 | $("#click").click(function(){ |
| 39 | 43 | </head> |
| 40 | 44 | <body> |
| 41 | 45 | <h1>ColorBox Demonstration</h1> |
| 42 | ||
| 43 | 46 | <h2>Elastic Transition</h2> |
| 44 | 47 | <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
| 45 | 48 | <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
| 62 | 65 | |
| 63 | 66 | <h2>Other Content Types</h2> |
| 64 | 67 | <p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
| 65 | <p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> | |
| 66 | 68 | <p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
| 67 | <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> | |
| 69 | <p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p> | |
| 70 | <p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p> | |
| 68 | 71 | <p><a class='inline' href="#inline_content">Inline HTML</a></p> |
| 69 | 72 | |
| 70 | 73 | <h2>Demonstration of using callbacks</h2> |
| 71 | 74 | <p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> |
| 72 | 75 | |
| 76 | ||
| 77 | <h2>Retina Images</h2> | |
| 78 | <p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p> | |
| 79 | <p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p> | |
| 80 | ||
| 73 | 81 | <!-- This contains the hidden content for inline calls --> |
| 74 | 82 | <div style='display:none'> |
| 75 | 83 | <div id='inline_content' style='padding:10px; background:#fff;'> |
| 79 | 87 | |
| 80 | 88 | <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> |
| 81 | 89 | <p>Updating Content Example:<br /> |
| 82 | <a class="ajax" href="../content/flash.html">Click here to load new content</a></p> | |
| 90 | <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p> | |
| 83 | 91 | </div> |
| 84 | 92 | </div> |
| 85 | 93 | </body> |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Arabic (ar) | |
| 3 | translated by: A.Rhman Sayes | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "الصورة {current} من {total}", | |
| 7 | previous: "السابق", | |
| 8 | next: "التالي", | |
| 9 | close: "إغلاق", | |
| 10 | xhrError: "حدث خطأ أثناء تحميل المحتوى.", | |
| 11 | imgError: "حدث خطأ أثناء تحميل الصورة.", | |
| 12 | slideshowStart: "تشغيل العرض", | |
| 13 | slideshowStop: "إيقاف العرض" | |
| 14 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Czech (cs) | |
| 3 | translated by: Filip Novak | |
| 4 | site: mame.napilno.cz/filip-novak | |
| 5 | */ | |
| 6 | jQuery.extend(jQuery.colorbox.settings, { | |
| 7 | current: "{current}. obrázek z {total}", | |
| 8 | previous: "Předchozí", | |
| 9 | next: "Následující", | |
| 10 | close: "Zavřít", | |
| 11 | xhrError: "Obsah se nepodařilo načíst.", | |
| 12 | imgError: "Obrázek se nepodařilo načíst." | |
| 13 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Danish (da) | |
| 3 | translated by: danieljuhl | |
| 4 | site: danieljuhl.dk | |
| 5 | */ | |
| 6 | jQuery.extend(jQuery.colorbox.settings, { | |
| 7 | current: "Billede {current} af {total}", | |
| 8 | previous: "Forrige", | |
| 9 | next: "Næste", | |
| 10 | close: "Luk", | |
| 11 | xhrError: "Indholdet fejlede i indlæsningen.", | |
| 12 | imgError: "Billedet fejlede i indlæsningen.", | |
| 13 | slideshowStart: "Start slideshow", | |
| 14 | slideshowStop: "Stop slideshow" | |
| 15 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: German (de) | |
| 3 | translated by: wallenium | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Bild {current} von {total}", | |
| 7 | previous: "Zurück", | |
| 8 | next: "Vor", | |
| 9 | close: "Schließen", | |
| 10 | xhrError: "Dieser Inhalt konnte nicht geladen werden.", | |
| 11 | imgError: "Dieses Bild konnte nicht geladen werden.", | |
| 12 | slideshowStart: "Slideshow starten", | |
| 13 | slideshowStop: "Slideshow anhalten" | |
| 14 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Spanish (es) | |
| 3 | translated by: migolo | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Imagen {current} de {total}", | |
| 7 | previous: "Anterior", | |
| 8 | next: "Siguiente", | |
| 9 | close: "Cerrar", | |
| 10 | xhrError: "Error en la carga del contenido.", | |
| 11 | imgError: "Error en la carga de la imagen." | |
| 12 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Persian (Farsi) | |
| 3 | translated by: Mahdi Jaberzadeh Ansari (MJZSoft) | |
| 4 | site: www.mjzsoft.ir | |
| 5 | email: mahdijaberzadehansari (at) yahoo.co.uk | |
| 6 | Please note : Persian language is right to left like arabic. | |
| 7 | */ | |
| 8 | jQuery.extend(jQuery.colorbox.settings, { | |
| 9 | current: "تصویر {current} از {total}", | |
| 10 | previous: "قبلی", | |
| 11 | next: "بعدی", | |
| 12 | close: "بستن", | |
| 13 | xhrError: "متاسفانه محتویات مورد نظر قابل نمایش نیست.", | |
| 14 | imgError: "متاسفانه بارگذاری این عکس با مشکل مواجه شده است.", | |
| 15 | slideshowStart: "آغاز نمایش خودکار", | |
| 16 | slideshowStop: "توقف نمایش خودکار" | |
| 17 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: French (fr) | |
| 3 | translated by: oaubert | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "image {current} sur {total}", | |
| 7 | previous: "précédente", | |
| 8 | next: "suivante", | |
| 9 | close: "fermer", | |
| 10 | xhrError: "Impossible de charger ce contenu.", | |
| 11 | imgError: "Impossible de charger cette image.", | |
| 12 | slideshowStart: "démarrer la présentation", | |
| 13 | slideshowStop: "arrêter la présentation" | |
| 14 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Croatian (hr) | |
| 3 | translated by: Mladen Bicanic (base.hr) | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Slika {current} od {total}", | |
| 7 | previous: "Prethodna", | |
| 8 | next: "Sljedeća", | |
| 9 | close: "Zatvori", | |
| 10 | xhrError: "Neuspješno učitavanje sadržaja.", | |
| 11 | imgError: "Neuspješno učitavanje slike.", | |
| 12 | slideshowStart: "Pokreni slideshow", | |
| 13 | slideshowStop: "Zaustavi slideshow" | |
| 14 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Italian (it) | |
| 3 | translated by: maur8ino | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Immagine {current} di {total}", | |
| 7 | previous: "Precedente", | |
| 8 | next: "Successiva", | |
| 9 | close: "Chiudi", | |
| 10 | xhrError: "Errore nel caricamento del contenuto.", | |
| 11 | imgError: "Errore nel caricamento dell'immagine.", | |
| 12 | slideshowStart: "Inizia la presentazione", | |
| 13 | slideshowStop: "Termina la presentazione" | |
| 14 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Korean (kr) | |
| 3 | translated by: lunareffect | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "총 {total} 중 {current}", | |
| 7 | previous: "이전", | |
| 8 | next: "다음", | |
| 9 | close: "닫기", | |
| 10 | xhrError: "컨텐츠를 불러오는 데 실패했습니다.", | |
| 11 | imgError: "이미지를 불러오는 데 실패했습니다.", | |
| 12 | slideshowStart: "슬라이드쇼 시작", | |
| 13 | slideshowStop: "슬라이드쇼 중지" | |
| 14 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Latvian (lv) | |
| 3 | translated by: Matiss Roberts Treinis | |
| 4 | site: x0.lv | |
| 5 | */ | |
| 6 | jQuery.extend(jQuery.colorbox.settings, { | |
| 7 | current: "attēls {current} no {total}", | |
| 8 | previous: "iepriekšējais", | |
| 9 | next: "nākamais", | |
| 10 | close: "aizvērt", | |
| 11 | xhrError: "Neizdevās ielādēt saturu.", | |
| 12 | imgError: "Neizdevās ielādēt attēlu.", | |
| 13 | slideshowStart: "sākt slaidrādi", | |
| 14 | slideshowStop: "apturēt slaidrādi" | |
| 15 | }); |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Dutch (nl) | |
| 3 | translated by: barryvdh | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Afbeelding {current} van {total}", | |
| 7 | previous: "Vorige", | |
| 8 | next: "Volgende", | |
| 9 | close: "Sluiten", | |
| 10 | xhrError: "Deze inhoud kan niet geladen worden.", | |
| 11 | imgError: "Deze afbeelding kan niet geladen worden.", | |
| 12 | slideshowStart: "Diashow starten", | |
| 13 | slideshowStop: "Diashow stoppen" | |
| 14 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Polski (pl) | |
| 3 | translated by: Tomasz Wasiński | |
| 4 | site: 2bevisible.pl | |
| 5 | */ | |
| 6 | jQuery.extend(jQuery.colorbox.settings, { | |
| 7 | current: "{current}. obrazek z {total}", | |
| 8 | previous: "Poprzedni", | |
| 9 | next: "Następny", | |
| 10 | close: "Zamknij", | |
| 11 | xhrError: "Nie udało się załadować treści.", | |
| 12 | imgError: "Nie udało się załadować obrazka.", | |
| 13 | slideshowStart: "rozpocznij pokaz slajdów", | |
| 14 | slideshowStop: "zatrzymaj pokaz slajdów" | |
| 15 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Brazilian Portuguese (pt-br) | |
| 3 | translated by: ReinaldoMT | |
| 4 | */ | |
| 5 | jQuery.extend(jQuery.colorbox.settings, { | |
| 6 | current: "Imagem {current} de {total}", | |
| 7 | previous: "Anterior", | |
| 8 | next: "Próxima", | |
| 9 | close: "Fechar", | |
| 10 | slideshowStart: "iniciar apresentação de slides", | |
| 11 | slideshowStop: "parar apresentação de slides", | |
| 12 | xhrError: "Erro ao carregar o conteúdo.", | |
| 13 | imgError: "Erro ao carregar a imagem." | |
| 14 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Russian (ru) | |
| 3 | translated by: Marfa | |
| 4 | site: themarfa.name | |
| 5 | */ | |
| 6 | jQuery.extend(jQuery.colorbox.settings, { | |
| 7 | current: "изображение {current} из {total}", | |
| 8 | previous: "предыдущее", | |
| 9 | next: "следующее", | |
| 10 | close: "закрыть", | |
| 11 | xhrError: "Не удалось загрузить содержимое.", | |
| 12 | imgError: "Не удалось загрузить изображение.", | |
| 13 | slideshowStart: "начать слайд-шоу", | |
| 14 | slideshowStop: "остановить слайд-шоу" | |
| 15 | });⏎ |
| 0 | /* | |
| 1 | jQuery ColorBox language configuration | |
| 2 | language: Turkish (tr) | |
| 3 | translated by: Caner ÖNCEL | |
| 4 | site: egonomik.com | |
| 5 | ||
| 6 | edited by: Sinan Eldem | |
| 7 | www.sinaneldem.com.tr | |
| 8 | */ | |
| 9 | jQuery.extend(jQuery.colorbox.settings, { | |
| 10 | current: "Görsel {current} / {total}", | |
| 11 | previous: "Önceki", | |
| 12 | next: "Sonraki", | |
| 13 | close: "Kapat", | |
| 14 | xhrError: "İçerik yüklenirken hata meydana geldi.", | |
| 15 | imgError: "Resim yüklenirken hata meydana geldi.", | |
| 16 | slideshowStart: "Slaytı Başlat", | |
| 17 | slideshowStop: "Slaytı Durdur" | |
| 18 | }); |
| 0 | /*! | |
| 1 | jQuery ColorBox v1.4.6 - 2013-03-19 | |
| 2 | (c) 2013 Jack Moore - jacklmoore.com/colorbox | |
| 3 | license: http://www.opensource.org/licenses/mit-license.php | |
| 4 | */ | |
| 5 | (function(e,t,i){function o(i,o,n){var r=t.createElement(i);return o&&(r.id=et+o),n&&(r.style.cssText=n),e(r)}function n(){return i.innerHeight?i.innerHeight:e(i).height()}function r(e){var t=E.length,i=(j+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?H.width():n())/100:1)*parseInt(e,10))}function s(e,t){return e.photo||e.photoRegex.test(t)}function l(e,t){return e.retinaUrl&&i.devicePixelRatio>1?t.replace(e.photoRegex,e.retinaSuffix):t}function a(e){"contains"in v[0]&&!v[0].contains(e.target)&&(e.stopPropagation(),v.focus())}function d(){var t,i=e.data(O,Z);null==i?(z=e.extend({},Y),console&&console.log&&console.log("Error: cboxElement missing settings object")):z=e.extend({},i);for(t in z)e.isFunction(z[t])&&"on"!==t.slice(0,2)&&(z[t]=z[t].call(O));z.rel=z.rel||O.rel||e(O).data("rel")||"nofollow",z.href=z.href||e(O).attr("href"),z.title=z.title||O.title,"string"==typeof z.href&&(z.href=e.trim(z.href))}function c(i,o){e(t).trigger(i),ct.trigger(i),e.isFunction(o)&&o.call(O)}function u(){var e,t,i,o,n,r=et+"Slideshow_",h="click."+et;z.slideshow&&E[1]?(t=function(){clearTimeout(e)},i=function(){(z.loop||E[j+1])&&(e=setTimeout(X.next,z.slideshowSpeed))},o=function(){F.html(z.slideshowStop).unbind(h).one(h,n),ct.bind(nt,i).bind(ot,t).bind(rt,n),v.removeClass(r+"off").addClass(r+"on")},n=function(){t(),ct.unbind(nt,i).unbind(ot,t).unbind(rt,n),F.html(z.slideshowStart).unbind(h).one(h,function(){X.next(),o()}),v.removeClass(r+"on").addClass(r+"off")},z.slideshowAuto?o():n()):v.removeClass(r+"off "+r+"on")}function f(i){G||(O=i,d(),E=e(O),j=0,"nofollow"!==z.rel&&(E=e("."+tt).filter(function(){var t,i=e.data(this,Z);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===z.rel}),j=E.index(O),-1===j&&(E=E.add(O),j=E.length-1)),g.css({opacity:parseFloat(z.opacity),cursor:z.overlayClose?"pointer":"auto",visibility:"visible"}).show(),J&&v.add(g).removeClass(J),z.className&&v.add(g).addClass(z.className),J=z.className,K.html(z.close).show(),U||(U=$=!0,v.css({visibility:"hidden",display:"block"}),I=o(ut,"LoadedContent","width:0; height:0; overflow:hidden").appendTo(y),D=b.height()+k.height()+y.outerHeight(!0)-y.height(),B=C.width()+T.width()+y.outerWidth(!0)-y.width(),N=I.outerHeight(!0),A=I.outerWidth(!0),z.w=h(z.initialWidth,"x"),z.h=h(z.initialHeight,"y"),X.position(),at&&H.bind("resize."+dt+" scroll."+dt,function(){g.css({width:H.width(),height:n(),top:H.scrollTop(),left:H.scrollLeft()})}).trigger("resize."+dt),u(),c(it,z.onOpen),_.add(M).hide(),v.focus(),t.addEventListener&&(t.addEventListener("focus",a,!0),ct.one(ht,function(){t.removeEventListener("focus",a,!0)})),z.returnFocus&&ct.one(ht,function(){e(O).focus()})),w())}function p(){!v&&t.body&&(V=!1,H=e(i),v=o(ut).attr({id:Z,"class":lt?et+(at?"IE6":"IE"):"",role:"dialog",tabindex:"-1"}).hide(),g=o(ut,"Overlay",at?"position:absolute":"").hide(),W=o(ut,"LoadingOverlay").add(o(ut,"LoadingGraphic")),x=o(ut,"Wrapper"),y=o(ut,"Content").append(M=o(ut,"Title"),S=o(ut,"Current"),P=o("button","Previous"),R=o("button","Next"),F=o("button","Slideshow"),W,K=o("button","Close")),x.append(o(ut).append(o(ut,"TopLeft"),b=o(ut,"TopCenter"),o(ut,"TopRight")),o(ut,!1,"clear:left").append(C=o(ut,"MiddleLeft"),y,T=o(ut,"MiddleRight")),o(ut,!1,"clear:left").append(o(ut,"BottomLeft"),k=o(ut,"BottomCenter"),o(ut,"BottomRight"))).find("div div").css({"float":"left"}),L=o(ut,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),_=R.add(P).add(S).add(F),e(t.body).append(g,v.append(x,L)))}function m(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),f(this))}return v?(V||(V=!0,R.click(function(){X.next()}),P.click(function(){X.prev()}),K.click(function(){X.close()}),g.click(function(){z.overlayClose&&X.close()}),e(t).bind("keydown."+et,function(e){var t=e.keyCode;U&&z.escKey&&27===t&&(e.preventDefault(),X.close()),U&&z.arrowKey&&E[1]&&!e.altKey&&(37===t?(e.preventDefault(),P.click()):39===t&&(e.preventDefault(),R.click()))}),e.isFunction(e.fn.on)?e(t).on("click."+et,"."+tt,i):e("."+tt).live("click."+et,i)),!0):!1}function w(){var t,n,r,a=X.prep,u=++ft;$=!0,q=!1,O=E[j],d(),c(st),c(ot,z.onLoad),z.h=z.height?h(z.height,"y")-N-D:z.innerHeight&&h(z.innerHeight,"y"),z.w=z.width?h(z.width,"x")-A-B:z.innerWidth&&h(z.innerWidth,"x"),z.mw=z.w,z.mh=z.h,z.maxWidth&&(z.mw=h(z.maxWidth,"x")-A-B,z.mw=z.w&&z.w<z.mw?z.w:z.mw),z.maxHeight&&(z.mh=h(z.maxHeight,"y")-N-D,z.mh=z.h&&z.h<z.mh?z.h:z.mh),t=z.href,Q=setTimeout(function(){W.show()},100),z.inline?(r=o(ut).hide().insertBefore(e(t)[0]),ct.one(st,function(){r.replaceWith(I.children())}),a(e(t))):z.iframe?a(" "):z.html?a(z.html):s(z,t)?(t=l(z,t),e(q=new Image).addClass(et+"Photo").bind("error",function(){z.title=!1,a(o(ut,"Error").html(z.imgError))}).one("load",function(){var e;u===ft&&(z.retinaImage&&i.devicePixelRatio>1&&(q.height=q.height/i.devicePixelRatio,q.width=q.width/i.devicePixelRatio),z.scalePhotos&&(n=function(){q.height-=q.height*e,q.width-=q.width*e},z.mw&&q.width>z.mw&&(e=(q.width-z.mw)/q.width,n()),z.mh&&q.height>z.mh&&(e=(q.height-z.mh)/q.height,n())),z.h&&(q.style.marginTop=Math.max(z.mh-q.height,0)/2+"px"),E[1]&&(z.loop||E[j+1])&&(q.style.cursor="pointer",q.onclick=function(){X.next()}),lt&&(q.style.msInterpolationMode="bicubic"),setTimeout(function(){a(q)},1))}),setTimeout(function(){q.src=t},1)):t&&L.load(t,z.data,function(t,i){u===ft&&a("error"===i?o(ut,"Error").html(z.xhrError):e(this).contents())})}var g,v,x,y,b,C,T,k,E,H,I,L,W,M,S,F,R,P,K,_,z,D,B,N,A,O,j,q,U,$,G,Q,X,J,V,Y={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,inline:!1,html:!1,iframe:!1,fastIframe:!0,photo:!1,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,className:!1,retinaImage:!1,retinaUrl:!1,retinaSuffix:"@2x.$1",current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",open:!1,returnFocus:!0,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",photoRegex:/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0},Z="colorbox",et="cbox",tt=et+"Element",it=et+"_open",ot=et+"_load",nt=et+"_complete",rt=et+"_cleanup",ht=et+"_closed",st=et+"_purge",lt=!e.support.leadingWhitespace,at=lt&&!i.XMLHttpRequest,dt=et+"_IE6",ct=e("<a/>"),ut="div",ft=0;e.colorbox||(e(p),X=e.fn[Z]=e[Z]=function(t,i){var o=this;if(t=t||{},p(),m()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,Z,e.extend({},e.data(this,Z)||Y,t))}).addClass(tt),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&f(o[0])}return o},X.position=function(e,t){function i(e){b[0].style.width=k[0].style.width=y[0].style.width=parseInt(e.style.width,10)-B+"px",y[0].style.height=C[0].style.height=T[0].style.height=parseInt(e.style.height,10)-D+"px"}var o,r,s,l=0,a=0,d=v.offset();H.unbind("resize."+et),v.css({top:-9e4,left:-9e4}),r=H.scrollTop(),s=H.scrollLeft(),z.fixed&&!at?(d.top-=r,d.left-=s,v.css({position:"fixed"})):(l=r,a=s,v.css({position:"absolute"})),a+=z.right!==!1?Math.max(H.width()-z.w-A-B-h(z.right,"x"),0):z.left!==!1?h(z.left,"x"):Math.round(Math.max(H.width()-z.w-A-B,0)/2),l+=z.bottom!==!1?Math.max(n()-z.h-N-D-h(z.bottom,"y"),0):z.top!==!1?h(z.top,"y"):Math.round(Math.max(n()-z.h-N-D,0)/2),v.css({top:d.top,left:d.left,visibility:"visible"}),e=v.width()===z.w+A&&v.height()===z.h+N?0:e||0,x[0].style.width=x[0].style.height="9999px",o={width:z.w+A+B,height:z.h+N+D,top:l,left:a},0===e&&v.css(o),v.dequeue().animate(o,{duration:e,complete:function(){i(this),$=!1,x[0].style.width=z.w+A+B+"px",x[0].style.height=z.h+N+D+"px",z.reposition&&setTimeout(function(){H.bind("resize."+et,X.position)},1),t&&t()},step:function(){i(this)}})},X.resize=function(e){U&&(e=e||{},e.width&&(z.w=h(e.width,"x")-A-B),e.innerWidth&&(z.w=h(e.innerWidth,"x")),I.css({width:z.w}),e.height&&(z.h=h(e.height,"y")-N-D),e.innerHeight&&(z.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(I.css({height:"auto"}),z.h=I.height()),I.css({height:z.h}),X.position("none"===z.transition?0:z.speed))},X.prep=function(t){function i(){return z.w=z.w||I.width(),z.w=z.mw&&z.mw<z.w?z.mw:z.w,z.w}function n(){return z.h=z.h||I.height(),z.h=z.mh&&z.mh<z.h?z.mh:z.h,z.h}if(U){var h,a="none"===z.transition?0:z.speed;I.empty().remove(),I=o(ut,"LoadedContent").append(t),I.hide().appendTo(L.show()).css({width:i(),overflow:z.scrolling?"auto":"hidden"}).css({height:n()}).prependTo(y),L.hide(),e(q).css({"float":"none"}),h=function(){function t(){lt&&v[0].style.removeAttribute("filter")}var i,n,h=E.length,d="frameBorder",u="allowTransparency";U&&(n=function(){clearTimeout(Q),W.hide(),c(nt,z.onComplete)},lt&&q&&I.fadeIn(100),M.html(z.title).add(I).show(),h>1?("string"==typeof z.current&&S.html(z.current.replace("{current}",j+1).replace("{total}",h)).show(),R[z.loop||h-1>j?"show":"hide"]().html(z.next),P[z.loop||j?"show":"hide"]().html(z.previous),z.slideshow&&F.show(),z.preloading&&e.each([r(-1),r(1)],function(){var t,i,o=E[this],n=e.data(o,Z);n&&n.href?(t=n.href,e.isFunction(t)&&(t=t.call(o))):t=e(o).attr("href"),t&&s(n,t)&&(t=l(n,t),i=new Image,i.src=t)})):_.hide(),z.iframe?(i=o("iframe")[0],d in i&&(i[d]=0),u in i&&(i[u]="true"),z.scrolling||(i.scrolling="no"),e(i).attr({src:z.href,name:(new Date).getTime(),"class":et+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,mozallowfullscreen:!0}).one("load",n).appendTo(I),ct.one(st,function(){i.src="//about:blank"}),z.fastIframe&&e(i).trigger("load")):n(),"fade"===z.transition?v.fadeTo(a,1,t):t())},"fade"===z.transition?v.fadeTo(a,0,function(){X.position(0,h)}):X.position(a,h)}},X.next=function(){!$&&E[1]&&(z.loop||E[j+1])&&(j=r(1),f(E[j]))},X.prev=function(){!$&&E[1]&&(z.loop||j)&&(j=r(-1),f(E[j]))},X.close=function(){U&&!G&&(G=!0,U=!1,c(rt,z.onCleanup),H.unbind("."+et+" ."+dt),g.fadeTo(200,0),v.stop().fadeTo(300,0,function(){v.add(g).css({opacity:1,cursor:"auto"}).hide(),c(st),I.empty().remove(),setTimeout(function(){G=!1,c(ht,z.onClosed)},1)}))},X.remove=function(){e([]).add(v).add(g).remove(),v=null,e("."+tt).removeData(Z).removeClass(tt),e(t).unbind("click."+et)},X.element=function(){return e(O)},X.settings=Y)})(jQuery,document,window);⏎ |
| 0 | /*! | |
| 1 | jQuery ColorBox v1.4.6 - 2013-03-19 | |
| 2 | (c) 2013 Jack Moore - jacklmoore.com/colorbox | |
| 3 | license: http://www.opensource.org/licenses/mit-license.php | |
| 4 | */ | |
| 5 | (function ($, document, window) { | |
| 6 | var | |
| 7 | // Default settings object. | |
| 8 | // See http://jacklmoore.com/colorbox for details. | |
| 9 | defaults = { | |
| 10 | transition: "elastic", | |
| 11 | speed: 300, | |
| 12 | width: false, | |
| 13 | initialWidth: "600", | |
| 14 | innerWidth: false, | |
| 15 | maxWidth: false, | |
| 16 | height: false, | |
| 17 | initialHeight: "450", | |
| 18 | innerHeight: false, | |
| 19 | maxHeight: false, | |
| 20 | scalePhotos: true, | |
| 21 | scrolling: true, | |
| 22 | inline: false, | |
| 23 | html: false, | |
| 24 | iframe: false, | |
| 25 | fastIframe: true, | |
| 26 | photo: false, | |
| 27 | href: false, | |
| 28 | title: false, | |
| 29 | rel: false, | |
| 30 | opacity: 0.9, | |
| 31 | preloading: true, | |
| 32 | className: false, | |
| 33 | ||
| 34 | // alternate image paths for high-res displays | |
| 35 | retinaImage: false, | |
| 36 | retinaUrl: false, | |
| 37 | retinaSuffix: '@2x.$1', | |
| 38 | ||
| 39 | // internationalization | |
| 40 | current: "image {current} of {total}", | |
| 41 | previous: "previous", | |
| 42 | next: "next", | |
| 43 | close: "close", | |
| 44 | xhrError: "This content failed to load.", | |
| 45 | imgError: "This image failed to load.", | |
| 46 | ||
| 47 | open: false, | |
| 48 | returnFocus: true, | |
| 49 | reposition: true, | |
| 50 | loop: true, | |
| 51 | slideshow: false, | |
| 52 | slideshowAuto: true, | |
| 53 | slideshowSpeed: 2500, | |
| 54 | slideshowStart: "start slideshow", | |
| 55 | slideshowStop: "stop slideshow", | |
| 56 | photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i, | |
| 57 | ||
| 58 | onOpen: false, | |
| 59 | onLoad: false, | |
| 60 | onComplete: false, | |
| 61 | onCleanup: false, | |
| 62 | onClosed: false, | |
| 63 | overlayClose: true, | |
| 64 | escKey: true, | |
| 65 | arrowKey: true, | |
| 66 | top: false, | |
| 67 | bottom: false, | |
| 68 | left: false, | |
| 69 | right: false, | |
| 70 | fixed: false, | |
| 71 | data: undefined | |
| 72 | }, | |
| 73 | ||
| 74 | // Abstracting the HTML and event identifiers for easy rebranding | |
| 75 | colorbox = 'colorbox', | |
| 76 | prefix = 'cbox', | |
| 77 | boxElement = prefix + 'Element', | |
| 78 | ||
| 79 | // Events | |
| 80 | event_open = prefix + '_open', | |
| 81 | event_load = prefix + '_load', | |
| 82 | event_complete = prefix + '_complete', | |
| 83 | event_cleanup = prefix + '_cleanup', | |
| 84 | event_closed = prefix + '_closed', | |
| 85 | event_purge = prefix + '_purge', | |
| 86 | ||
| 87 | // Special Handling for IE | |
| 88 | isIE = !$.support.leadingWhitespace, // IE6 to IE8 | |
| 89 | isIE6 = isIE && !window.XMLHttpRequest, // IE6 | |
| 90 | event_ie6 = prefix + '_IE6', | |
| 91 | ||
| 92 | // Cached jQuery Object Variables | |
| 93 | $overlay, | |
| 94 | $box, | |
| 95 | $wrap, | |
| 96 | $content, | |
| 97 | $topBorder, | |
| 98 | $leftBorder, | |
| 99 | $rightBorder, | |
| 100 | $bottomBorder, | |
| 101 | $related, | |
| 102 | $window, | |
| 103 | $loaded, | |
| 104 | $loadingBay, | |
| 105 | $loadingOverlay, | |
| 106 | $title, | |
| 107 | $current, | |
| 108 | $slideshow, | |
| 109 | $next, | |
| 110 | $prev, | |
| 111 | $close, | |
| 112 | $groupControls, | |
| 113 | $events = $('<a/>'), | |
| 114 | ||
| 115 | // Variables for cached values or use across multiple functions | |
| 116 | settings, | |
| 117 | interfaceHeight, | |
| 118 | interfaceWidth, | |
| 119 | loadedHeight, | |
| 120 | loadedWidth, | |
| 121 | element, | |
| 122 | index, | |
| 123 | photo, | |
| 124 | open, | |
| 125 | active, | |
| 126 | closing, | |
| 127 | loadingTimer, | |
| 128 | publicMethod, | |
| 129 | div = "div", | |
| 130 | className, | |
| 131 | requests = 0, | |
| 132 | init; | |
| 133 | ||
| 134 | // **************** | |
| 135 | // HELPER FUNCTIONS | |
| 136 | // **************** | |
| 137 | ||
| 138 | // Convience function for creating new jQuery objects | |
| 139 | function $tag(tag, id, css) { | |
| 140 | var element = document.createElement(tag); | |
| 141 | ||
| 142 | if (id) { | |
| 143 | element.id = prefix + id; | |
| 144 | } | |
| 145 | ||
| 146 | if (css) { | |
| 147 | element.style.cssText = css; | |
| 148 | } | |
| 149 | ||
| 150 | return $(element); | |
| 151 | } | |
| 152 | ||
| 153 | // Get the window height using innerHeight when available to avoid an issue with iOS | |
| 154 | // http://bugs.jquery.com/ticket/6724 | |
| 155 | function winheight() { | |
| 156 | return window.innerHeight ? window.innerHeight : $(window).height(); | |
| 157 | } | |
| 158 | ||
| 159 | // Determine the next and previous members in a group. | |
| 160 | function getIndex(increment) { | |
| 161 | var | |
| 162 | max = $related.length, | |
| 163 | newIndex = (index + increment) % max; | |
| 164 | ||
| 165 | return (newIndex < 0) ? max + newIndex : newIndex; | |
| 166 | } | |
| 167 | ||
| 168 | // Convert '%' and 'px' values to integers | |
| 169 | function setSize(size, dimension) { | |
| 170 | return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); | |
| 171 | } | |
| 172 | ||
| 173 | // Checks an href to see if it is a photo. | |
| 174 | // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex. | |
| 175 | function isImage(settings, url) { | |
| 176 | return settings.photo || settings.photoRegex.test(url); | |
| 177 | } | |
| 178 | ||
| 179 | function retinaUrl(settings, url) { | |
| 180 | return settings.retinaUrl && window.devicePixelRatio > 1 ? url.replace(settings.photoRegex, settings.retinaSuffix) : url; | |
| 181 | } | |
| 182 | ||
| 183 | function trapFocus(e) { | |
| 184 | if ('contains' in $box[0] && !$box[0].contains(e.target)) { | |
| 185 | e.stopPropagation(); | |
| 186 | $box.focus(); | |
| 187 | } | |
| 188 | } | |
| 189 | ||
| 190 | // Assigns function results to their respective properties | |
| 191 | function makeSettings() { | |
| 192 | var i, | |
| 193 | data = $.data(element, colorbox); | |
| 194 | ||
| 195 | if (data == null) { | |
| 196 | settings = $.extend({}, defaults); | |
| 197 | if (console && console.log) { | |
| 198 | console.log('Error: cboxElement missing settings object'); | |
| 199 | } | |
| 200 | } else { | |
| 201 | settings = $.extend({}, data); | |
| 202 | } | |
| 203 | ||
| 204 | for (i in settings) { | |
| 205 | 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. | |
| 206 | settings[i] = settings[i].call(element); | |
| 207 | } | |
| 208 | } | |
| 209 | ||
| 210 | settings.rel = settings.rel || element.rel || $(element).data('rel') || 'nofollow'; | |
| 211 | settings.href = settings.href || $(element).attr('href'); | |
| 212 | settings.title = settings.title || element.title; | |
| 213 | ||
| 214 | if (typeof settings.href === "string") { | |
| 215 | settings.href = $.trim(settings.href); | |
| 216 | } | |
| 217 | } | |
| 218 | ||
| 219 | function trigger(event, callback) { | |
| 220 | // for external use | |
| 221 | $(document).trigger(event); | |
| 222 | ||
| 223 | // for internal use | |
| 224 | $events.trigger(event); | |
| 225 | ||
| 226 | if ($.isFunction(callback)) { | |
| 227 | callback.call(element); | |
| 228 | } | |
| 229 | } | |
| 230 | ||
| 231 | // Slideshow functionality | |
| 232 | function slideshow() { | |
| 233 | var | |
| 234 | timeOut, | |
| 235 | className = prefix + "Slideshow_", | |
| 236 | click = "click." + prefix, | |
| 237 | clear, | |
| 238 | set, | |
| 239 | start, | |
| 240 | stop; | |
| 241 | ||
| 242 | if (settings.slideshow && $related[1]) { | |
| 243 | clear = function () { | |
| 244 | clearTimeout(timeOut); | |
| 245 | }; | |
| 246 | ||
| 247 | set = function () { | |
| 248 | if (settings.loop || $related[index + 1]) { | |
| 249 | timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed); | |
| 250 | } | |
| 251 | }; | |
| 252 | ||
| 253 | start = function () { | |
| 254 | $slideshow | |
| 255 | .html(settings.slideshowStop) | |
| 256 | .unbind(click) | |
| 257 | .one(click, stop); | |
| 258 | ||
| 259 | $events | |
| 260 | .bind(event_complete, set) | |
| 261 | .bind(event_load, clear) | |
| 262 | .bind(event_cleanup, stop); | |
| 263 | ||
| 264 | $box.removeClass(className + "off").addClass(className + "on"); | |
| 265 | }; | |
| 266 | ||
| 267 | stop = function () { | |
| 268 | clear(); | |
| 269 | ||
| 270 | $events | |
| 271 | .unbind(event_complete, set) | |
| 272 | .unbind(event_load, clear) | |
| 273 | .unbind(event_cleanup, stop); | |
| 274 | ||
| 275 | $slideshow | |
| 276 | .html(settings.slideshowStart) | |
| 277 | .unbind(click) | |
| 278 | .one(click, function () { | |
| 279 | publicMethod.next(); | |
| 280 | start(); | |
| 281 | }); | |
| 282 | ||
| 283 | $box.removeClass(className + "on").addClass(className + "off"); | |
| 284 | }; | |
| 285 | ||
| 286 | if (settings.slideshowAuto) { | |
| 287 | start(); | |
| 288 | } else { | |
| 289 | stop(); | |
| 290 | } | |
| 291 | } else { | |
| 292 | $box.removeClass(className + "off " + className + "on"); | |
| 293 | } | |
| 294 | } | |
| 295 | ||
| 296 | function launch(target) { | |
| 297 | if (!closing) { | |
| 298 | ||
| 299 | element = target; | |
| 300 | ||
| 301 | makeSettings(); | |
| 302 | ||
| 303 | $related = $(element); | |
| 304 | ||
| 305 | index = 0; | |
| 306 | ||
| 307 | if (settings.rel !== 'nofollow') { | |
| 308 | $related = $('.' + boxElement).filter(function () { | |
| 309 | var data = $.data(this, colorbox), | |
| 310 | relRelated; | |
| 311 | ||
| 312 | if (data) { | |
| 313 | relRelated = $(this).data('rel') || data.rel || this.rel; | |
| 314 | } | |
| 315 | ||
| 316 | return (relRelated === settings.rel); | |
| 317 | }); | |
| 318 | index = $related.index(element); | |
| 319 | ||
| 320 | // Check direct calls to ColorBox. | |
| 321 | if (index === -1) { | |
| 322 | $related = $related.add(element); | |
| 323 | index = $related.length - 1; | |
| 324 | } | |
| 325 | } | |
| 326 | ||
| 327 | $overlay.css({ | |
| 328 | opacity: parseFloat(settings.opacity), | |
| 329 | cursor: settings.overlayClose ? "pointer" : "auto", | |
| 330 | visibility: 'visible' | |
| 331 | }).show(); | |
| 332 | ||
| 333 | ||
| 334 | if (className) { | |
| 335 | $box.add($overlay).removeClass(className); | |
| 336 | } | |
| 337 | if (settings.className) { | |
| 338 | $box.add($overlay).addClass(settings.className); | |
| 339 | } | |
| 340 | className = settings.className; | |
| 341 | ||
| 342 | $close.html(settings.close).show(); | |
| 343 | ||
| 344 | if (!open) { | |
| 345 | open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. | |
| 346 | ||
| 347 | // Show colorbox so the sizes can be calculated in older versions of jQuery | |
| 348 | $box.css({visibility:'hidden', display:'block'}); | |
| 349 | ||
| 350 | $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden').appendTo($content); | |
| 351 | ||
| 352 | // Cache values needed for size calculations | |
| 353 | interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6 | |
| 354 | interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); | |
| 355 | loadedHeight = $loaded.outerHeight(true); | |
| 356 | loadedWidth = $loaded.outerWidth(true); | |
| 357 | ||
| 358 | ||
| 359 | // Opens inital empty ColorBox prior to content being loaded. | |
| 360 | settings.w = setSize(settings.initialWidth, 'x'); | |
| 361 | settings.h = setSize(settings.initialHeight, 'y'); | |
| 362 | publicMethod.position(); | |
| 363 | ||
| 364 | if (isIE6) { | |
| 365 | $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () { | |
| 366 | $overlay.css({width: $window.width(), height: winheight(), top: $window.scrollTop(), left: $window.scrollLeft()}); | |
| 367 | }).trigger('resize.' + event_ie6); | |
| 368 | } | |
| 369 | ||
| 370 | slideshow(); | |
| 371 | ||
| 372 | trigger(event_open, settings.onOpen); | |
| 373 | ||
| 374 | $groupControls.add($title).hide(); | |
| 375 | ||
| 376 | $box.focus(); | |
| 377 | ||
| 378 | // Confine focus to the modal | |
| 379 | // Uses event capturing that is not supported in IE8- | |
| 380 | if (document.addEventListener) { | |
| 381 | ||
| 382 | document.addEventListener('focus', trapFocus, true); | |
| 383 | ||
| 384 | $events.one(event_closed, function () { | |
| 385 | document.removeEventListener('focus', trapFocus, true); | |
| 386 | }); | |
| 387 | } | |
| 388 | ||
| 389 | // Return focus on closing | |
| 390 | if (settings.returnFocus) { | |
| 391 | $events.one(event_closed, function () { | |
| 392 | $(element).focus(); | |
| 393 | }); | |
| 394 | } | |
| 395 | } | |
| 396 | ||
| 397 | load(); | |
| 398 | } | |
| 399 | } | |
| 400 | ||
| 401 | // ColorBox's markup needs to be added to the DOM prior to being called | |
| 402 | // so that the browser will go ahead and load the CSS background images. | |
| 403 | function appendHTML() { | |
| 404 | if (!$box && document.body) { | |
| 405 | init = false; | |
| 406 | ||
| 407 | $window = $(window); | |
| 408 | $box = $tag(div).attr({ | |
| 409 | id: colorbox, | |
| 410 | 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : '', | |
| 411 | role: 'dialog', | |
| 412 | tabindex: '-1' | |
| 413 | }).hide(); | |
| 414 | $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide(); | |
| 415 | $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")); | |
| 416 | $wrap = $tag(div, "Wrapper"); | |
| 417 | $content = $tag(div, "Content").append( | |
| 418 | $title = $tag(div, "Title"), | |
| 419 | $current = $tag(div, "Current"), | |
| 420 | $prev = $tag('button', "Previous"), | |
| 421 | $next = $tag('button', "Next"), | |
| 422 | $slideshow = $tag('button', "Slideshow"), | |
| 423 | $loadingOverlay, | |
| 424 | $close = $tag('button', "Close") | |
| 425 | ); | |
| 426 | ||
| 427 | $wrap.append( // The 3x3 Grid that makes up ColorBox | |
| 428 | $tag(div).append( | |
| 429 | $tag(div, "TopLeft"), | |
| 430 | $topBorder = $tag(div, "TopCenter"), | |
| 431 | $tag(div, "TopRight") | |
| 432 | ), | |
| 433 | $tag(div, false, 'clear:left').append( | |
| 434 | $leftBorder = $tag(div, "MiddleLeft"), | |
| 435 | $content, | |
| 436 | $rightBorder = $tag(div, "MiddleRight") | |
| 437 | ), | |
| 438 | $tag(div, false, 'clear:left').append( | |
| 439 | $tag(div, "BottomLeft"), | |
| 440 | $bottomBorder = $tag(div, "BottomCenter"), | |
| 441 | $tag(div, "BottomRight") | |
| 442 | ) | |
| 443 | ).find('div div').css({'float': 'left'}); | |
| 444 | ||
| 445 | $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none'); | |
| 446 | ||
| 447 | $groupControls = $next.add($prev).add($current).add($slideshow); | |
| 448 | ||
| 449 | $(document.body).append($overlay, $box.append($wrap, $loadingBay)); | |
| 450 | } | |
| 451 | } | |
| 452 | ||
| 453 | // Add ColorBox's event bindings | |
| 454 | function addBindings() { | |
| 455 | function clickHandler(e) { | |
| 456 | // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt. | |
| 457 | // See: http://jacklmoore.com/notes/click-events/ | |
| 458 | if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) { | |
| 459 | e.preventDefault(); | |
| 460 | launch(this); | |
| 461 | } | |
| 462 | } | |
| 463 | ||
| 464 | if ($box) { | |
| 465 | if (!init) { | |
| 466 | init = true; | |
| 467 | ||
| 468 | // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly. | |
| 469 | $next.click(function () { | |
| 470 | publicMethod.next(); | |
| 471 | }); | |
| 472 | $prev.click(function () { | |
| 473 | publicMethod.prev(); | |
| 474 | }); | |
| 475 | $close.click(function () { | |
| 476 | publicMethod.close(); | |
| 477 | }); | |
| 478 | $overlay.click(function () { | |
| 479 | if (settings.overlayClose) { | |
| 480 | publicMethod.close(); | |
| 481 | } | |
| 482 | }); | |
| 483 | ||
| 484 | // Key Bindings | |
| 485 | $(document).bind('keydown.' + prefix, function (e) { | |
| 486 | var key = e.keyCode; | |
| 487 | if (open && settings.escKey && key === 27) { | |
| 488 | e.preventDefault(); | |
| 489 | publicMethod.close(); | |
| 490 | } | |
| 491 | if (open && settings.arrowKey && $related[1] && !e.altKey) { | |
| 492 | if (key === 37) { | |
| 493 | e.preventDefault(); | |
| 494 | $prev.click(); | |
| 495 | } else if (key === 39) { | |
| 496 | e.preventDefault(); | |
| 497 | $next.click(); | |
| 498 | } | |
| 499 | } | |
| 500 | }); | |
| 501 | ||
| 502 | if ($.isFunction($.fn.on)) { | |
| 503 | // For jQuery 1.7+ | |
| 504 | $(document).on('click.'+prefix, '.'+boxElement, clickHandler); | |
| 505 | } else { | |
| 506 | // For jQuery 1.3.x -> 1.6.x | |
| 507 | // This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed. | |
| 508 | // This is not here for jQuery 1.9, it's here for legacy users. | |
| 509 | $('.'+boxElement).live('click.'+prefix, clickHandler); | |
| 510 | } | |
| 511 | } | |
| 512 | return true; | |
| 513 | } | |
| 514 | return false; | |
| 515 | } | |
| 516 | ||
| 517 | // Don't do anything if ColorBox already exists. | |
| 518 | if ($.colorbox) { | |
| 519 | return; | |
| 520 | } | |
| 521 | ||
| 522 | // Append the HTML when the DOM loads | |
| 523 | $(appendHTML); | |
| 524 | ||
| 525 | ||
| 526 | // **************** | |
| 527 | // PUBLIC FUNCTIONS | |
| 528 | // Usage format: $.fn.colorbox.close(); | |
| 529 | // Usage from within an iframe: parent.$.fn.colorbox.close(); | |
| 530 | // **************** | |
| 531 | ||
| 532 | publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) { | |
| 533 | var $this = this; | |
| 534 | ||
| 535 | options = options || {}; | |
| 536 | ||
| 537 | appendHTML(); | |
| 538 | ||
| 539 | if (addBindings()) { | |
| 540 | if ($.isFunction($this)) { // assume a call to $.colorbox | |
| 541 | $this = $('<a/>'); | |
| 542 | options.open = true; | |
| 543 | } else if (!$this[0]) { // colorbox being applied to empty collection | |
| 544 | return $this; | |
| 545 | } | |
| 546 | ||
| 547 | if (callback) { | |
| 548 | options.onComplete = callback; | |
| 549 | } | |
| 550 | ||
| 551 | $this.each(function () { | |
| 552 | $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options)); | |
| 553 | }).addClass(boxElement); | |
| 554 | ||
| 555 | if (($.isFunction(options.open) && options.open.call($this)) || options.open) { | |
| 556 | launch($this[0]); | |
| 557 | } | |
| 558 | } | |
| 559 | ||
| 560 | return $this; | |
| 561 | }; | |
| 562 | ||
| 563 | publicMethod.position = function (speed, loadedCallback) { | |
| 564 | var | |
| 565 | css, | |
| 566 | top = 0, | |
| 567 | left = 0, | |
| 568 | offset = $box.offset(), | |
| 569 | scrollTop, | |
| 570 | scrollLeft; | |
| 571 | ||
| 572 | $window.unbind('resize.' + prefix); | |
| 573 | ||
| 574 | // remove the modal so that it doesn't influence the document width/height | |
| 575 | $box.css({top: -9e4, left: -9e4}); | |
| 576 | ||
| 577 | scrollTop = $window.scrollTop(); | |
| 578 | scrollLeft = $window.scrollLeft(); | |
| 579 | ||
| 580 | if (settings.fixed && !isIE6) { | |
| 581 | offset.top -= scrollTop; | |
| 582 | offset.left -= scrollLeft; | |
| 583 | $box.css({position: 'fixed'}); | |
| 584 | } else { | |
| 585 | top = scrollTop; | |
| 586 | left = scrollLeft; | |
| 587 | $box.css({position: 'absolute'}); | |
| 588 | } | |
| 589 | ||
| 590 | // keeps the top and left positions within the browser's viewport. | |
| 591 | if (settings.right !== false) { | |
| 592 | left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0); | |
| 593 | } else if (settings.left !== false) { | |
| 594 | left += setSize(settings.left, 'x'); | |
| 595 | } else { | |
| 596 | left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2); | |
| 597 | } | |
| 598 | ||
| 599 | if (settings.bottom !== false) { | |
| 600 | top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0); | |
| 601 | } else if (settings.top !== false) { | |
| 602 | top += setSize(settings.top, 'y'); | |
| 603 | } else { | |
| 604 | top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0) / 2); | |
| 605 | } | |
| 606 | ||
| 607 | $box.css({top: offset.top, left: offset.left, visibility:'visible'}); | |
| 608 | ||
| 609 | // setting the speed to 0 to reduce the delay between same-sized content. | |
| 610 | speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0; | |
| 611 | ||
| 612 | // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, | |
| 613 | // but it has to be shrank down around the size of div#colorbox when it's done. If not, | |
| 614 | // it can invoke an obscure IE bug when using iframes. | |
| 615 | $wrap[0].style.width = $wrap[0].style.height = "9999px"; | |
| 616 | ||
| 617 | function modalDimensions(that) { | |
| 618 | $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt(that.style.width,10) - interfaceWidth)+'px'; | |
| 619 | $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt(that.style.height,10) - interfaceHeight)+'px'; | |
| 620 | } | |
| 621 | ||
| 622 | css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left}; | |
| 623 | ||
| 624 | if(speed===0){ // temporary workaround to side-step jQuery-UI 1.8 bug (http://bugs.jquery.com/ticket/12273) | |
| 625 | $box.css(css); | |
| 626 | } | |
| 627 | $box.dequeue().animate(css, { | |
| 628 | duration: speed, | |
| 629 | complete: function () { | |
| 630 | modalDimensions(this); | |
| 631 | ||
| 632 | active = false; | |
| 633 | ||
| 634 | // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. | |
| 635 | $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px"; | |
| 636 | $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px"; | |
| 637 | ||
| 638 | if (settings.reposition) { | |
| 639 | setTimeout(function () { // small delay before binding onresize due to an IE8 bug. | |
| 640 | $window.bind('resize.' + prefix, publicMethod.position); | |
| 641 | }, 1); | |
| 642 | } | |
| 643 | ||
| 644 | if (loadedCallback) { | |
| 645 | loadedCallback(); | |
| 646 | } | |
| 647 | }, | |
| 648 | step: function () { | |
| 649 | modalDimensions(this); | |
| 650 | } | |
| 651 | }); | |
| 652 | }; | |
| 653 | ||
| 654 | publicMethod.resize = function (options) { | |
| 655 | if (open) { | |
| 656 | options = options || {}; | |
| 657 | ||
| 658 | if (options.width) { | |
| 659 | settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth; | |
| 660 | } | |
| 661 | if (options.innerWidth) { | |
| 662 | settings.w = setSize(options.innerWidth, 'x'); | |
| 663 | } | |
| 664 | $loaded.css({width: settings.w}); | |
| 665 | ||
| 666 | if (options.height) { | |
| 667 | settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight; | |
| 668 | } | |
| 669 | if (options.innerHeight) { | |
| 670 | settings.h = setSize(options.innerHeight, 'y'); | |
| 671 | } | |
| 672 | if (!options.innerHeight && !options.height) { | |
| 673 | $loaded.css({height: "auto"}); | |
| 674 | settings.h = $loaded.height(); | |
| 675 | } | |
| 676 | $loaded.css({height: settings.h}); | |
| 677 | ||
| 678 | publicMethod.position(settings.transition === "none" ? 0 : settings.speed); | |
| 679 | } | |
| 680 | }; | |
| 681 | ||
| 682 | publicMethod.prep = function (object) { | |
| 683 | if (!open) { | |
| 684 | return; | |
| 685 | } | |
| 686 | ||
| 687 | var callback, speed = settings.transition === "none" ? 0 : settings.speed; | |
| 688 | ||
| 689 | $loaded.empty().remove(); // Using empty first may prevent some IE7 issues. | |
| 690 | ||
| 691 | $loaded = $tag(div, 'LoadedContent').append(object); | |
| 692 | ||
| 693 | function getWidth() { | |
| 694 | settings.w = settings.w || $loaded.width(); | |
| 695 | settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; | |
| 696 | return settings.w; | |
| 697 | } | |
| 698 | function getHeight() { | |
| 699 | settings.h = settings.h || $loaded.height(); | |
| 700 | settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; | |
| 701 | return settings.h; | |
| 702 | } | |
| 703 | ||
| 704 | $loaded.hide() | |
| 705 | .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations. | |
| 706 | .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'}) | |
| 707 | .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height. | |
| 708 | .prependTo($content); | |
| 709 | ||
| 710 | $loadingBay.hide(); | |
| 711 | ||
| 712 | // 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. | |
| 713 | ||
| 714 | $(photo).css({'float': 'none'}); | |
| 715 | ||
| 716 | callback = function () { | |
| 717 | var total = $related.length, | |
| 718 | iframe, | |
| 719 | frameBorder = 'frameBorder', | |
| 720 | allowTransparency = 'allowTransparency', | |
| 721 | complete; | |
| 722 | ||
| 723 | if (!open) { | |
| 724 | return; | |
| 725 | } | |
| 726 | ||
| 727 | function removeFilter() { | |
| 728 | if (isIE) { | |
| 729 | $box[0].style.removeAttribute('filter'); | |
| 730 | } | |
| 731 | } | |
| 732 | ||
| 733 | complete = function () { | |
| 734 | clearTimeout(loadingTimer); | |
| 735 | $loadingOverlay.hide(); | |
| 736 | trigger(event_complete, settings.onComplete); | |
| 737 | }; | |
| 738 | ||
| 739 | if (isIE) { | |
| 740 | //This fadeIn helps the bicubic resampling to kick-in. | |
| 741 | if (photo) { | |
| 742 | $loaded.fadeIn(100); | |
| 743 | } | |
| 744 | } | |
| 745 | ||
| 746 | $title.html(settings.title).add($loaded).show(); | |
| 747 | ||
| 748 | if (total > 1) { // handle grouping | |
| 749 | if (typeof settings.current === "string") { | |
| 750 | $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show(); | |
| 751 | } | |
| 752 | ||
| 753 | $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next); | |
| 754 | $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous); | |
| 755 | ||
| 756 | if (settings.slideshow) { | |
| 757 | $slideshow.show(); | |
| 758 | } | |
| 759 | ||
| 760 | // Preloads images within a rel group | |
| 761 | if (settings.preloading) { | |
| 762 | $.each([getIndex(-1), getIndex(1)], function(){ | |
| 763 | var src, | |
| 764 | img, | |
| 765 | i = $related[this], | |
| 766 | data = $.data(i, colorbox); | |
| 767 | ||
| 768 | if (data && data.href) { | |
| 769 | src = data.href; | |
| 770 | if ($.isFunction(src)) { | |
| 771 | src = src.call(i); | |
| 772 | } | |
| 773 | } else { | |
| 774 | src = $(i).attr('href'); | |
| 775 | } | |
| 776 | ||
| 777 | if (src && isImage(data, src)) { | |
| 778 | src = retinaUrl(data, src); | |
| 779 | img = new Image(); | |
| 780 | img.src = src; | |
| 781 | } | |
| 782 | }); | |
| 783 | } | |
| 784 | } else { | |
| 785 | $groupControls.hide(); | |
| 786 | } | |
| 787 | ||
| 788 | if (settings.iframe) { | |
| 789 | iframe = $tag('iframe')[0]; | |
| 790 | ||
| 791 | if (frameBorder in iframe) { | |
| 792 | iframe[frameBorder] = 0; | |
| 793 | } | |
| 794 | ||
| 795 | if (allowTransparency in iframe) { | |
| 796 | iframe[allowTransparency] = "true"; | |
| 797 | } | |
| 798 | ||
| 799 | if (!settings.scrolling) { | |
| 800 | iframe.scrolling = "no"; | |
| 801 | } | |
| 802 | ||
| 803 | $(iframe) | |
| 804 | .attr({ | |
| 805 | src: settings.href, | |
| 806 | name: (new Date()).getTime(), // give the iframe a unique name to prevent caching | |
| 807 | 'class': prefix + 'Iframe', | |
| 808 | allowFullScreen : true, // allow HTML5 video to go fullscreen | |
| 809 | webkitAllowFullScreen : true, | |
| 810 | mozallowfullscreen : true | |
| 811 | }) | |
| 812 | .one('load', complete) | |
| 813 | .appendTo($loaded); | |
| 814 | ||
| 815 | $events.one(event_purge, function () { | |
| 816 | iframe.src = "//about:blank"; | |
| 817 | }); | |
| 818 | ||
| 819 | if (settings.fastIframe) { | |
| 820 | $(iframe).trigger('load'); | |
| 821 | } | |
| 822 | } else { | |
| 823 | complete(); | |
| 824 | } | |
| 825 | ||
| 826 | if (settings.transition === 'fade') { | |
| 827 | $box.fadeTo(speed, 1, removeFilter); | |
| 828 | } else { | |
| 829 | removeFilter(); | |
| 830 | } | |
| 831 | }; | |
| 832 | ||
| 833 | if (settings.transition === 'fade') { | |
| 834 | $box.fadeTo(speed, 0, function () { | |
| 835 | publicMethod.position(0, callback); | |
| 836 | }); | |
| 837 | } else { | |
| 838 | publicMethod.position(speed, callback); | |
| 839 | } | |
| 840 | }; | |
| 841 | ||
| 842 | function load () { | |
| 843 | var href, setResize, prep = publicMethod.prep, $inline, request = ++requests; | |
| 844 | ||
| 845 | active = true; | |
| 846 | ||
| 847 | photo = false; | |
| 848 | ||
| 849 | element = $related[index]; | |
| 850 | ||
| 851 | makeSettings(); | |
| 852 | ||
| 853 | trigger(event_purge); | |
| 854 | ||
| 855 | trigger(event_load, settings.onLoad); | |
| 856 | ||
| 857 | settings.h = settings.height ? | |
| 858 | setSize(settings.height, 'y') - loadedHeight - interfaceHeight : | |
| 859 | settings.innerHeight && setSize(settings.innerHeight, 'y'); | |
| 860 | ||
| 861 | settings.w = settings.width ? | |
| 862 | setSize(settings.width, 'x') - loadedWidth - interfaceWidth : | |
| 863 | settings.innerWidth && setSize(settings.innerWidth, 'x'); | |
| 864 | ||
| 865 | // Sets the minimum dimensions for use in image scaling | |
| 866 | settings.mw = settings.w; | |
| 867 | settings.mh = settings.h; | |
| 868 | ||
| 869 | // Re-evaluate the minimum width and height based on maxWidth and maxHeight values. | |
| 870 | // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead. | |
| 871 | if (settings.maxWidth) { | |
| 872 | settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth; | |
| 873 | settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw; | |
| 874 | } | |
| 875 | if (settings.maxHeight) { | |
| 876 | settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight; | |
| 877 | settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh; | |
| 878 | } | |
| 879 | ||
| 880 | href = settings.href; | |
| 881 | ||
| 882 | loadingTimer = setTimeout(function () { | |
| 883 | $loadingOverlay.show(); | |
| 884 | }, 100); | |
| 885 | ||
| 886 | if (settings.inline) { | |
| 887 | // Inserts an empty placeholder where inline content is being pulled from. | |
| 888 | // An event is bound to put inline content back when ColorBox closes or loads new content. | |
| 889 | $inline = $tag(div).hide().insertBefore($(href)[0]); | |
| 890 | ||
| 891 | $events.one(event_purge, function () { | |
| 892 | $inline.replaceWith($loaded.children()); | |
| 893 | }); | |
| 894 | ||
| 895 | prep($(href)); | |
| 896 | } else if (settings.iframe) { | |
| 897 | // IFrame element won't be added to the DOM until it is ready to be displayed, | |
| 898 | // to avoid problems with DOM-ready JS that might be trying to run in that iframe. | |
| 899 | prep(" "); | |
| 900 | } else if (settings.html) { | |
| 901 | prep(settings.html); | |
| 902 | } else if (isImage(settings, href)) { | |
| 903 | ||
| 904 | href = retinaUrl(settings, href); | |
| 905 | ||
| 906 | $(photo = new Image()) | |
| 907 | .addClass(prefix + 'Photo') | |
| 908 | .bind('error',function () { | |
| 909 | settings.title = false; | |
| 910 | prep($tag(div, 'Error').html(settings.imgError)); | |
| 911 | }) | |
| 912 | .one('load', function () { | |
| 913 | var percent; | |
| 914 | ||
| 915 | if (request !== requests) { | |
| 916 | return; | |
| 917 | } | |
| 918 | ||
| 919 | if (settings.retinaImage && window.devicePixelRatio > 1) { | |
| 920 | photo.height = photo.height / window.devicePixelRatio; | |
| 921 | photo.width = photo.width / window.devicePixelRatio; | |
| 922 | } | |
| 923 | ||
| 924 | if (settings.scalePhotos) { | |
| 925 | setResize = function () { | |
| 926 | photo.height -= photo.height * percent; | |
| 927 | photo.width -= photo.width * percent; | |
| 928 | }; | |
| 929 | if (settings.mw && photo.width > settings.mw) { | |
| 930 | percent = (photo.width - settings.mw) / photo.width; | |
| 931 | setResize(); | |
| 932 | } | |
| 933 | if (settings.mh && photo.height > settings.mh) { | |
| 934 | percent = (photo.height - settings.mh) / photo.height; | |
| 935 | setResize(); | |
| 936 | } | |
| 937 | } | |
| 938 | ||
| 939 | if (settings.h) { | |
| 940 | photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px'; | |
| 941 | } | |
| 942 | ||
| 943 | if ($related[1] && (settings.loop || $related[index + 1])) { | |
| 944 | photo.style.cursor = 'pointer'; | |
| 945 | photo.onclick = function () { | |
| 946 | publicMethod.next(); | |
| 947 | }; | |
| 948 | } | |
| 949 | ||
| 950 | if (isIE) { | |
| 951 | photo.style.msInterpolationMode = 'bicubic'; | |
| 952 | } | |
| 953 | ||
| 954 | setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise. | |
| 955 | prep(photo); | |
| 956 | }, 1); | |
| 957 | }); | |
| 958 | ||
| 959 | setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise. | |
| 960 | photo.src = href; | |
| 961 | }, 1); | |
| 962 | } else if (href) { | |
| 963 | $loadingBay.load(href, settings.data, function (data, status) { | |
| 964 | if (request === requests) { | |
| 965 | prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents()); | |
| 966 | } | |
| 967 | }); | |
| 968 | } | |
| 969 | } | |
| 970 | ||
| 971 | // Navigates to the next page/image in a set. | |
| 972 | publicMethod.next = function () { | |
| 973 | if (!active && $related[1] && (settings.loop || $related[index + 1])) { | |
| 974 | index = getIndex(1); | |
| 975 | launch($related[index]); | |
| 976 | } | |
| 977 | }; | |
| 978 | ||
| 979 | publicMethod.prev = function () { | |
| 980 | if (!active && $related[1] && (settings.loop || index)) { | |
| 981 | index = getIndex(-1); | |
| 982 | launch($related[index]); | |
| 983 | } | |
| 984 | }; | |
| 985 | ||
| 986 | // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close(); | |
| 987 | publicMethod.close = function () { | |
| 988 | if (open && !closing) { | |
| 989 | ||
| 990 | closing = true; | |
| 991 | ||
| 992 | open = false; | |
| 993 | ||
| 994 | trigger(event_cleanup, settings.onCleanup); | |
| 995 | ||
| 996 | $window.unbind('.' + prefix + ' .' + event_ie6); | |
| 997 | ||
| 998 | $overlay.fadeTo(200, 0); | |
| 999 | ||
| 1000 | $box.stop().fadeTo(300, 0, function () { | |
| 1001 | ||
| 1002 | $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide(); | |
| 1003 | ||
| 1004 | trigger(event_purge); | |
| 1005 | ||
| 1006 | $loaded.empty().remove(); // Using empty first may prevent some IE7 issues. | |
| 1007 | ||
| 1008 | setTimeout(function () { | |
| 1009 | closing = false; | |
| 1010 | trigger(event_closed, settings.onClosed); | |
| 1011 | }, 1); | |
| 1012 | }); | |
| 1013 | } | |
| 1014 | }; | |
| 1015 | ||
| 1016 | // Removes changes ColorBox made to the document, but does not remove the plugin | |
| 1017 | // from jQuery. | |
| 1018 | publicMethod.remove = function () { | |
| 1019 | $([]).add($box).add($overlay).remove(); | |
| 1020 | $box = null; | |
| 1021 | $('.' + boxElement) | |
| 1022 | .removeData(colorbox) | |
| 1023 | .removeClass(boxElement); | |
| 1024 | ||
| 1025 | $(document).unbind('click.'+prefix); | |
| 1026 | }; | |
| 1027 | ||
| 1028 | // A method for fetching the current element ColorBox is referencing. | |
| 1029 | // returns a jQuery object. | |
| 1030 | publicMethod.element = function () { | |
| 1031 | return $(element); | |
| 1032 | }; | |
| 1033 | ||
| 1034 | publicMethod.settings = defaults; | |
| 1035 | ||
| 1036 | }(jQuery, document, window)); |