#

Jump to Table of Contents

# Example: Natively use YUI Gallery Modules

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

Long URL:

Short URL:

### 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-bitly` module.

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

### Bitly example

This simple example demonstrates using the gallery-bitly module to expand and shorten url's.

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

    YUI().use('event-key', 'node', 'gallery-bitly', function(Y) {
        /*
            To use the bit.ly module, you must have a bit.ly username and apiKey.
            If you do not have an apiKey, sign up for a bitly account and go to
            your Account page to get your apiKey.
        */
        var bitly = new Y.bitly({
            username: username,
            key: key
        }),
        exp = Y.one('#expand'),
        short = Y.one('#shorten'),
        createElm = function(par, url) {
            var item = '';
            if (par.one('em')) {
                item = par.one('em');
            } else {
                item = Y.Node.create('<em></em>');
                par.append(item);
            }
            item.set('innerHTML', '<a href="' + url + '">' + url + '</a>');
            return item;
        },
        shorten = function(node) {
            bitly.shorten(short.get('value'), function(r) {
                var par = node.get('parentNode'),
                    item = createElm(par, r.shortUrl);

                exp.set('value', r.shortUrl);
            });
        },
        expand = function(node) {
            bitly.expandByURL(exp.get('value'), function(r) {
                var par = node.get('parentNode'),
                    item = createElm(par, r.longUrl);

                short.set('value', r.longUrl);
            });
        };

        Y.on('click', function(e) {
            shorten(e.target);
        }, '#do_shorten');

        Y.on('click', function(e) {
            expand(e.target);
        }, '#do_expand');

        Y.on('blur', function(e) {
            shorten(e.target);
        }, '#shorten');

        Y.on('blur', function(e) {
            expand(e.target);
        }, '#expand');

        short.on('key', function(e) {
            shorten(e.target);
        }, 'enter');

        exp.on('key', function(e) {
            expand(e.target);
        }, 'enter');

    });