I'm trying to make my Colorbox images responsive and I've achieved that with the below code:

<script type="text/javascript">
  // Make ColorBox responsive
  jQuery.colorbox.settings.maxWidth = '95%';
  jQuery.colorbox.settings.maxHeight = '95%';

  // ColorBox resize function
  var resizeTimer;
  function resizeColorBox() {
     if (resizeTimer) clearTimeout(resizeTimer);
     resizeTimer = setTimeout(function() {
         if (jQuery('#cboxOverlay').is(':visible')) {
            jQuery.colorbox.load(true);
         }
     }, 300);
  }

  // Resize ColorBox when resizing window or changing mobile device orientation
  jQuery(window).resize(resizeColorBox);
  window.addEventListener("orientationchange", resizeColorBox, false);
</script> 

but I'm geting the following error:

TypeError: jQuery.colorbox is undefined
    jQuery.colorbox.settings.maxWidth  = '95%';

I'm trying to make my Colorbox images responsive and I've achieved that with the below code:

<script type="text/javascript">
  // Make ColorBox responsive
  jQuery.colorbox.settings.maxWidth = '95%';
  jQuery.colorbox.settings.maxHeight = '95%';

  // ColorBox resize function
  var resizeTimer;
  function resizeColorBox() {
     if (resizeTimer) clearTimeout(resizeTimer);
     resizeTimer = setTimeout(function() {
         if (jQuery('#cboxOverlay').is(':visible')) {
            jQuery.colorbox.load(true);
         }
     }, 300);
  }

  // Resize ColorBox when resizing window or changing mobile device orientation
  jQuery(window).resize(resizeColorBox);
  window.addEventListener("orientationchange", resizeColorBox, false);
</script> 

but I'm geting the following error:

TypeError: jQuery.colorbox is undefined
    jQuery.colorbox.settings.maxWidth  = '95%';

• javascript
• jquery

Share Improve this question Follow edited Oct 18, 2013 at 10:19 Qantas 94 Heavy 16k3131 gold badges7272 silver badges8888 bronze badges asked Oct 18, 2013 at 10:00 Rumen FidanovRumen Fidanov 911 silver badge22 bronze badges 2

• Have you included the colourbox js file in your page? – Rory McCrossan Commented Oct 18, 2013 at 10:01
• Do you import framework in your script? – zur4ik Commented Oct 18, 2013 at 10:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Make sure that you:

1. Added the colorbox javascript library
2. Added the jQuery library and it has been added before the colorbox library in the document.
3. Haven't mistakenly added jQuery library twice in the document

Hey your code works fine, you must not be including the script on your page. I simply put the lib on this jsfiddle and your code and it stops throwing the error.

See http://jsfiddle/bw9ms/

Please make sure that you have a reference in your code to the jquery lib and colorbox script

like

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js</script>
    <script src="../jquery.colorbox.js"></script>

You can use the colorbox methods:

$("selector").colorbox({scalePhotos: true, maxWidth: '95%',maxHeight: '95%'});