2012-12-04 1 views
1

for 루프를 통해 이미지를 슬라이더에 표시 할 html 섹션에 삽입합니다. 내 브라우저에 표시하려면이 노력하고 있지만 내 개발자 도구 날 이상한 오류 던지고 계속. 나는 어딘가에 문자를 삽입하고 jquery 라이브러리는 그것을 좋아하지 않는다고 생각한다.슬라이드 플러그인 이미지를 추가 할 때 개발자 도구에서 개체 오류가 발생했습니다

catch되지 않은 오류 : 구문 오류, 인식 할 수없는 표현 : [개체 개체] : 당량 (0)

여기 내 코드입니다.

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 
});​ 

여기에 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> 

생각 하시겠습니까?

+0

HTML (theImgHTML).; 크래시는 발생하지 않지만 슬라이더는 표시되지 않습니다. – wowzuzz

+0

오류 : '잡히지 않은 오류 : 구문 오류, 인식 할 수없는 표현식 : [개체 개체] : eq (0)''eq()'는 jQuery 함수이며, 실패하면 플러그인에서 제공 할 수있는 내용을 슬라이더에 제공 할 수 있습니다. 색인. 플러그인에 대한 링크를 제공하고 ** 도움이 될만한 문제를 재현 할 수있는 ** 피들을 제공 할 수있는 경우. – Nope

+0

그래서 어떻게 theImgHTML의 변수를 슬라이드 div에 넣을 수 있습니까? – wowzuzz

답변

0

문제는 결국 "theImgHTML"변수 (이미지에 대한 마크 업 포함)를 슬라이드에 추가 할 때 div로 각 이미지를 포함해야한다는 것이 었습니다. 나는 그렇게하지 않았다. 슬라이드 플러그인에 따르면 표시 할 이미지가있을 때마다 ... 각 div는 포괄적 인 div가 있어야 각 이미지를 둘러 볼 수 있습니다.

div없이 시도했는데 이미지 자체가 있고 플러그인이이를 받아들이지 않았습니다 (위의 오류). 다행히도, 이것은 누군가를 미래에 나가는 데 도움이됩니다.

다음은 작동하는 예제입니다.

<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> 

자세한 내용은 아래 링크로 이동하여 기본 마크 업으로 이동하십시오. 나는 $ ("# 슬라이드")를 꺼내 경우

http://www.slidesjs.com/

관련 문제