img - Geo Web Station

Google Plus Photo Stack Effect Tutorial

Posted by Praveen Gowda I V in Facebook, Google Plus, Others, Tutorials, Web Design on September 18, 2011

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

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.

Download

Live Demo

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

HTML

Source Code Of index.html

<!DOCTYPE html>
<html>
<head>
<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;
	height:157px;
 -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;
	height: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;
	margin-left:100px;
	margin-top:65px;
}
a, a:visited, a:hover {
	color: #54A6DE;
	outline: medium none;
	text-decoration: none;
}
#text {
	margin-top:10px;
	margin-left:10px;
	color: #DD4B39;
	font-type: arial, sans-serif;
	font-size:17px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/app.js"></script>
</head>
<body>
<div id="page_wrap">
	<div align="center" id="text">
		This is the live demo of <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">Google Plus Photo Stack Effect Tutorial</a> at <a href="http://blog.geotitles.com">Hitherto Web Labs</a>, Click <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">here</a> to go to the <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">tutorial</a>
	</div>
	<!--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">
	</div>
	<!--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>
	<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>
		</ul>
	</div>
</div>
</body>
</html>

Javascript

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#photo2').addClass('rotate2');
            $parent.find('img#photo3').addClass('rotate3');
            $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#photo2').removeClass('rotate2');
        $('img#photo3').removeClass('rotate3');
        $('img#photo1').css("left", ""); // remove the css property 'left' value from the dom
        $('img#photo3').css("left", "");

    });;
});

CSS

Source Code of style.css

html {
	padding:0;
	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;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
.image_stack img { /* css style for photo stack */
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	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.

Buffer

Pin It

Rating: 5.0/5 (3 votes cast)

css style, demo, facebook, google, img, own website, photo album, photo albums, scripts, source code, stack effect, transition

5 Comments

Facebook like jQuery face recognition tutorial and demo

Posted by Praveen Gowda I V in Facebook, Jquery, PHP, Web Design on August 11, 2011

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.

Whenever 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.

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

DOWNLOAD

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>
<html>
<head>
	<meta charset="utf-8">
	<title>Facebook like jQuery face recognition demo| Files on server 1 | http://blog.geotitles.com</title>
	<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
	<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script src="../../js/facedetection/ccv.js"></script>
	<script src="../../js/facedetection/face.js"></script>
	<script src="../../js/jquery.facedetection.js"></script>
	<script>
	$(function() {
		$('#try').click(function() {

			var $this = $(this);

			var coords = $('img').faceDetection({
				complete:function() {
					$this.text('Done!');

				},
				error:function(img, code, message) {
					$this.text('error!');

					alert('Error: '+message);

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

<body>
<div id="container">
  <div id="header">
		<h3>These are the demos of<a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/"> Facebook like face detection tutorial</a> at GEO WEB STATION Click <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">here</a> to go back to the <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">tutorial</a> to download the demo files</h3>

  </div>

	<div id="content">

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

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

	</div>
</div>
</body>
</html>

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.

Buffer

Pin It

Rating: 5.0/5 (6 votes cast)

algorithm, code message, demo, demo files, error function, error message, face detection, face recognition, face recognition demo, facebook, faces, file index, google, image file, img, internet explorer, liu, maximum impact, mozilla firefox, opera, own website, photo, photos, php code, safari, scenarios, source code, upload file, upload photos

11 Comments

Original content here is published under these license terms:		X

License Type:	Read Only

License Summary:	You may read the original content in the context in which it is published (at this web address). No other copying or use is permitted without written agreement from the author.

Original content here is published under these license terms:		X

License Type:	Read Only

License Summary:	You may read the original content in the context in which it is published (at this web address). No other copying or use is permitted without written agreement from the author.

Geo Web Station

Posts Tagged img

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

Google Plus Photo Stack Effect Tutorial

HTML

Javascript

CSS

Facebook like jQuery face recognition tutorial and demo

Sponsors

Recent Posts

Give Us A Donation

Recent Comments

Request a tutorial

Geo Web Station

Posts Tagged img

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

Google Plus Photo Stack Effect Tutorial

HTML

Javascript

CSS

Facebook like jQuery face recognition tutorial and demo

Sponsors

Recent Posts

Give Us A Donation

Recent Comments

Tag Cloud

Request a tutorial