Configurable Slide/Swipe To Unlock Plugin For jQuery

A lightweight, configurable, touch-enabled slide/swipe to unlock plugin for modern web app to prevent spambots and fake signups.

The plugin enables the visitors to unlock some functionalities on your web app by dragging or swiping the slider to the right.

How to use it:

1. Load the core stylesheet and a theme CSS of your choice in the header of the webpage.

<!-- Core -->
<link href="css/slideToUnlock.css" rel="stylesheet">
<!-- iPhone Theme -->
<link href="css/iphone.theme.css" rel="stylesheet">
<!-- Green Theme -->
<link href="css/green.theme.css" rel="stylesheet">
<!-- Your Own Theme -->
<link href="css/your.theme.css" rel="stylesheet">

2. Create a container element for the slide to unlock slider.

<div id="example"> 
</div>

3. Load the necessary JavaScript files in the page and then call the function to initialize the slide to unlock slider with default settings.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="js/jquery.slideToUnlock.js"></script>

$("#example").slideToUnlock();

4. Customize the lock/unlock text.

$("#example").slideToUnlock({

  // default
  lockText: 'Slide To Unlock',
  unlockText: 'Slide To Unlock'
  
});

5. Decide whether or not to lock back.

$("#example").slideToUnlock({

  allowLocking : true,
  
});

6. Set the inital state (locked or unlocked).

$("#example").slideToUnlock({

  status: false
  
});

7. Callback functions available.

$("#example").slideToUnlock({

  unlockfn: function(){console.log("unlock")},
  lockfn  : function(){},

});

8. You can also config the slide to unlock slider via data attributes:

<div id="example"
     data-lock-text="Hello!!" 
     data-unlock-text="YaY!!"> 
</div>

$("#example").slideToUnlock({

  useData : true

});

9. Create your own themes as follows:

.locked {
  font-size: 18px;
  font-family: 'Open Sans', serif;      
  background-color: rgb(168, 167, 167);   
  color: white;
}

.locked_handle {
  background-image: url("../img/right_arrow.png");  
}  


.unlocked {
  background-color:rgb(128, 131, 128);
}

.unlocked_handle {
  background-image: url("../img/left_arrow.png");   
}  

Changelog:

2019-04-30

• Bugfix

2018-07-14

• Update the touch event
• Update rgba to rgb to support safari

---

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