CODEWITHSUNDEEP
javascriptjquery
Rumen Fidanov
Rumen Fidanov

Reputation: 9

TypeError: jQuery.colorbox is undefined

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%';

Upvotes: 0

Views: 6047

Answers (3)

Xmindz
Xmindz

Reputation: 1282

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

Upvotes: 5

Dominic Green
Dominic Green

Reputation: 10260

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.net/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.com/ajax/libs/jquery/1.10.2/jquery.min.js</script>
    <script src="../jquery.colorbox.js"></script>

Upvotes: 1

user2891084
user2891084

Reputation: 111

You can use the colorbox methods:

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

Upvotes: 0

Related Questions