YUI 3.x Home -

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.

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.

  1. YUI().use('gallery-yql', function(Y) {
  2. //Y.yql is available here
  3. });
  4.  
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.

  1. YUI().use('node', 'gallery-yql', function(Y) {
  2. new Y.yql('select * from flickr.photos.search where tags = "yuiconf2009"', function(r) {
  3. if (r.query) {
  4. if (r.query.results) {
  5. var res = Y.one('#results');
  6. res.set('innerHTML', '');
  7. Y.each(r.query.results.photo, function(v) {
  8. var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';
  9. res.append('<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>');
  10. });
  11. }
  12. }
  13. });
  14. });
  15.  
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