jQuery: creare i marcatori delle immagini con gli attributi di dati HTML5

Se usate Facebook o Flickr avrete sicuramente notato che questi siti vi permettono di aggiungere dei marcatori alle immagini per visualizzare delle informazioni sotto forma di tooltip. Creare questi marcatori è semplice. L'unico problema è la memorizzazione dei metadati per ciascun marcatore. Possiamo risolvere questo problema con jQuery e gli attributi di dati di HTML5.

Useremo una stringa JSON che contiene un array di oggetti (chiamato coords) aventi ciascuno tre proprietà:

1. top – L'offset verticale di ciascun marcatore.
2. left – L'offset orizzontale di ciascun marcatore.
3. text – Il testo della didascalia del marcatore.

La stringa verrà inserita in un attributo data- specifico:

<div id="image-wrapper" data-captions='{"coords": [{"top":180,"left":180,"text":"iMac 1"},{"top":250,"left":300,"text":"iMac 2"}]}'>
    <img src="web-agency-company.jpg" alt=""/>
</div>​

Quindi definiamo i nostri stili CSS:

#image-wrapper {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 2em auto;
    background: #f6f6f6;
    border: 2px solid #ddd;
}

#image-wrapper img {
    display: block;
    margin: 25px auto;
}

span.marker {
    width: 20px;
    height: 20px;
    background: #f66;
    color: #fff;
    text-align: center;
    position: absolute;
    line-height: 20px;
    cursor: pointer;
}
span.marker:before {
    content: '+';
}

span.caption {
    width: 180px;
    background: #f66;
    color: #fff;
    padding: 4px;
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
}
​

Con jQuery useremo il metodo $.parseJSON() per trasformare il valore dell'attributo in un oggetto JavaScript. Quindi eseguiremo un loop attraverso l'array di oggetti per estrarre i metadati di cui abbiamo bisogno:

var Markers = {
    fn: {
        addMarkers: function() {
            var target = $('#image-wrapper');
            var data = target.attr('data-captions');
            var captions = $.parseJSON(data);
            var coords = captions.coords;

            for (var i = 0; i < coords.length; i++) {
                var obj = coords[i];
                var top = obj.top;
                var left = obj.left;
                var text = obj.text;

                $('<span class="marker"/>').css({
                    top: top,
                    left: left
                }).html('<span class="caption">' + text + '</span>').
                appendTo(target);

            }
        },
        showCaptions: function() {
            $('span.marker').live('click', function() {
                var $marker = $(this),
                    $caption = $('span.caption', $marker);
                if ($caption.is(':hidden')) {
                    $caption.slideDown(300);

                } else {
                    $caption.slideUp(300);

                }

            });

        }
    },

    init: function() {
        this.fn.addMarkers();
        this.fn.showCaptions();

    }
};

$(function() {
    Markers.init();

});​