Question

I’m trying to read a list of images from a folder to create DIVs with image backgrounds (for use as an image slider). The jQuery I’ve written is as follows:

$.getJSON('../functions.php', function(images) {
  images.each( function() {
    $('#main').prepend('<div class="slider" style="background-image:url(' + ' (this) + ');"></div>');
  });
});

This isn’t working, unfortunately… The error message I get in console is:

Uncaught SyntaxError: Unexpected token ILLEGAL

What am I doing wrong? Thanks!

Answer 1

The syntax highlighting in SO gave me the clue that you need to change it to this:

$('#main').prepend('<div class="slider" style="background-image:url(' + this + ');"></div>');

You had an extra quote in there (and don’t need the () around this…although it wouldn’t hurt.

UPDATE:

After the quoting issue was taken care of and you received the other ERROR, the problem seemed to be that your images JSON was trying to be iterated over with .each, which cannot be used on an object literal. .each is used either on a jQuery object (so wrap images with $()) or with the call to iterate over objects/arrays ($.each()). You need to use something like:

$.each(images, function () {    // <---- I prefer
// or
$(images).each(function () {