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. content = '';
  7.  
  8. Y.each(r.query.results.photo, function(v) {
  9. var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';
  10. content += '<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>';
  11. });
  12.  
  13. res.setContent(content);
  14. }
  15. }
  16. });
  17. });
  18.  
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'),
                    content = '';
 
                Y.each(r.query.results.photo, function(v) {
                    var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';
                    content += '<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>';
                });
 
                res.setContent(content);
            }
        }
    });
});
 

Copyright © 2011 Yahoo! Inc. All rights reserved.

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