0

I get the following errors and I am unable to understand why.

drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at big_pipe.js?v=10.1.6:138:10
    at big_pipe.js?v=10.1.6:169:3
drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at drupal.init.js?v=10.1.6:32:12
    at HTMLDocument.listener (drupal.init.js?v=10.1.6:20:7)
drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at success (ajax.js?v=10.1.6:1800:20)
    at l (loadjs.min.js?v=4.2.0:1:217)
    at loadjs.min.js?v=4.2.0:1:1556

There are 3 calls to the Colorbox function on the page, but each error looks slightly different. I am not sure if that's relevant.

My code calling it is the following.

import jQuery from 'jquery';

(($) => {
  Drupal.behaviors.naColorbox = {
    attach(context) {
      $('.block--collapsible', context).each((index, element) => {
        const content = $(element).find('.block--collapsible__content');
        let height = '92%';
        try {
          height = `${parseInt($(window).height() * 0.92, 10)}px`;
        } catch (ex) {
          // do nothing
        }
        $(element).colorbox({
          inline: true,
          href: content,
          width: '92%',
          height,
          maxWidth: '960px',
          maxHeight: '720px',
          scrolling: true,
        });
      });
    },
  };
})(jQuery);

Looking at the page's source, with JavaScript not aggregated, I see this.

<script src="/modules/contrib/colorbox/js/colorbox.js?v=10.1.6"></script>
<script src="/libraries/colorbox/jquery.colorbox-min.js?v=10.1.6"></script>
<script src="/modules/contrib/colorbox_inline/js/colorbox_inline.js?s46bqs"></script>
<!-- omissis -->
<script src="/modules/contrib/colorbox_load/js/colorbox_load.js?s46bqs"></script>
<!-- omissis -->
<script src="/themes/custom/my_theme/dist/js/00-base/06-colorbox/nacolorbox.js?s46bqs"></script>

I just upgraded to Drupal 10.1.6 and I am using Colorbox 2.0.1.

What am I missing? It seems everything is installed, but I can't make this work.

1
  • Did you check that /libraries/colorbox/jquery.colorbox-min.js is reachable? Also you probably want to use once to make sure the behaviours aren’t attached to the same elements multiple times
    – Clive
    Commented Nov 16, 2023 at 20:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.