Question

I am inserting images through a for loop into a section of html to be displayed on a slider. I am trying to get this to display on my browser, but my developer tools keeps throwing me a weird error. I think I am inserting a character somewhere and the jquery library is not liking it.

Uncaught Error: Syntax error, unrecognized expression: [object Object]:eq(0)

Here is my code.

var theImgHTML = "<div class='slides_container portfolio-img'>";

for (i = 0; i < imgList.length; i++) {
    theImgHTML += "<img src='images/portfolio/" + imgList[i] + "' alt='Slide " + (i + 1) + "' />";
}

theImgHTML += "</div>";

$("#slides").html(theImgHTML);

$("#slides").slides({
    preload: true,
    preloadImage: 'img/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true
});​

Here is what comes out as a result in the html.

<div class="slides_container portfolio-img" style="overflow: hidden; position: relative; display: block; background-image: url(loading.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <div class="slides_control" style="position: relative; width: 0px; height: 0px; left: 0px;">
        <img src="images/portfolio/one.jpg?1354641162837" alt="Slide 1" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
        <img src="images/portfolio/two.jpg" alt="Slide 2" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
        <img src="images/portfolio/three.jpg" alt="Slide 3" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
    </div>
</div>

Thoughts?

Answer 1

The problem end up being was that when adding the variable “theImgHTML” (contains the markup for my images) into the slides, I needed to encompass each image with a div. I was not doing that. According to the slides plugin when having images to display..each div needs to have an encompassing div surround each image.

I tried it without the div’s and just had the image by themselves and the plugin did not accept it (thus the error above). Hopefully, this helps someone out in the future.

Here is an example of what will work.

<div id="slides">
     <div class="slides_container">
          <div>
             <img src="http://placehold.it/570x270">
          </div>
          <div>
             <img src="http://placehold.it/570x270">
          </div>
      </div>
</div>

For further info go to the link below and go to basic markup.

http://www.slidesjs.com/