Facebook has always been fascinating for me, their simple UI and speed makes me fall in love with it. So far i have posted few posts which resembles similarity to their UI. If you had not visited before here are the links to the posts
Facebook like comment script
Facebook like link extractor
Facebook like live search using jquery
Fetching facebook friends and friend search
Facebook like tag friend in dropdown
In this specific tutorial i am going to show you how to add face detection with jquery feature to your web application. I tested this script with different images with different layout and complexity to test how this face detection script handles it. I have added all those results in demo for your viewing and better understanding of how this Face detection with jquery works.
Include required javascripts
|
1 2 |
<script src="jquery-1.11.1.min.js"></script> <script src="jquery.facedetection.min.js"></script> |
Add some css to beautify view
|
1 2 3 4 5 |
.face{ border: 2px solid #fff; border-radius: 50%; display: none; } |
Add image and action button
|
1 2 |
<img class="picture" src="india.jpg"> <input id="detect" type="button" value="Detect"> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function(){ $("#detect").click(function(){ $('.picture').faceDetection({ "grayscale" : true, complete: function (faces) { for (var i = 0, l = faces.length; i < l; i++) { placeDiv(faces[i]); } }, error: function (code, message) { alert("Unable to detect faces! "+message); } }); }) }); function placeDiv(coord) { jQuery("<div>", { class: 'face', css: { position: "absolute", left: coord.positionX - 10 + "px", top: coord.positionY - 10 + "px", width: coord.width + 10 +"px", height: coord.height + 10 +"px", }, }).appendTo(document.body).fadeIn("slow"); } |
[…] Read More Demo Download […]
Your pop up modal for social links falls out of viewport on mobiles.