Question

I keep seeing the following error when I attempt to launch a lightbox:

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)

I am using the Colorbox Script. Here is my code:

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();
});

I am not sure what is wrong with my code, when I click the link the lightbox opens but just shows an ajax spinner image. I have an inline element hidden on the page that opens correctly using the same exact code above (except the link is href="#hidden-div").

What could be causing this error and how do I solve the problem?

Note: I am using jQuery 1.8.2 and Colorbox 1.3.20.1

EDIT

Here is additional code on my site:

$(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
});

});

EDIT 2

Here is a JS Fiddle Note: My code to call Colorbox is at the bottom of the JS Panel.

Answer 1

I have found a workaround for this issue that involves adding extra code, not perfect but it does work.

Here is the code:

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