使用 YUI 查看图像答案

【问题标题】：Image viewing using YUI使用 YUI 查看图像
【发布时间】：2012-08-12 18:29:55
【问题描述】：

我创建了一个以网格视图显示 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>");
            }     

        }
    });

});

【问题讨论】：

标签： css yui yahoo yahoo-api

【解决方案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 下自己运行非常容易。

【讨论】：