Swipe-Touch Image Puzzle Captcha jQuery Plugin – SliderCaptcha

Form
Demo    Download
Touch-friendly-Image-Puzzle-Captcha-Plugin-jQuery-SliderCaptcha
File Size: 5.33 KB
Views Total: 1930 views
Last Update:August 03, 2021
Publish Date: March 15, 2019
Official Website: Go to website
License: MIT
Plugin Author: ArgoZhang

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.

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

List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.