2012-08-16 66 views
0

我創建了一個頁面,以網格視圖顯示Instagram圖像。當我點擊某個特定圖像時,會打開一個新頁面,顯示原始Instagram鏈接中的特定圖像。 我想要在原始頁面中打開圖像,而不是僅使用Yahoo YUI的任何新頁面。示例here(在panel_five下)。我沒有YUI的經驗。我的整個代碼是://它在10個不同的盒子使用YUI查看圖片

$(function() { 

$.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     cache: false, 
     url: "https://api.instagram.com/v1/media/popular?client_id=70fd1ce846d641928bf0a047053cf62d", 
     success: function(data) { 

      for (var i = 0; i < 10; i++) { 
       $('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>"); 
      }  

     } 
    }); 

}); 

回答

1

我在http://jsbin.com/welcome/12864/edit

YUI().use('jsonp', 'node', function(Y) { 
    var list = Y.one('#output'); 

    Y.jsonp(
     "https://api.instagram.com/v1/media/popular?client_id=70fd1ce846d641928bf0a047053cf62d&callback={callback}", 
     function(data) { 
      for (var i = 0; i < 10; i++) { 
       list.append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>"); 
      } 
     } 
    ); 
}); 

工作的例子正如你可以看到顯示10張圖像,它確實是沒有太大的不同比jQuery的例子。除非您在SSL下運行應用程序,否則不需要下載和託管任何文件。雅虎不提供基於SSL的組合加載器,但在SSL下運行自己很容易。