A user can completed with the verification by drag and drop with SliderCaptcha. The slider to support with the PC and mobile terminals. A touch and dragging with user friendly and self-hosted image puzzle captcha with jQuery plugin to test if you are Human/Robot or Not. To prove you are Not a robot, drag the slider to match the puzzle piece coincided with the main picture. A time accuracy and sliding trajectory information of user drag behavior sent to the server, and then the background algorithm verification can be carried out.
Table of Contents
How to use it:
Add Css And jQuery Script the dependencies.
In the above code, We added two different CSS codes “/bootstrap/4.3.1/css/bootstrap.min.css” & “/use.fontawesome.com/releases/v5.8.1/css/all.css” and a JavaScript code “/jquery-3.4.0.min.js” into the existed code. Place the CSS code in <link> in your <head>
<link rel="stylesheet" href="/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="/jquery-3.4.0.min.js"></script>
Add jQuery Script with SliderCaptcha plugin’s files.
Place the JavaScript code in <script> in before the end of the body </body>. Here we are adding “slidercaptcha.css” CSS code & “longbow.slidercaptcha.js” Java Scripting code into the exsitng code.
<link href="slidercaptcha.css" rel="stylesheet">
<script src="longbow.slidercaptcha.js"></script>
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>
Initialize the plugin and done. By default, the plugin will automatically fetches and display a random puzzle image from https://picsum.photos/.
onSuccess: This is a function type, and the value is null. This function will be callback when the validation passes.
$('#captcha').sliderCaptcha({
onSuccess: function () {
window.location.href = 'https://www.jquerypost.com';
}
});
All default plugin options. Override the following option values to customize the puzzle capcha component.
Width: This is an Integer type with the default value of 280. This attribute will set the width of the background.
Height: This is an Integer type with the default value of 150. The attribute will set the height of the background picture.
SliderL: This is an Integer type with default value 42, and this is the width of the Puzzle.
SliderR: This is an integer type with default value 9, and this is the outburst radius of the Puzzle.
Offset: This is an integer type with default value 5.
LoadingText: This is a string type with default value Loading.
FailedText: This is a string type value with default value try again.
BarText: This is an Integer type with default value Slide right to fill.
RepeatIcon: This is a String type with default value fa fa-redo.
$('#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';
}
});
More callback functions.
$('#captcha').sliderCaptcha({
onSuccess: function () {
// ...
},
onFail: function () {
// ...
},
onRefresh: function () {
// ...
}
});
Done
Thanks for make jQuery plugin is developed by ArgoZhang For more Helpfull for users, please check the demo page or visit the official website.
