Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from boys 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.

File structure:

-captcha
–imgs in this folder you can find all images related to design, psd file is also included.
–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. var borderColor = ""; /* border color hex or left it null if you don't want to change border color*/
3. var captchaDir = "/captcha" /* path to captcha files */
4. var url = captchaDir + "/captcha.php" /* this is name of form action */
5. var formId = "myForm" /* id of your form */
6. var items = Array("pencil", "scissors", "clock", "heart", "note");
7.
8. $(function() {
9. $(".ajax-fc-container").captcha();
10. });
11. </script>

4. Take a look at variable captchaDir in previous JavaScript code and change captchaDir to contain full path of your domain subfolders, for example – if your captcha is located at www.example.com/mydata/captcha and you want to put it on some other page, let’s say www.example.com/blog/category, all you have to do is to change captchaDir to “/mydata/captcha”.

5. Variable formId should be id of your form which needs to be submitted and verified by captcha. If you don’t have id on your form please add it and make it the same as formId.

Demo: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin

Download: http://www.webdesignbeach.com/ajax-fancy-captcha-0.1.zip

Source: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin

Related Listings:

1. Fancy Sliding Tabs Menu The Fancy Sliding Tab Menu is back and better than...
2. Captcha – Protect Web Form Why do people spam webforms? - There are some reasons....
3. Ajax File Upload using JQuery Script that simplifies how you traverse HTML documents, handle events, perform...
4. Fancy Apple.com Style Search Suggestion Apple is known to create beautiful products (next to the...
5. jQTransorm – jQuery plugin This plugin is a jQuery styling plugin wich allows you...

Do you like this post?

Email: