TGI Ratings

by Marventus

HTML

<p>Rating: <span class="rating-cont" data-rating="0.5"></span></p>
<p>Rating: <span class="rating-cont" data-rating="1"></span></p>
<p>Rating: <span class="rating-cont" data-rating="1.5"></span></p>
<p>Rating: <span class="rating-cont" data-rating="2"></span></p>
<p>Rating: <span class="rating-cont" data-rating="2,5"></span></p>
<p>Rating: <span class="rating-cont" data-rating="3"></span></p>
<p>Rating: <span class="rating-cont" data-rating="3,5"></span></p>
<p>Rating: <span class="rating-cont" data-rating="4"></span></p>
<p>Rating: <span class="rating-cont" data-rating="4.5"></span></p>
<p>Rating: <span class="rating-cont" data-rating="5"></span></p>

CSS

/*img {
    width: 24px;
    height: 24px;
    margin-bottom: -5px;
}*/
.rate {
    background: transparent url("http://thegeekinvasion.com/fran-temp/tgi-ratings-32.png") no-repeat;
    display: inline-block;
    height: 32px;
    width: 25px;
    margin: 0 5px -12px 0;
}
.rate.full {
    background-position: 0 0;
}
.rate.half {
    background-position: 0 -33px;
}
.rate.empty {
    background-position: 0 -66px;
}

JavaScript

jQuery(function($) {
    $(window).load(function() {
        var rat = 0,
            image = '<img height="32" width="32" src="http://www.iconsdb.com/icons/preview/moth-green/star-m.png" />',
            imgFull = '<span class="rate full"></span>',
            imgHalf = '<span class="rate half"></span>',
            imgEmpty = '<span class="rate empty"></span>'
        ;  
        $(".rating-cont").each(function() {
            var half = false;
            rat = parseFloat($(this).attr("data-rating").replace(",", "."), 10);
            $(this).text("");
            if( rat - Math.floor(rat) !== 0 )
                half = true;
            rat = Math.floor(rat);
            for( i=0; i<5; i++ ) {
                if( i > rat ) {
                    $(this).append(imgEmpty);
                } else if( i === rat ) {
                    if( half )
                        $(this).append(imgHalf);
                    else
                        $(this).append(imgEmpty);
                }  else
                    $(this).append(imgFull);
            }
        });
    });
});