Image viewing using YUI

Question

I've created a page that display Instagram images in a grid view. When I click on a particular image a new page opens up showing that particular image from the original Instagram link. I want the image to be opened in the original page instead of any new page using only Yahoo YUI. An example here.(Under the panel_five). I have no experience in YUI. My entire code is://it is displaying 10 images in 10 different boxes

$(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>");
            }     

        }
    });

});

score 1 · Answer 1 · answered Aug 16 '12 at 14:03

I have a working example at 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>");
            }
        }
    );
});

As you can see, it really isn't that much different than the jquery example. You won't need to download and host any files unless you are running your application under SSL. Yahoo! does not provide an SSL-based combo loader, but it's very easy to run one yourself under SSL.

Image viewing using YUI

1 Answers1