YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: Natively use YUI Gallery Modules

## The YUI Global Object: Natively use YUI Gallery Modules

This example shows how to natively use a YUI Gallery module.

It will load images from Flickr using the Gallery YQL module.

View example in new window.

Loading photos from YQL, please wait...

### Loading Gallery Modules

If a Gallery module has been pushed to the CDN, it will be available to use as a first class YUI 3 module.

To load a Gallery module, simply add its module name to your `YUI().use` call. In the code sample below we are using the `gallery-yql` module.

    YUI().use('gallery-yql', function(Y) {    //Y.yql is available here});

    YUI().use('gallery-yql', function(Y) {
        //Y.yql is available here
    });

YUI().use('gallery-yql', function(Y) { //Y.yql is available here });

### Flickr/YQL example

This simple example demonstrates using YQL to fetch images from Flickr by tag.

Note: We are using the YQL Gallery module directly from the `use` statement, no configuration needed.

    YUI().use('node', 'gallery-yql', function(Y) {    new Y.yql('select * from flickr.photos.search where tags = "yuiconf2009"', function(r) {        if (r.query) {            if (r.query.results) {                var res = Y.one('#results');                res.set('innerHTML', '');                Y.each(r.query.results.photo, function(v) {                    var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';                    res.append('<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>');                });            }        }    });});

    YUI().use('node', 'gallery-yql', function(Y) {
        new Y.yql('select * from flickr.photos.search where tags = "yuiconf2009"', function(r) {
            if (r.query) {
                if (r.query.results) {
                    var res = Y.one('#results');
                    res.set('innerHTML', '');
                    Y.each(r.query.results.photo, function(v) {
                        var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';
                        res.append('<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>');
                    });
                }
            }
        });
    });

YUI().use('node', 'gallery-yql', function(Y) { new Y.yql('select * from flickr.photos.search where tags = "yuiconf2009"', function(r) { if (r.query) { if (r.query.results) { var res = Y.one('#results'); res.set('innerHTML', ''); Y.each(r.query.results.photo, function(v) { var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">'; res.append('<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>'); }); } } }); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings