- Issue created by @phjou
- 🇩🇪Germany Emil Stoianov
Drupal 11.2 uses jQuery 4 which dropped .isFunction()
There is a merge request for the original library but it is not merged yet and with current latest 1.6.4 version of colorbox this is not fixed yet
Here is the MR that fixes the issue.
https://github.com/jackmoore/colorbox/pull/908/files#diff-27885fcd204fda...One can replace the usage of .isFunction() just like in the MR in an overridden variant of the library until the original library is fixed.
So my current solution is:
Put this in custom_theme.libraries.ymlcolorbox: version: VERSION js: assets/js-source/libs/colorbox-master/jquery.colorbox-min.js: dependencies: - core/jquery - core/drupal
Then put the minified version with the fix on the path above (or change the patch to follow your local setup).
"),function(){var e,n,o,h=P.prep,r=++Q;R=!0,M=!1,ht(U),ht(N),C.get("onLoad"),C.h=C.get("height")?tt(C.get("height"),"y")-W-H:C.get("innerHeight")&&tt(C.get("innerHeight"),"y"),C.w=C.get("width")?tt(C.get("width"),"x")-E-k:C.get("innerWidth")&&tt(C.get("innerWidth"),"x"),C.mw=C.w,C.mh=C.h,C.get("maxWidth")&&(C.mw=tt(C.get("maxWidth"),"x")-E-k,C.mw=C.w&&C.w").hide().insertBefore(a),$.one(U,(function(){o.replaceWith(a)})),h(a)}else C.get("iframe")?h(" "):C.get("html")?h(C.get("html")):et(C,e)?(e=it(C,e),M=C.get("createImg"),t(M).addClass(j+"Photo").bind("error."+j,(function(){h(V(G,"Error").html(C.get("imgError")))})).one("load",(function(){r===Q&&setTimeout((function(){var e;C.get("retinaImage")&&i.devicePixelRatio>1&&(M.height=M.height/i.devicePixelRatio,M.width=M.width/i.devicePixelRatio),C.get("scalePhotos")&&(n=function(){M.height-=M.height*e,M.width-=M.width*e},C.mw&&M.width>C.mw&&(e=(M.width-C.mw)/M.width,n()),C.mh&&M.height>C.mh&&(e=(M.height-C.mh)/M.height,n())),C.h&&(M.style.marginTop=Math.max(C.mh-M.height,0)/2+"px"),c[1]&&(C.get("loop")||c[I+1])&&(M.style.cursor="pointer",t(M).bind("click."+j,(function(){P.next()}))),M.style.width=M.width+"px",M.style.height=M.height+"px",h(M)}),1)})),M.src=e):e&&f.load(e,C.get("data"),(function(e,i){r===Q&&h("error"===i?V(G,"Error").html(C.get("xhrError")):t(this).contents())}))}()}}function st(){o||(B=!1,g=t(i),o=V(G).attr({id:_,class:!1===t.support.opacity?j+"IE":"",role:"dialog",tabindex:"-1"}).hide(),n=V(G,"Overlay").hide(),p=t([V(G,"LoadingOverlay")[0],V(G,"LoadingGraphic")[0]]),h=V(G,"Wrapper"),r=V(G,"Content").append(m=V(G,"Title"),w=V(G,"Current"),x=t('').attr({id:j+"Previous"}),y=t('').attr({id:j+"Next"}),v=t('').attr({id:j+"Slideshow"}),p),b=t('').attr({id:j+"Close"}),h.append(V(G).append(V(G,"TopLeft"),a=V(G,"TopCenter"),V(G,"TopRight")),V(G,!1,"clear:left").append(s=V(G,"MiddleLeft"),r,l=V(G,"MiddleRight")),V(G,!1,"clear:left").append(V(G,"BottomLeft"),d=V(G,"BottomCenter"),V(G,"BottomRight"))).find("div div").css({float:"left"}),f=V(G,!1,"position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;"),T=y.add(x).add(w).add(v)),e.body&&!o.parent().length&&t(e.body).append(n,o.append(h,f))}function lt(){function i(t){t.which>1||t.shiftKey||t.altKey||t.metaKey||t.ctrlKey||(t.preventDefault(),at(this))}return!!o&&(B||(B=!0,y.click((function(){P.next()})),x.click((function(){P.prev()})),b.click((function(){P.close()})),n.click((function(){C.get("overlayClose")&&P.close()})),t(e).bind("keydown."+j,(function(t){var e=t.keyCode;L&&C.get("escKey")&&27===e&&(t.preventDefault(),P.close()),L&&C.get("arrowKey")&&c[1]&&!t.altKey&&(37===e?(t.preventDefault(),x.click()):39===e&&(t.preventDefault(),y.click()))})),"function"==typeof t.fn.on?t(e).on("click."+j,"."+D,i):t("."+D).live("click."+j,i)),!0)}t[_]||(t(st),(P=t.fn[_]=t[_]=function(e,i){var n=this;return e=e||{},"function"==typeof n&&(n=t(""),e.open=!0),n[0]?(st(),lt()&&(i&&(e.onComplete=i),n.each((function(){var i=t.data(this,_)||{};t.data(this,_,t.extend(i,e))})).addClass(D),new Y(n[0],e).get("open")&&at(n[0])),n):n}).position=function(e,i){var n,c,u,f=0,p=0,m=o.offset();function w(){a[0].style.width=d[0].style.width=r[0].style.width=parseInt(o[0].style.width,10)-k+"px",r[0].style.height=s[0].style.height=l[0].style.height=parseInt(o[0].style.height,10)-H+"px"}if(g.unbind("resize."+j),o.css({top:-9e4,left:-9e4}),c=g.scrollTop(),u=g.scrollLeft(),C.get("fixed")?(m.top-=c,m.left-=u,o.css({position:"fixed"})):(f=c,p=u,o.css({position:"absolute"})),!1!==C.get("right")?p+=Math.max(g.width()-C.w-E-k-tt(C.get("right"),"x"),0):!1!==C.get("left")?p+=tt(C.get("left"),"x"):p+=Math.round(Math.max(g.width()-C.w-E-k,0)/2),!1!==C.get("bottom")?f+=Math.max(X()-C.h-W-H-tt(C.get("bottom"),"y"),0):!1!==C.get("top")?f+=tt(C.get("top"),"y"):f+=Math.round(Math.max(X()-C.h-W-H,0)/2),o.css({top:m.top,left:m.left,visibility:"visible"}),h[0].style.width=h[0].style.height="9999px",n={width:C.w+E+k,height:C.h+W+H,top:f,left:p},e){var v=0;t.each(n,(function(t){n[t]===J[t]||(v=e)})),e=v}J=n,e||o.css(n),o.dequeue().animate(n,{duration:e||0,complete:function(){w(),R=!1,h[0].style.width=C.w+E+k+"px",h[0].style.height=C.h+W+H+"px",C.get("reposition")&&setTimeout((function(){g.bind("resize."+j,P.position)}),1),"function"==typeof i&&i()},step:w})},P.resize=function(t){var e;L&&((t=t||{}).width&&(C.w=tt(t.width,"x")-E-k),t.innerWidth&&(C.w=tt(t.innerWidth,"x")),u.css({width:C.w}),t.height&&(C.h=tt(t.height,"y")-W-H),t.innerHeight&&(C.h=tt(t.innerHeight,"y")),t.innerHeight||t.height||(e=u.scrollTop(),u.css({height:"auto"}),C.h=u.height()),u.css({height:C.h}),e&&u.scrollTop(e),P.position("none"===C.get("transition")?0:C.get("speed")))},P.prep=function(i){if(L){var n,h="none"===C.get("transition")?0:C.get("speed");u.remove(),(u=V(G,"LoadedContent").append(i)).hide().appendTo(f.show()).css({width:(C.w=C.w||u.width(),C.w=C.mw&&C.mw1?("string"==typeof C.get("current")&&w.html(C.get("current").replace("{current}",I+1).replace("{total}",r)).show(),y[C.get("loop")||I
I can not attach the minified version with only isFunction() changes in the comment as the comment attachments do not allow .js files
If you want to reuse it, here it is:
/*!
Colorbox 1.6.4
license: MIT
http://www.jacklmoore.com/colorbox
*/
!function(t,e,i){var n,o,h,r,a,s,l,d,c,g,u,f,p,m,w,v,y,x,b,T,C,H,k,W,E,I,M,L,R,S,K,P,B,O={html:!1,photo:!1,iframe:!1,inline:!1,transition:"elastic",speed:300,fadeOut:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,opacity:.9,preloading:!0,className:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0,closeButton:!0,fastIframe:!0,open:!1,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|webp|jxr|svg)((#|\?).*)?$/i,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.",returnFocus:!0,trapFocus:!0,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,rel:function(){return this.rel},href:function(){return t(this).attr("href")},title:function(){return this.title},createImg:function(){var e=new Image,i=t(this).data("cbox-img-attrs");return"object"==typeof i&&t.each(i,(function(t,i){e[t]=i})),e},createIframe:function(){var i=e.createElement("iframe"),n=t(this).data("cbox-iframe-attrs");return"object"==typeof n&&t.each(n,(function(t,e){i[t]=e})),"frameBorder"in i&&(i.frameBorder=0),"allowTransparency"in i&&(i.allowTransparency="true"),i.name=(new Date).getTime(),i.allowFullscreen=!0,i}},_="colorbox",j="cbox",D=j+"Element",F=j+"_open",N=j+"_load",z=j+"_complete",A=j+"_cleanup",q=j+"_closed",U=j+"_purge",$=t(""),G="div",Q=0,J={};function V(i,n,o){var h=e.createElement(i);return n&&(h.id=j+n),o&&(h.style.cssText=o),t(h)}function X(){return i.innerHeight?i.innerHeight:t(i).height()}function Y(e,i){i!==Object(i)&&(i={}),this.cache={},this.el=e,this.value=function(e){var n;return void 0===this.cache[e]&&(void 0!==(n=t(this.el).attr("data-cbox-"+e))?this.cache[e]=n:void 0!==i[e]?this.cache[e]=i[e]:void 0!==O[e]&&(this.cache[e]=O[e])),this.cache[e]},this.get=function(t){var e=this.value(t);return"function"==typeof e?e.call(this.el,this):e}}function Z(t){var e=c.length,i=(I+t)%e;return i<0?e+i:i}function tt(t,e){return Math.round((/%/.test(t)?("x"===e?g.width():X())/100:1)*parseInt(t,10))}function et(t,e){return t.get("photo")||t.get("photoRegex").test(e)}function it(t,e){return t.get("retinaUrl")&&i.devicePixelRatio>1?e.replace(t.get("photoRegex"),t.get("retinaSuffix")):e}function nt(t){"contains"in o[0]&&!o[0].contains(t.target)&&t.target!==n[0]&&(t.stopPropagation(),o.focus())}function ot(t){ot.str!==t&&(o.add(n).removeClass(ot.str).addClass(t),ot.str=t)}function ht(i){t(e).trigger(i),$.triggerHandler(i)}var rt=function(){var t,e,i=j+"Slideshow_",n="click."+j;function h(){clearTimeout(e)}function r(){(C.get("loop")||c[I+1])&&(h(),e=setTimeout(P.next,C.get("slideshowSpeed")))}function a(){v.html(C.get("slideshowStop")).unbind(n).one(n,s),$.bind(z,r).bind(N,h),o.removeClass(i+"off").addClass(i+"on")}function s(){h(),$.unbind(z,r).unbind(N,h),v.html(C.get("slideshowStart")).unbind(n).one(n,(function(){P.next(),a()})),o.removeClass(i+"on").addClass(i+"off")}function l(){t=!1,v.hide(),h(),$.unbind(z,r).unbind(N,h),o.removeClass(i+"off "+i+"on")}return function(){t?C.get("slideshow")||($.unbind(A,l),l()):C.get("slideshow")&&c[1]&&(t=!0,$.one(A,l),C.get("slideshowAuto")?a():s(),v.show())}}();function at(h){var g,w;if(!S){if(g=t(h).data(_),C=new Y(h,g),w=C.get("rel"),I=0,w&&!1!==w&&"nofollow"!==w?(c=t("."+D).filter((function(){return new Y(this,t.data(this,_)).get("rel")===w})),-1===(I=c.index(C.el))&&(c=c.add(C.el),I=c.length-1)):c=t(C.el),!L){L=R=!0,ot(C.get("className")),o.css({visibility:"hidden",display:"block",opacity:""}),u=V(G,"LoadedContent","width:0; height:0; overflow:hidden; visibility:hidden"),r.css({width:"",height:""}).append(u),H=a.height()+d.height()+r.outerHeight(!0)-r.height(),k=s.width()+l.width()+r.outerWidth(!0)-r.width(),W=u.outerHeight(!0),E=u.outerWidth(!0);var v=tt(C.get("initialWidth"),"x"),y=tt(C.get("initialHeight"),"y"),x=C.get("maxWidth"),B=C.get("maxHeight");C.w=Math.max((!1!==x?Math.min(v,tt(x,"x")):v)-E-k,0),C.h=Math.max((!1!==B?Math.min(y,tt(B,"y")):y)-W-H,0),u.css({width:"",height:C.h}),P.position(),ht(F),C.get("onOpen"),T.add(m).hide(),o.focus(),C.get("trapFocus")&&e.addEventListener&&(e.addEventListener("focus",nt,!0),$.one(q,(function(){e.removeEventListener("focus",nt,!0)}))),C.get("returnFocus")&&$.one(q,(function(){t(C.el).focus()}))}var O=parseFloat(C.get("opacity"));n.css({opacity:O==O?O:"",cursor:C.get("overlayClose")?"pointer":"",visibility:"visible"}).show(),C.get("closeButton")?b.html(C.get("close")).appendTo(r):b.appendTo("