Instagram API에 제목과 하이퍼 링크가 표시되지 않음

Question

jQuery를 통해 위치 위도/경도 매개 변수를 사용하여 Instagram 요청을 만들었습니다.

1. 제목 = 캡션, 캡션 (마우스 오버에) null가 아닌 경우, 이미지를 게시
2. 사용자 :와 함께 100를 계산까지 나는 모든 관련 축소판을 반환하고 있습니다.
3. 날짜 이미지가 게시되었습니다. (썸네일을 클릭시) standard_resolution.url의
4. 하이퍼 링크

아래의 요청이 게시 된 썸네일 이미지, 사용자 및 날짜를 ​​반환합니다. 그러나 stardard_resolution.url에 대한 제목/캡션 및 하이퍼 링크는 마우스를 올려 놓고 클릭 할 때 표시되지 않습니다.

필자의 append 문 구문이 잘못되었지만 알아낼 수 없다고 생각합니다. 다음 코드와 FIDDLE 당신은 HTML에서 작은 실수 무리가

(function ($) { 
$(document).ready(function() { 


    var count = "100"; 
    var access_token = "<REMOVED BY CATSHOES - IS THIS SUPPOSED TO BE SECRET?>"; 
    var access_parameters = { 
     access_token: access_token 
    }; 

    function grabImages(access_parameters) { 
     var instagramUrl = "https://api.instagram.com/v1/media/search?lat=19.951204000000&lng=-155.860291000000&name=xxx&distance=400&callback=?&count=" + count; 


     $.getJSON(instagramUrl, access_parameters, onDataLoaded); 
    } 

    function onDataLoaded(instagram_data) { 
     if (instagram_data.meta.code == 200) { 
      var photos = instagram_data.data; 
      if (photos.length > 0) { 
       for (var key in photos) { 
        var photo = photos[key]; 
        var a_href = photo.images.standard_resolution.url; 
        var img_title = ""; 
        var date = new Date(parseInt(photo.created_time) * 1000); 

        if (photo.caption != null) { 
         img_title = photo.caption.text; 
        } 


        $("#target").append('<a class="preview" href="' + a_href + "' title='" + img_title + '" ></a> <img src ="' + photo.images.thumbnail.url + '"><div>\ 
          ' + "Posted by: ", photo.user.full_name + '<br />\ 
          ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\ 
         </div />'); 
       } 

      } else { 
       $("#target").append("Currently no Instagram photos for this location."); 
      } 

     } else { 
      var error = data.meta.error_message; 
      $("#target").append('Photos for this location will display soon. Instagram message: ' + error); 
     } 
    } 
    grabImages(access_parameters); 

}); 

})(jQuery); 

Answer 1

의, img 태그는 앵커 태그 내에 있지, 그래서 이미지가 연결되지 않으며, IMG "SRC"최종 시세 및 "제목"시작 따옴표가 잘못되었습니다. 다음과 같이 변경하면 올바르게 작동합니다.

$("#target").append('<a class="preview" href="' + a_href + '" title="' + img_title + '" > <img src ="' + photo.images.thumbnail.url + '"></a><div>\ 
          ' + "Posted by: ", photo.user.full_name + '<br />\ 
          ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\ 
         </div />'); 

fiddle이 업데이트되어 mouseover image가 작동합니다.