jQuery Colorbox plugin not loading images

Question

I am trying to use jquery plugin Color Box: http://www.jacklmoore.com/colorbox/

HTML:

<center>
    <div class='images'>
        <a class="group1" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a> 
        <a class="group1" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
    </div>
</center>

JS:

$(".images img").colorbox({rel:'images', transition:"fade"});

When I click to image black blank screen is appearing, black box, where picture must be situadted, appearing, icon loading constanlty spinning and image is not loading. There are no any errors or messages. Only icon loading.

How I can solve this problem?

Answer 1

Try this code:

$(".images > .group1").colorbox({rel:'images', transition:"fade"});

Answer 2

Try this:

<div style="text-align:center;">
    <div class='images'>
        <a class="group1" rel="images" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a> 
        <a class="group1" rel="images" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
    </div>
</div>

What I did here Added a rel attribute to the images with the value images to match your code.

Note: <center> is deprecated. Use <div style="text-align:center;"> instead.

Answer 3

$(".images a").colorbox({rel:'group1', transition:"fade"});

Rel should make reference to the class ("group1"), and the plugin is applied to the < a > element, not the < img > inside it

http://www.jacklmoore.com/colorbox/example3/