AJAX Fancy Captcha
21 January 2010 ThursdayAJAX Fancy Captcha
The Fancy Captcha jQuery plug-in is an intuitive and fresh way to complete those “verify humanity” tasks, offering reasonable protection against unwanted guests, namely bots and spammers. It works by asking you to verify yourself simply by dragging and dropping an item into a circle.
What is it
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.
Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize (take a look at file structure for more information).
If you have any ideas, comment or just want to say hello, please do - any feedback will be greatly appreciated.
Update for september 2009:
- reduced size,
- easier integration,
- easy translate,
- few common problems fixed.
File structure:
-captcha
–imgs
–captcha.css
–jquery.captcha.js
–captcha.php
–iepngfix.htc
-latest-jquery
-latest-jquery-ui
-example.html
-readme.txt
How it works:
It calls captcha.php file and gets a random number. Php file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of “pencil”, “scissors”, “clock”, “heart”, “note”, so if number 3 is returned it will take “heart” and look for item-heart.png file in /imgs directory.
How to install:
1. As usual, copy /captcha folder somewhere in your hosting.
2. If you don’t have latest jquery and jquery.ui integrated already, copy these two folders.
3. Edit page where you want to put captcha and insert:
1. <!-- Begin of captcha -->
2. <div class="ajax-fc-container"></div>
3. <!-- End of captcha -->
Put this in header of your page
1. <script type="text/javascript" charset="utf-8">
2. $(function() {
3. $(".ajax-fc-container").captcha({formId: "myForm"});
4. });
5. </script>
Default options:
1. borderColor: "",
2. captchaDir: "captcha",
3. url: "captcha/captcha.php",
4. formId: "myForm",
5. text: "Verify that you are a human,
drag scissors into the circle.”,
6. items: Array(”pencil”, “scissors”, “clock”, “heart”, “note”)
