
A touch-friendly and self-hosted image puzzle captcha jQuery plugin to test if you are Human/Robot or Not.
To prove you’re Not a robot, drag the slider to make the puzzle piece coincided with the main picture.
Dependencies:
How to use it:
1. Load the dependencies in the document.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>
2. Load the jQuery SliderCaptcha plugin's files in the document.
<link href="slidercaptcha.css" rel="stylesheet"> <script src="longbow.slidercaptcha.js"></script>
3. Create the HTML for the puzzle captcha component.
<div class="slidercaptcha card"> <div class="card-header"> <span>Drag To Verify</span> </div> <div class="card-body"> <div id="captcha"></div> </div> </div>
4. Initialize the plugin and done. By default, the plugin will automatically fetches and display a random puzzle image from https://picsum.photos/.
$('#captcha').sliderCaptcha({ onSuccess: function () { window.location.href = 'https://www.jqueryscript.net'; } });
5. All default plugin options. Override the following option values to customize the puzzle capcha component.
$('#captcha').sliderCaptcha({ width: 280, height: 155, sliderL: 42, sliderR: 9, offset: 5, loadingText: 'Loading...', failedText: 'Try It Again', barText: 'Slide the Puzzle', repeatIcon: 'fa fa-repeat', maxLoadCount: 3, localImages: function () { // uses local images instead return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; } });
6. More callback functions.
$('#captcha').sliderCaptcha({ onSuccess: function () { // ... }, onFail: function () { // ... }, onRefresh: function () { // ... } });
This awesome jQuery plugin is developed by ArgoZhang. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 02.05.2019
- Source