Does colorbox work with Drupal 11?

Created on 12 June 2025, 21 days ago

Problem/Motivation

I am getting this error on Drupal 11:
Uncaught TypeError: t.isFunction is not a function

It seems like it crashes in the library itself. I am guessing there might be an incompatibility between newer version of JQuery and colorbox.

I am wondering if or how somebody managed to make it work since the module is marked as Drupal 11 compatible.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

2.1

Component

Code

Created by

🇨🇦Canada phjou Vancouver 🇨🇦 🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @phjou
  • 🇨🇦Canada phjou Vancouver 🇨🇦 🇪🇺
  • 🇩🇪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.yml

    colorbox:
      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).
    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("

    "),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
Production build 0.71.5 2024