Displaying Product Ratings With jQuery - jStars

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: This plugin is only used to display ratings. The user CANNOT change the rating value you set.

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>

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

  • Publication date: 22.01.2019
  • Source