My Rating is a rating plugin which allows to show the average rating of an object as well as it shows the logged-in user rating.
White stars shows when there is no rating, yellow shows average rating and red defines logged-in user rating. It also allows to click on a Star to rate and it returns the value of clicked star.
It is pretty simple to use just follow the below steps:
- Add jQuery library in head.
- Copy JS and CSS code of myRating plugin and put into head also.
- Call it.
JS Library
;(function($) { $.fn.myRating = function( options ) { var settings = $.extend({ readonly : 'true', // true for static rating only and false for the clickable star. score : '0', // total score of item userscore : '0', // ratedby user count : '', // rating count means no of user rated size : 'medium',// size if star large or medium currently no option for small click : function(){} /// default function for click }, options); return this.each( function() { var that = this, score = settings.score, userScore = settings.userscore, ratingcount = settings.count , starsize = settings.size.toUpperCase(), _starSize, _staticWidth, _userWidth; var ratingdiv = $(document.createElement('div')), ul = $(document.createElement('ul')), sli = $(document.createElement('li')), uli = $(document.createElement('li')); ratingdiv.addClass('myrating').addClass( starsize ); ul.addClass("star-ul").appendTo(ratingdiv); sli.addClass('all-rating-li').appendTo(ul); uli.addClass('user-rating-li').appendTo(ul); if(ratingcount){ if(typeof ratingcount !="" || typeof ratingcount != "0"||typeof ratingcount!= "undefined") { var rcount = $(document.createElement('span')).addClass( 'rating-count' ); rcount.text( "(" +ratingcount+")" ).appendTo( ratingdiv ); } } if(starsize == "LARGE"){ _starSize = 40; }else if(starsize == "MEDIUM"){ _starSize = 20; } _staticWidth = _starSize * score; _userWidth = _starSize * userScore; sli.width( _staticWidth ); uli.width( _userWidth ); if(settings.readonly.toUpperCase() == "FALSE"){ $( document.createElement('li')) .addClass('score-1 li') .attr('score','1') .appendTo(ul) .click(function(){ settings.click.call( this, '1' ); }); $( document.createElement('li')) .addClass('score-2 li') .attr('score','2') .appendTo(ul) .click(function(){ settings.click.call( this, '2' ); }); $( document.createElement('li')) .addClass('score-3 li') .attr('score','3') .appendTo(ul) .click(function(){ settings.click.call( this, '3' ); }); $( document.createElement('li')) .addClass('score-4 li') .attr('score','4') .appendTo(ul) .click(function(){ settings.click.call( this, '4' ); }); $( document.createElement('li')) .addClass('score-5 li') .attr('score','5') .appendTo(ul) .click(function(){ settings.click.call( this, '5' ); }); } else { ratingdiv.css( 'pointer-events' , 'none' ); } ratingdiv.appendTo( this ); }); } })(jQuery);
CSS
.MEDIUM .star-ul { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Medium.png") repeat-x scroll left top rgba(0, 0, 0, 0); height: 20px; list-style: none outside none; margin-bottom: 0; margin-left: 0; margin-top:0; overflow:hidden; padding: 0; position:relative; width: 100px; float:left; } .MEDIUM .star-ul .all-rating-li { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Medium.png") repeat scroll left center rgba(0, 0, 0, 0); display: block; height: 20px; position: absolute; } .MEDIUM .star-ul .user-rating-li { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Medium.png") repeat scroll left bottom rgba(0, 0, 0, 0); display: block; height: 20px; position: absolute; z-index: 2; } /*css for li click on star*/ .MEDIUM .star-ul .score-1:hover {width : 20px;} .MEDIUM .star-ul .score-2:hover {width : 40px;} .MEDIUM .star-ul .score-3:hover {width : 60px;} .MEDIUM .star-ul .score-4:hover {width : 80px;} .MEDIUM .star-ul .score-5:hover {width : 100px;} .MEDIUM .star-ul .score-1{left : 0px;} .MEDIUM .star-ul .score-2{left : 20px;} .MEDIUM .star-ul .score-3{left : 40px;} .MEDIUM .star-ul .score-4{left : 60px;} .MEDIUM .star-ul .score-5{left : 80px;} .MEDIUM .star-ul .li { display: block; height: 20px; padding: 0; position: absolute; text-decoration: none; text-indent: -9000px; width: 20px; z-index: 20; } .MEDIUM .star-ul .li:hover { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Medium.png") repeat scroll left bottom rgba(0, 0, 0, 0); left: 0; z-index: 10; cursor: pointer; } .block-cursor {pointer-events: none;} /** css for large star */ .LARGE .star-ul { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Large.png") repeat-x scroll left top rgba(0, 0, 0, 0) !important; height: 40px !important; list-style: none outside none !important;margin-bottom: 0 !important;margin-left: 0 !important; margin-top: 0 !important;padding: 0 !important;position: relative !important; width: 200px !important; float:left; } .LARGE .star-ul .all-rating-li { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Large.png") repeat scroll left center rgba(0, 0, 0, 0) !important; display: block !important; height: 40px !important; position: absolute !important; text-indent: -9000px !important; z-index: 1 !important; } .LARGE .star-ul .user-rating-li { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Large.png") repeat scroll left bottom rgba(0, 0, 0, 0) !important; display: block !important; height: 40px !important;position: absolute !important;text-indent: -9000px !important; z-index: 2 !important; } .LARGE .star-ul .li { display: block;height: 40px;padding: 0;position: absolute;text-decoration: none; text-indent:-9000px; width: 40px;z-index: 20; cursor: pointer; } .LARGE .star-ul .li:hover { background: url("http://ignatiuz.com/wp-content/uploads/2015/04/Stars_Large.png") repeat scroll left bottom rgba(0, 0, 0, 0);left: 0;z-index: 2; } .LARGE .rating-count {float: left;font-size: 24px;line-height: 40px;margin: 0 5px;} .LARGE .star-ul .score-1:hover { width : 40px;} .LARGE .star-ul .score-2:hover { width : 80px;} .LARGE .star-ul .score-3:hover { width : 120px;} .LARGE .star-ul .score-4:hover { width : 160px;} .LARGE .star-ul .score-5:hover { width : 200px;} .LARGE .star-ul .score-1{ left : 0px;} .LARGE .star-ul .score-2{ left : 40px;} .LARGE .star-ul .score-3{ left : 80px;} .LARGE .star-ul .score-4{ left : 120px;} .LARGE .star-ul .score-5{ left : 160px;}
JS Call for rating
$( “id/class of container” ).myRating({ readonly : 'false', // true for static rating only and false for the clickable star. score : '4', // total score of item userscore : '2.5', // ratedby user count : '10', // No of user rated size : 'medium', // size if star large or medium click : function(score){ // call back value on click of stars alert( "clicked : "+ score ); } });
Note: When you use this plugin, this please download the star images and upload it on your server.