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 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 });
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>'); }); } } }); });