javascript - TypeError: jQuery.colorbox 未定义

Question

我正在尝试使我的 Colorbox 图像具有响应性，并且我已经使用以下代码实现了这一点：

<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> 

但我收到以下错误：

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

Answer 1

确保您：

1. 添加了 colorbox javascript 库
2. 添加了 jQuery 库，它已添加到文档中的 colorbox 库之前。
3. 没有在文档中错误地添加了两次 jQuery 库

Answer 2

嘿，你的代码工作正常，你不能在你的页面上包含脚本。我只是将 lib 放在这个 jsfiddle 和你的代码上，它就会停止抛出错误。

见http://jsfiddle.net/bw9ms/

请确保您的代码中有对 jquery lib 和 colorbox 脚本的引用

喜欢

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

Answer 3

您可以使用颜色框方法：

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