jquery lightbox does not load images

I am trying to get this lightbox to work and I'm not quite sure what I'm missing.

My relevant code is as follows:

<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>            
    <!-- Lightbox -->
    <script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() {        
            $("img.comidas").lightBox();
        });

    </script>       
</head>

The images are displyed in this manner:

<tr>
    <td><a href="images/big-boss-adulto.jpg"><img src="images/big-boss-adulto.jpg" width="118" height="170" class="comidas"/></a></td>
    <td><a href="#"><img src="images/big-boss-cachorro.jpg" width="118" height="170" class="comidas"/></a></td>
    <td><a href="#"><img src="images/eukanuba-adulto.jpg" width="118" height="170" class="comidas"/></a></td>
</tr>

(I'm only trying if the lightbox works on the first image)

The problem id the following, the lightbox gets stuck here (in the loading part):

Things I've checked and that I can infer:

All the js and css are correctly linked and exist
The javascript and styleshit of the lightbox are probable working correctly since:
- The style seems to be the correct
- When you click outside the image (or press esc) the lighbox disappears

Another thing I've checked was using load:

$(window).load(function() {       
    $("img.comidas").lightBox();
});

But the same problem seems to persist.

回答1:

Try selecting the containing <a> element, instead of the image itself, for the lightbox() function.

回答2:

You are targeting the wrong element in your JS. You need to target the anchor link around the image, rather than the image itself.