Custom Checkbox Input With Image - jQuery img-checkbox
File Size: | 22.5 KB |
---|---|
Views Total: | 6273 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
img-checkbox is a checkbox replacement plugin for jQuery that allows you to replace the regular checkbox input with custom html contents such as images, icons, etc.
How to use it:
1. Load the required jQuery library and the img-checkbox plugin's JavaScript jquery.imgcheckbox.min.js
at the end of the html document.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="jquery.imgcheckbox.min.js"></script>
2. If you need animations, load the animation.imgcheckbox.min.css
in the head
section of the html document.
<link href="animation.imgcheckbox.min.css" rel="stylesheet">
3. Add your custom check/uncheck images to the checkbox input.
<figure> <div class="figure-content"><img src="uncheck.png"></div> <figcaption><img src="check.png"></figcaption> <label><input type="checkbox" name="name"> Label</label> </figure>
4. Activate the plugin and you're done.
$('figure').imgCheckbox()
5. Customize the plugin by passing the following options object to the imgCheckbox()
function.
$('figure').imgCheckbox({ // size width: 'auto', height: 'auto', // text color textColor: 'white', // bg color of overlay overlayBgColor: 'black', // 0.0 ~ 1.0 overlayOpacity: '0.4', // is rounded? round: false, // enable animation animation: false, // duration in milliseconds animationDuration: 300, // animatio type animationArray: ['scale'] })
This awesome jQuery plugin is developed by gitrequests. For more Advanced Usages, please check the demo page or visit the official website.