JSON을 읽고 이미지를 추가하십시오.

Question

이미지 흐름 슬라이더를 만들고 있습니다. 하드 코딩을하면 잘 작동합니다. 이제 갤러리에서 이미지를로드하는 방법을 지정하기 위해 JSON 파일을 사용하고 있습니다. 이미지가 성공적으로로드되고 있지만 외부 CSS 파일과 jquery가 올바르게로드되지 않습니다.

어떤 도움

주시면 감사하겠습니다.

<script> 
     $(function(){ 
      var image= [{ 
    "src": "images/starting.jpg", 
      "data-artist":"Gorillaz", 
     "data-album":"Plastic Beach" 
      },]; 

     $.each(image, function(){ 
     $('<img src="' + this.src+ '" />').appendTo('#coverflow'); 
     }); 
    }); 

내가 이것을을 writting하고있는 경우

,

<div class="wrapper"> 
     <div id="coverflow"> 
      <img src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>--> 
      <!--<img src="images/thumb1.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/> 
      <img src="images/thumb2.jpg" data-artist="Kid Rock" data-album="Born Free"/>   
      <img src="images/thumb3.jpg" data-artist="Eminem" data-album="Recovery"/> 
      <img src="images/thumb4.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/> 
      <img src="images/thumb5.jpg" data-artist="Taylor Swift" data-album="Speak Now"/> 
      <img src="images/thumb6.jpg" data-artist="The Band Perry" data-album="The Band Perry"/> 
      <img src="images/thumb7.jpg" data-artist="Maroon 5" data-album="Hands All Over"/> 
      <img src="images/thumb8.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/> 
      <img src="images/thumb9.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/> 
      <img src="images/thumb10.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/> 
      <img src="images/thumb11.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>--> 
     </div> 
    </div> 

다음은 완벽하게 작동.

내가 여기

$.each(image, function(){ 
$('<img src="' + this.src+ '" />').appendTo('#coverflow');   `$('#coverflow').appendTo('#wrapper'); 
$('#wrapper').appendTo('#demo'); 
$('#demo').appendTo('#pageWrapper'); }); 
alert ('I am all Done'); 
alert('Elements are ' +$('#coverflow').length); }); 

을 시도 내가 하나 DIV 하나의 이미지를 추가하고있다. 하지만 마지막에 div #coverflow를 검사 할 때 내용은 단지 1 요소입니다. 루프 반복 11 회

Answer 1

1. 확실히 이미지를 확인하지만 (즉,에서 "각")는 src 속성 (나는 당신이, 그냥 객체를 사용 CONSOLE.LOG의 확인 하드 작동 말했다 알고있는 객체입니다 (typeof image); 각각을하기 전에)
2. .appendTo ('# coverflow'); 가 틀리면 .appendTo ($ ('# coverflow')); 당신은 단지 간단한와

3. 시작 (appendTo는 jQuery를 객체에서 작동) JQuery와 객체에 물건을 추가 할 수 있습니다 :

   $ .each (이미지, 기능() { 을 console.log (image.src) 를 });