Displaying Product Ratings With jQuery - jStars

jStars is an ultra-small jQuery plugin which displays customizable star ratings on products, articles, posts, services, shops, etc. 

Please note that this plugin is only used to display ratings. Your user CANNOT change the rating value you set.

See Also:

• 10 Best Rating Systems

How to use it:

1. Load the main JavaScript jstars.min.js after jQuery JavaScript library and we're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jstars.min.js"></script>

2. Add the CSS class jstars to the container in which you want to display the star ratings and specify the rating value in the data-value attribute:

<div class="jstars" data-value="3.0"></div>

3. Fractional star fill is supported as well.

<div class="jstars" data-value="3.5"></div>

4. Customize the rating stars using the following data attributes.

• data-total-stars: The number of rating stars. Default: 5.
• data-color: Star color. Default: #4285F4.
• data-empty-color: Empty color. Default: #dddddd.
• data-size: Star size. Default: 1.5rem.

<div class="jstars" 
     data-value="4.5" 
     data-total-stars="5" 
     data-color="#22D118" 
     data-empty-color="black" 
     data-size="30px">
</div>

Changelog:

2019-12-20

• Fixed an issue with Document ready in jQuery 3.4.1

---

This awesome jQuery plugin is developed by nickpotafiy. For more Advanced Usages, please check the demo page or visit the official website.