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

请确保你：

添加了colorbox javascript库
添加了jQuery库，它已添加到文档中的colorbox库之前。
没有错误地在文档中添加两次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%'});

TypeError：jQuery.colorbox未定义

3 个答案: