Lightweight Rating System With Custom Images - jQuery Rates

rates is a simple and lightweight jQuery rating plugin for you to use on your website, which is highly customizable and allows users to rate different elements on a page.

It allows you to use any images as rating symbols and saves the rating values in a hidden input field. 

How to use it:

1. Load the stylesheet rates.css and JavaScript rates.js in the document.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Themes -->
<link rel="stylesheet" href="css/rates.css" />
<!-- Rates plugin -->
<script src="js/jquery-rates.js"></script>

2. Create an empty container in which the plugin generates a rating system.

<div id="demo"></div>

3. Initialize the plugin to generate a basic rating system as follows:

$('#demo').rates({
  // options here
});

<!-- Output HTML -->
<div id="demo" class="rates-container">
  <input type="hidden" id="demoRating" name="demoRating" value="0">
  <img src="images/white-star.png" class="" style="height: 25px;">
  <img src="images/white-star.png" class="" style="height: 25px;">
  <img src="images/white-star.png" class="" style="height: 25px;">
  <img src="images/white-star.png" class="" style="height: 25px;">
  <img src="images/white-star.png" class="" style="height: 25px;">
</div>

4. Customize the rating symbols.

• white-star
• black-star
• white-heart
• black-heart
• Or use your own image.

$('#demo').rates({
  shape: 'black-heart',
});

5. Customize the fill-in color.

• rates-yellow
• rates-green
• rates-red
• rates-blue
• Or use your own styles.

$('#demo').rates({
  shadeColor: 'rates-green',
});

6. Determine the number of rating symbols to generate. Default: 5.

$('#demo').rates({
  shapeCount: 10,
});

7. Set the size of the rating symbols. Default: '25px'.

$('#demo').rates({
  shapeHeight: '50px',
});

8. Override the default image folder.

$('#demo').rates({
  imagesFolderLocation: '',
});

---

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