Posts Tagged facebook

Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Google Plus Photo Stack Effect Tutorial

There are so many scripts which are replica of some of the features of facebook, since Google Plus has arrived we have thought of creating tutorials on creating almost every effects you can see on Google Plus.

We have already created the following Google plus tutorials :

Google Plus Photo Stack Effect found in Google+ photo album page

…and here is one more Google + tutorial, and this time it is on the photo stack effect we find in the photo albums of Google Plus.
If you are still not yet on Google Plus and wondering what is this photo stack effect, then the below picture will give you a better idea :
Google Plus Photo Stack Effect tutorial and live demo

Google Plus Photo Stack Effect tutorial and live demo

Want to check the script in action, then check out the live demo or download the source code and use it in your own website for whatever purpose you like.

Click to Download Source Code of creating google plus like photo stack effect free


Click to view Live Demo of creating google plus like photo stack effect free

Live Demo

Wanna know how the code works ?, check out the code below:


Source Code Of index.html

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Google Plus Photo Album Google Plus Photo Stack Effect Live Demo</title>
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 1px 1px 1px #999999;
	display: inline-block;
	width: 153px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
ul#pics li img {/*css style for the single photo only **/
	width: 150px;
	display: block;
ul#pics li:hover {/*css style for the single photo only **/
	-moz-transform: scale(1.1) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
	transform: scale(1.1) rotate(0deg);
.single_photo {/*css style for the single photo only **/
	margin-top : 80px;
a, a:visited, a:hover {
	color: #54A6DE;
	outline: medium none;
	text-decoration: none;
#text {
	color: #DD4B39;
	font-type: arial, sans-serif;
<script type="text/javascript" src=""></script>
<!--[if lt IE 9]>
<script src=""></script>
<script src="js/app.js"></script>
<div id="page_wrap">
	<div align="center" id="text">
		This is the live demo of <a href="">Google Plus Photo Stack Effect Tutorial</a> at <a href="">Hitherto Web Labs</a>, Click <a href="">here</a> to go to the <a href="">tutorial</a>
	<!--Stack 1  -->
	<div class="image_stack" style="margin-left:600px">
		<img id="photo1" class="stackphotos" src="photos/6.jpg">
		<img id="photo2" class="stackphotos" src="photos/3.jpg">
		<img id="photo3" class="stackphotos" src="photos/1.jpg">
	<!--Stack 2  -->
	<div class="image_stack" style="margin-left:300px">
		<img id="photo1" class="stackphotos" src="photos/4.jpg">
		<img id="photo2" class="stackphotos" src="photos/5.jpg">
		<img id="photo3" class="stackphotos" src="photos/6.jpg">
	<div class="single_photo">
		<ul id="pics">
			<li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="Google Plus Photo Stack Effect"></a></li>


Source Code of app.js

//jquery code below is applicable for the photo stack only . Not for the single image zoom effect
$(document).ready(function () {
    $(".image_stack").delegate('img', 'mouseenter', function () { //when user hover mouse on image with div id=stackphotos
        if ($(this).hasClass('stackphotos')) { //
            // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only
            var $parent = $(this).parent();
            $parent.find('img#photo1').addClass('rotate1'); //add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
            $parent.find('img#photo1').css("left", "150px"); // reposition the first and last image
            $parent.find('img#photo3').css("left", "50px");

    }).delegate('img', 'mouseleave', function () { // when user removes cursor from the image stack
        $('img#photo1').removeClass('rotate1'); // remove the css class that was previously added to make it to its original position
        $('img#photo1').css("left", ""); // remove the css property 'left' value from the dom
        $('img#photo3').css("left", "");



Source Code of style.css

html {
	margin: 0;
body {
	color: #333333;
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	font-size: 11px;
	padding: 0;
	margin: 0;
	text-align: left;
	line-height: 1.25em;
#page_wrap {
	border: 1px solid #DDDDDD;
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
.image_stack img { /* css style for photo stack */
	border: none;
	text-decoration: none;
	position: absolute;
	width: 158px;
	height: 158px;
.image_stack { /* css style for photo stack */
	width: 400px;
	position: absolute;
	margin:60px 10px 10px;
.image_stack img { /* css style for photo stack */
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;
	/* Firefox */
	-moz-transition: all 0.2s ease;
	/* WebKit */
	-webkit-transition: all 0.2s ease;
	/* Opera */
	-o-transition: all 0.2s ease;
	/* Standard */
	transition: all 0.2s ease;
.image_stack #photo1 {  /* position of last photo in the stack */
	top: 8px;
	left: 108px;
.image_stack #photo2 {/* position of middle photo in the stack */
	top: 6px;
	left: 104px;
.image_stack #photo3 {/* position of first photo at the top in the stack */
	top: 4px;
	left: 100px;
	right: 100px;
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
	-webkit-transform: rotate(15deg); /* safari and chrome */
	-moz-transform: rotate(15deg);/*firefox browsers */
	transform: rotate(15deg);/*other */
	-ms-transform:rotate(15deg); /* Internet Explorer 9 */
	-o-transform:rotate(15deg); /* Opera */
.image_stack .rotate2 {/* css not used*/
	-webkit-transform: rotate(0deg); /* safari and chrome */
	-moz-transform: rotate(0deg);/*firefox browsers */
	transform: rotate(0deg);/*other */
	-ms-transform:rotate(0deg); /* Internet Explorer 9 */
	-o-transform:rotate(0deg); /* Opera */
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
	-webkit-transform: rotate(-15deg); /* safari and chrome */
	-moz-transform: rotate(-15deg); /*firefox browsers */
	transform: rotate(-15deg);/*other */
	-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
	-o-transform:rotate(-15deg); /* Opera */
	cursor: pointer;

That’s it for this week, next week we will be back with more interesting and unique web tutorials, until then stay updated with our blog by :

Want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)

, , , , , , , , , , ,


Creating Circle Effects as in Google Plus – Tutorial and Demo

Google Plus is still in Field trial and is yet to pass through the “Make it or Break it” scenario. If you have heard about Google Plus then I take it for granted that you might have heard about the circle concept of Google Plus as well.If you haven’t heard of Circles then here is an excerpt from the official Google Blog which will better you make you understand :

+Circles: share what matters, with the people who matter most
Not all relationships are created equal. So in life we share one thing with college buddies, another with parents, and almost nothing with our boss. The problem is that today’s online services turn friendship into fast food—wrapping everyone in “friend” paper—and sharing really suffers:

  • It’s sloppy. We only want to connect with certain people at certain times, but online we hear from everyone all the time.
  • It’s scary. Every online conversation (with over 100 “friends”) is a public performance, so we often share less because of stage fright.
  • It’s insensitive. We all define “friend” and “family” differently—in our own way, on our own terms—but we lose this nuance online.

In light of these shortcomings we asked ourselves, “What do people actually do?” And we didn’t have to search far for the answer. People in fact share selectively all the time—with their circles.

From close family to foodies, we found that people already use real-life circles to express themselves, and to share with precisely the right folks. So we did the only thing that made sense: we brought Circles to software. Just make a circle, add your people, and share what’s new—just like any other day:

Creating Circle effects as in google plus tutorial and live demo

Google + Circles User Interface

Believing you are a bit familiar for what circles are, I’m moving on …

In fact the circles in Google Plus is similar to the ” friend lists” in Facebook, but in Facebook this feature is buried deep down and I don’t think anyone has time spending hours trying to sorting friends into different lists.

But Google Plus have come up with a cool and engaging interface to draw attention to circles, with effects like Drag and Dropping friends into circles, Dropping multiple friends into a circle at the same time, circles expanding on mouse-hover and my favorite is deleting a circle(When you delete a circle the circle just rolls away).

Recently I came across a website called Circle Hack where i found the same circle effects applied to Facebook lists, and something more wonderful was that they provided the source code for download.So go forward and have a look at the live demo or download the source files and implement in your own website in your own way.

The download file contains the complete script to create Google + like circle effects in your own website for free.

You require a Facebook account in order to view the live Demo

Click to Download Source Code of creating google plus like circle effects script FREE


Click to view Live Demo of creating google plus like circle effects

Live Demo

Please Note
I had got many requests on how to create the animation in Google plus when a circle is deleted, So I created a tutorial on deleting a circle effect as well
So click below to check out the tutorial on Google Plus like Deleting a Circle Animation Tutorial and Demo
Its much more interesting and I request everyone to try it as well.

Watch out next week for another interesting tutorial, in the meanwhile stay updated with us :

Want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)

, , , , , , , , , , , , , , , , , ,


Facebook like jQuery face recognition tutorial and demo

Facebook influences our life each and everyday. One of the features which has contributed enormously to make Facebook appealing to even to its average users is Photos.

Facebook like jQuery Face detection in photosWhenever we upload photos to Facebook, Facebook automatically recognizes the faces in the photo and allow you to tag them.
If you ever wondered how to detect faces in photos in your own website, then the answer is very simple, Faces in photos  can be easily detected using a jQuery plugin.

In this tutorial i will show you how to detect faces in a photo.

Face recognition

Below you can download the Source Code, or have a look at the Live Demo

Download Source Code


Live Demo


Important Note
Many users have complained that the Live Demo does not work in Internet Explorer, So I recommend using any other updated versions of the browser like Safari, Mozilla Firefox, Google chrome(Best) or Opera for maximum impact.

For this tutorial we are going to use FaceDetection jQuery plugin which uses an algorithm by Liu Liu

This is what the download file and the live demo contains

  • In the first example you can see the face detection plugin applied to photos on the server
  • In the second example you can upload an image file of your choice and detect faces in the photo you upload.

Something that can let you improve this tutorial is enabling photo tagging after face recognition ( that is exactly what Facebook does), right now this tutorial only shows face recognition, in coming tutorials I will try to show photo tagging as well

Below is the PHP code of the file index.php

Important Note
The following code is just the simplest example as to how to use the plugin, the source code available for download has many more examples and scenarios at which face detection can be used,hence I strongly advise you to download the source code and also have a look at the Live demo.
<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Facebook like jQuery face recognition demo| Files on server 1 |</title>
	<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
	<script src=""></script>
	<script src="../../js/facedetection/ccv.js"></script>
	<script src="../../js/facedetection/face.js"></script>
	<script src="../../js/jquery.facedetection.js"></script>
	$(function() {
		$('#try').click(function() {

			var $this = $(this);

			var coords = $('img').faceDetection({
				complete:function() {

				error:function(img, code, message) {

					alert('Error: '+message);

			for (var i = 0; i < coords.length; i++) {
				$('<div>', {
					'css': {
						'position':	'absolute',
						'left':		coords[i].positionX +'px',
						'top':		coords[i].positionY +'px',
						'width': 	coords[i].width		+'px',
						'height': 	coords[i].height	+'px'
		return false;
		.face {
			border:2px solid #FFF;

<div id="container">
  <div id="header">
		<h3>These are the demos of<a href=""> Facebook like face detection tutorial</a> at GEO WEB STATION Click <a href="">here</a> to go back to the <a href="">tutorial</a> to download the demo files</h3>


	<div id="content">

		<a href="#" id="try">Detect Faces</a>

		<img src="../../images/faces.jpg" />


After downloading the source files open the readme file for installation instructions

Next week watch out for another interesting tutorial.

Stay updated with our blog by

If you have any problems using the downloaded files, then leave a comment below.

Want more improvisations on this script, or want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 4.5/5 (8 votes cast)

, , , , , , , , , , , , , , , , , , , , , , , , , , , ,


Facebook like Beeper for Alerting Notifications Live

Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper.

In this tutorial I am going to teach you to create such a beeper found on Facebook.

If you are still wondering on what beeper I am talking about, then look at the below image to know what we are going to create at the end of this tutorial

Creating Facebook like Beeper Popup

Bepper Found In Facebook

Creating Facebook like Notification Box

Notification Box In Facebook

We are going to use CSS and jQuery to create the notification box.

Check out the live demo or download the source code if you are in a hurry ( it is heavily commented) or else check how the code works below.

Download Source Code


Live Demo


Now Let Us Look at the Source Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Live Demo Of Creating Facebook like Beeper Tutorial |</title>
       <script src="" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="style.css" />
       <script src="jquery.facebookBeeper.js" type="text/javascript"></script>
      <div align="center" class="main">
         <p>This is the live demo of creating <strong><a href="">Facebook like Beeper Box</a></strong><a href=""> for Alerting Notification</a> on <strong><a href="">Geo Web Station</a></strong><br /><br />
        Click <strong><a href="">Here</a></strong> For The <strong><a href="">Tutorial Link</a></strong> To Have A Look At The <a href="">Tutorial </a>And  Download The Source Code </p>
            Click Below To Display Beeper
        <a href="#" class="control" id="control">DISPLAY BEEPER</a>
      <div id="BeeperBox" class="UIBeeper">
         <div class="UIBeeper_Full">
            <div class="Beeps">
               <div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
               <!-- Below Is The Link To Which Bepper Will Point To (replace # with the required link) -->
                  <a class="UIBeep_NonIntentional" href="#">
                     <div class="UIBeep_Icon">
                        <i class="beeper_icon image2"></i>
                     <span class="beeper_x">&nbsp;</span>
                     <div class="UIBeep_Title">
                        <span class="blueName">Praveen Gowda</span> likes your comment on <span class="blueName">Hitherto Web Labs</span>.


@charset "utf-8";
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
/* style for the div with control button*/
margin:30px auto;
border:1px solid #E5E5E5;
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
   -moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
        box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
font:bold 75% arial,sans-serif;
padding:10px 10px 10px 10px;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:   -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:     -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:        linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
margin:25px auto;
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
   -moz-box-shadow:   0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
        box-shadow:        0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
.UIBeeper .UIBeeper_Full{
border:1px solid #99A8C7;
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
.UIBeeper .UIBeep_Bottom{
.UIBeeper .UIBeep_Selected{
.UIBeeper .UIBeep_Top{
.UIBeeper .UIBeep_Bottom{
border-bottom:1px solid #BFCADE;
padding:3px 0;
a, a:hover{
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
margin:5px 5px;
.UIBeep_Selected .UIBeep_Icon{
/* icon within the beeper */
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
background:url(images/close.gif) no-repeat;
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
.UIBeep .UIBeep_Title{
padding:5px 0;


We use jQuery to:

  • display the beeper on clicking on the button
  • hide the beeper after five seconds
  • prevent the hiding of beeper on mouseover
  • hide the beeper after five seconds of mouseout
$(document).ready(function () {
    // set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
    var timerId, delay = 5000;
    var a = $("#BeeperBox"),
        b = $("a.control");;
    //function to destroy the timeout

    function stopHide() {
    //function to display the beeper and hide it after 5 seconds

    function showTip() {;
        timerId = setTimeout(function () {
        }, delay);

    //function to hide the beeper after five seconds

    function startHide() {
        timerId = setTimeout(function () {
        }, delay);
    //display the beeper on cliking the "show beeper" button;
    //Clear timeout to hide beeper on mouseover
    //start timeout to hide beeper on mouseout

    $('.beeper_x').click(function () {
        //hide the beeper when the close button on the beeper is clicked


I believe that the Facebook Beeper is one of the most effective way to grab the attention of visitors to your website, and everyone is free to use our script any of your projects. Do let us know in what way this tutorial has helped you by commenting below:

Next Week we will be back with another interesting tutorial in the meanwhile stay updated with all our tutorials by :

Want to request a new tutorial, then please Contact me right-away or leave a comment below.

 I promise to respond to everyone who  asks for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 4.4/5 (8 votes cast)

, , , , , , , , , , , , , , , , , , , , ,