Search code examples
jquerycolorbox

Colorbox loading, but no images..?

I'm trying to load images directly from 500px photosite.

This is my code for loading the colorbox:

<script>
jQuery(document).ready(function(e) {
$("#photogrid").find('a').colorbox({rel:'lb', transition:"fade"});
});
</script>

As Isaid, it seems that colorbox is loading, but I am left with the just the overlay on the page and an empty 'black' square where the image should be...

The images are collected from within the id:photogrid, collecting all with a DOM element of a. Each of the images is an http://link-to-image - pretty standard.

I'm thinking that the loading script is set up incorrectly, but searching GOOGLE has not brought up any answers for me!!!

OK, so I added photo:true to the .colorbox({options}) that seemed to work...

Now I'm getting random visibility of the images? Here is a link to the website: http://staringatthesky.info/#photogrid

I'm using latest Chrome browser under Win10.

It all seems rather random, and if I clear the cache, no issues, but if I return to view a second time = missing images...

I have a number of other scripts on the site and it could be a conflict, but that would be beyond my knowledge..!

Solution

  • the error was these lines:

        previous: "<i class="fa fa-angle-left"></i>", //double quotes conflict 
    next: "<i class="fa fa-angle-right"></i>", //double quotes conflict
    close: "<i class="fa fa-close"></i>", // extra comma
});

    extra comma at the end, and you didn't escape double quotes in those 3 lines, change them to:

        previous: '<i class="fa fa-angle-left"></i>',
    next: '<i class="fa fa-angle-right"></i>',
    close: '<i class="fa fa-close"></i>'
});