Posts Tagged own website

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

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

Top 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 2)

Posted by Praveen Gowda I V in Articles, Facebook, General, Google Plus, Jquery, Others, PHP, Reviews, Tutorials, Web Design on August 18, 2011

This is the second part of my article on Top 10 Most Popular File Upload Scripts. This post contains the bottom five of the top ten file upload scripts in the list, If you haven’t read the first part of this post then I recommend going through it first here.In my previous post I had listed file upload scripts which had multiple functionality which can be easily customized for your needs, But in this tutorial I have listed file upload scripts which are similar in features and look of those found in popular websites like Gmail, Google Plus, Flickr and Facebook.

So enjoy this Five upload scripts by having a look at the live demo or downloading the live demo and implementing the script in your own website:

6.jQuery File Upload

Review

Although this script has no similarity to those found on any website, still it has made to the list because it has some very great features without using flash.Features like multiple file select, automatic upload, thumbnail, upload cancel, file delete makes this upload script a very good script for all purposes

Description from official website

No description found

Features

Features

Multiple file upload:
Allows to select multiple files at once and upload them simultaneously.

Drag & Drop support:
Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window.

Upload progress bar:
Shows a progress bar indicating the upload progress for individual files and for all uploads combined.

Cancelable uploads:
Individual file uploads can be canceled to stop the upload progress.

Resumable uploads:
Aborted uploads can be resumed with browsers supporting the Blob API.

Chunked uploads:
Large files can be uploaded in smaller chunks with browsers supporting the Blob API.

Preview images:
A preview of image files can be displayed before uploading with browsers supporting the required HTML5 APIs.

No browser plugins (e.g. Adobe Flash) required:
The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.

Graceful fallback for legacy browsers:
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.

Standard HTML file upload form:
Shows a standard HTML file upload form if JavaScript is disabled.

Cross-site file uploads:
Supports uploading files to a different domain with Cross-site XMLHttpRequests.

Multiple plugin instances:
Allows to use multiple plugin instances on the same webpage.

Customizable and extensible:
Provides an API to set individual options and define callBack methods for various upload events.

Multipart and file contents stream uploads:
Files can be uploaded as standard “multipart/form-data” or file contents stream (HTTP PUT file upload).

Compatible with any server-side application platform:
Works with Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.

Pros and Cons

ADVANTAGES	DISADVANTAGES
No browser plugins (e.g. Adobe Flash) required:	Requires JavaScript to be enabled or else shows a standard html4 upload element.
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
Supports uploading files to a different domain with Cross-site XMLHttpRequests.

Live Demo and Download

Download

Live Demo

7.Flickr File Upload

Review

This is the exact replica of the File uploader in Flickr

Description from official website

No description found

Features

Features

All the features similar to the file upload system on Flickr, Click here to check the actual Flickr file upload

Pros and Cons

ADVANTAGES	DISADVANTAGES
Nice upload script for video or photo galleries	Uses Flash
A well suited script for uploading photos or videos	Uploading cannot be cancelled once upload button is pressed

Live Demo and Download

Important Note

After downloading the files Please do the following changes in order for the script to workModify the index_files/config.js file line no 49

var AdnanTotal = 0;
var _site_root = 'your script location';
var upload_Path = _site_root + '/upload.php'

Download

Live Demo

8.Uber-Uploader

Review

Although looks like an outdated script with no updates for newer features like html5, It is still a very good script with all those features without using flash.It is written in Perl, PHP and JavaScript.

Description from official website

Uber-Uploader is a group of programs written in Perl, PHP and JavaScript. It is intended to present a graphical representation of the status of a web-based file upload in the form of a progress bar.

Features

Features

Progress bar

Delete selected files

Different modes of progress bars

Does not use browser plugins like flash

Email support:
Emails whenever a file is uploaded

Pros and Cons

ADVANTAGES	DISADVANTAGES
No browser plugins (e.g. Adobe Flash) required:	Uses perl and is a bit outdated.
Progress bar	Difficult to set up for newbies
Email support: Emails whenever a file is uploaded	lack of support

Live Demo and Download

Download

Live Demo

Click here to go to next page >>

Buffer

Pin It

Rating: 5.0/5 (4 votes cast)

blob, browser plugins, browser window, chunks, demo, file upload, flash features, flickr, google, image files, multiple file, multiple files, own website, preview images, progress bar, scripts, similarity, tutorials, upload script, uploading, uploads, using flash

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

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 own website

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

Google Plus Photo Stack Effect Tutorial

HTML

Javascript

CSS

Top 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 2)

6.jQuery File Upload

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

7.Flickr File Upload

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

Important Note

8.Uber-Uploader

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

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 own website

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

Google Plus Photo Stack Effect Tutorial

HTML

Javascript

CSS

Top 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 2)

6.jQuery File Upload

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

7.Flickr File Upload

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

Important Note

8.Uber-Uploader

Review

Description from official website

Features

Pros and Cons

Live Demo and Download

Facebook like jQuery face recognition tutorial and demo

Sponsors

Recent Posts

Give Us A Donation

Recent Comments

Tag Cloud

Request a tutorial