Tabbed

Tabbed Style

The Tabbed Style adds a tabbed toolbar to the top of the image, which links to the tags. Each tag has a name, which will be displayed in the toolbar tab; and a label, which will be displayed just under the tag box.

Style Demo

Style Usage

• Tab name: Preferably, a one word name.
• Tab label: Preferably, a two-three word label.

Style Code

JavaScript Code

.ft_toolbar
{
list-style: none;
display: inline;
background-color: transparent;
color: #F2F2F2;
margin: 8px;
position: absolute;
top: 0px;
left: 0px;
}

.ft_toolbar LI
{
display: inline;
padding: 8px;
margin: 0 0 0 0px;
font-size: 16px;
font-family: Calibri;
cursor: default;
background-color: #020202;
opacity: 0.7;
}

.ft_toolbar LI:hover
{
background-color: #020202;
color: #FFFFFF;
opacity: 1;
}

JavaScript Code

/**
 * Creates the toolbar UX.
 *
 * @param {Array
 *            of tags names} _name
 * @param {Array
 *            of tags labels} _label
 * @param {Array
 *            of tags jQuery objects} $tags
 */
function create_toolbar(_tags) {
    /* Toolbar container */
    var $toolbar = $('<ul></ul>');
    $toolbar.addClass('ft_toolbar');
    var $tags = [], i = 0;
    var labels = [];

    for (tag in _tags) {
        /* Get the argument sub_object */
        var _tag = _tags[tag];
        var _name = _tag.name;
        var _label = _tag.label;
        $tags[i] = _tag.$;
        labels[i] = _tag.label;
        i++;
        /* Creates a new element */
        var $el = $('<li></li>');
        $el.html(_tag.name);
        /* Append the new element */
        $el.appendTo($toolbar);
    }
    /* Safe Hover Effect */
    $('li', $toolbar).each(function(i) {
                var $label = $('<div>' + labels[i] + '</div>')
                        .appendTo($tags[i]);
                $label.css({
                            'position' : 'absolute',
                            'top' : '100%',
                            'left' : '-1px',
                            'background-color' : 'black',
                            'color' : 'white',
                            'opacity' : '0.7'
                        });
                $label.hide();
                $(this).hover(function() {
                            $tags[i].css('border', '1px solid black');
                            $label.show();
                        }, function() {
                            $tags[i].css('border', '0px solid black');
                            $label.hide();
                        });
            });
    /* Append the toolbar to the main container */
    API.container.container.$container.append($toolbar);

    /* Position the Toolbar in the middle of the image */
    var center_t = (API.container.img.$img.width() - $toolbar.width()) / 2;
    $toolbar.css('left', center_t + 'px');

    /* Return the toolbar */
    return $toolbar;
}

if (API.global_instance.last) {
    /*
     * This code creates 3 arrays with the API.tags object Array of tags names
     * (tags_name) Array of tags labels (tags_label) Array of tags jQuery object
     * (tags_$)
     */

    /* Variables */
    var _tags = {};
    /* Loop through API.tags */
    for (tag in API.tags) {
        var _tag = API.tags[tag];
        /* add the tag to the global object */
        _tags[tag] = {};
        _tags[tag].name = _tag.data[0].value;
        _tags[tag].label = _tag.data[1].value;
        _tags[tag].$ = _tag.$tag;
    }
    /* Creates the toolbar */
    var $toolbar = create_toolbar(_tags);
    /* Show toolbar on demand */
    $toolbar.hide();
    API.container.container.$container.hover(function() {
                $toolbar.fadeIn();
            }, function() {
                $toolbar.fadeOut();
            });
}

JavaScript Code

<form>
<h2>Add new Tag</h2>
<fieldset>
<label>Tag name</label>
<input type="text" name="tag_name" value="">
</fieldset>
<fieldset>
<label>Tag label</label>
<input type="text" name="tag_label" value="">
</fieldset>
</form>