javascript - 语法错误，无法识别的表达式

Question

当我尝试启动灯箱时，我不断看到以下错误:

Error: Syntax error, unrecognized expression: /Images/designs/start-large.jpg
  [Break On This Error]     

throw new Error( "Syntax error, unrecognized expression: " + msg );

jquery.js (line 4679)

我正在使用 Colorbox 脚本。这是我的代码:

HTML

<figure>
    <img src="/Images/designs/start.jpg" alt="Old Start Page"> 
    <dl>
        <dt class="strong">Purpose</dt>
            <dd>Original Website Opening</dd>
        <dt class="strong"><a href="/Images/designs/start-large.jpg" class="colorbox">Enlarge</a></dt>          
    </dl>
</figure>

JS

$(function() {
   $('.colorbox').colorbox();
});

我不确定我的代码有什么问题，当我单击链接时，灯箱会打开，但只显示 ajax 旋转图像。我在页面上隐藏了一个内联元素，该元素使用上面相同的代码正确打开(除了链接是 href="#hidden-div")。

什么可能导致此错误以及如何解决该问题？

注意:我使用的是 jQuery 1.8.2 和 Colorbox 1.3.20.1

编辑

这是我网站上的附加代码:

$(function() {

    $('#reload').click(function() { 
location.reload(); //Reloads Page
 });

    $('.slideshow').cycle({
    fx: 'fade',
    timeout: 5000 //Cycles Photos using jQuery Cycle Lite Plugin
});

//Original Code for Colorbox: $('.colorbox').colorbox(); 

$('.colorbox').colorbox({ //Current Colorbox Code
    inline: true
});

});

编辑 2

这是一个JS Fiddle注意:我调用 Colorbox 的代码位于 JS 面板的底部。

Answer 1

我找到了解决此问题的方法，其中涉及添加额外的代码，虽然不完美，但确实有效。

代码如下:

HTML

<a href="#lightbox1" class="colorbox">Show Lightbox</a>

<!-- Inserted before </body> tag -->
<div class="hide">
 <div id="lightbox1">
  <img src="path.jpg"> 
 </div>
</div>

JS

$(function() {
  $(".colorbox").colorbox({
      inline:true
  });
});

CSS

.hide{
  display: none;
}