使用YUI查看图像

时间:2012-08-16 11:59:57

标签: css yui yahoo yahoo-api

我创建了一个在网格视图中显示Instagram图像的页面。当我点击特定图像时,会打开一个新页面,显示原始Instagram链接中的特定图像。 我希望图像在原始页面中打开,而不是仅使用Yahoo YUI的任何新页面。示例here。(在panel_five下)。我没有YUI的经验。我的整个代码是://它在10个不同的框中显示10个图像

$(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 个答案:

答案 0 :(得分: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>");
            }
        }
    );
});

正如您所看到的,它实际上与jquery示例没有多大区别。除非您在SSL下运行应用程序,否则无需下载和托管任何文件。雅虎不提供基于SSL的组合加载器,但在SSL下自行运行它很容易。