Posts Tagged scripts
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
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 :
Subscribe to RSS feeds
Subscribe via email
Subscribe via SMSWant 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.
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 >>
Top 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 1)
Posted by Praveen Gowda I V in Articles, General, Jquery, Others, PHP, Reviews, Tutorials, Web Design on August 15, 2011
A File upload script is essential for every website and there are a plenty of such ready file upload scripts available on the web, but with their own pros and cons, So I thought that It would be a great idea creating a post on the top ten file upload scripts ever and would serve as a very useful resource for all webmasters.For every script I have listed their advantages and disadvantages, so it would be easy for you to choose the right one. Below is my list of top ten File upload Scripts :
Since I want to give a detailed review about all the ten scripts i will be only revealing the top five Upload scripts in this post and in my next post I will be revealing the next five upload scripts
1.Plupload
Review
For those who know some of these scripts might be wondering how Plupload came on the first position in the list rather than SWFupload.What really brings Plupload to the top of this list is its support for HTML5 Gears, Silverlight, Flash, BrowserPlus. If the user’s browser doesn’t support any of these then a normal HTML4 file upload is implemented moreover it-seems to be very stable.
Description from official website
Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.Plupload is a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.
Features
| Feature | Flash | Gears | HTML 5 | Silverlight | BrowserPlus | HTML 4 |
|---|---|---|---|---|---|---|
| Chunking | ||||||
| Drag/Drop | * | |||||
| PNG Resize | * | |||||
| JPEG Resize | ||||||
| Type filtering | * | |||||
| Stream upload | ||||||
| Multipart upload | * | |||||
| File size restriction | ||||||
| Upload progress |
Pros and Cons
| ADVANTAGES | DISADVANTAGES |
| Upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms | Lack of support, Forum is not very active |
| unique features such as upload progress, image resizing and chunked uploads. | |
| Highly usable and stable upload handler with custom implementation |
Live Demo and Download
|
Download |
Live Demo |
2.SWFUpload
Review
SWFUpload uses both JavaScript and Flash library to provide a great upload experience.It is exactly similar to the attachment uploading Gmail which is very popular.It is a great upload script with almost every feature we want except for one main disadvantage that it uses Flash library.
Description from official website
SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.
Features
| Features |
| Upload multiple files at once by ctrl/shift-selecting in dialog |
| Javascript callbacks on all events |
| Get file information before upload starts |
| Style upload elements with XHTML and css |
| Display information while files are uploading using HTML |
| No page reloads necessary |
| Works on all platforms/browsers that has Flash support. |
| Degrades gracefully to normal HTML upload form if Flash or JavaScript is unavailable |
| Control filesize before upload starts |
| Only display chosen file types in dialog |
| Queue uploads, remove/add files before starting upload |
Pros and Cons
| ADVANTAGES | DISADVANTAGES |
| Upload multiple files at once and JavaScript callbacks | Requires Flash and does not work in browsers with flash not been installed |
| Exactly similar to Plupload | Customization becomes difficult without proper knowledge of javascript |
| Unlike Plupload, the forums are very active. |
Live Demo and Download
|
Download |
Live Demo |
PHP login script with advanced features
Posted by Praveen Gowda I V in PHP, Web Design on July 29, 2011
A MEMBERS AREA is essential for each and every website. To enable your visitors to register with you on your website to access premium content it is very much essential to have a very good login system. Now you might be wondering what really I mean by a GOOD login script is ?.
Flexible, user-friendly, loaded with features and many more……..
In fact there are hundreds of log in scripts out there on the web but some of their disadvantages are :
-
Either they are premium scripts which will obviously need you to shell out some money
- Some of them are not friendly enough to let even newbies to customize the script for their own needs
-
Mainly, most of them don’t have those added features like “Remember Me“, “E-Mail Support“, “Security“,”Admin Center“, “Visitor Tracking“, “Forgot Password” and many more…. which is offered by this tutorial
So if you had also come across the same hurdles as I stated, then you are finally at a safe place
This login script will allow you to set up a members only area where visitors must first need to login in order to access the members area (pages containing premium content). Lets have a quick look on the features of this login script
-
Excellent Security – Passwords are md5() encrypted and random ids are used
-
Remember Me – this feature will log in the user automatically when the visitor visits next time , but only if the user didn’t log out before he left.
-
E-Mail Support – New Registered users receives an email confirming registration along with username and their password sent to the provided Email address
-
Edit Account – Users are allowed to edit their account details like password and E-mail account after logging In.
-
User levels – Every user can be assigned a specific user level which determines the content to be displayed for a specific user
-
Admin Center – Admins have features like banning users, deleting users, View full details of all your registered users, update user level of users
- Sticky Forms – Instead of displaying errors in a separate webpage, all the errors in entering data in to the form by the visitor is displayed in the same page as the login form which prevents users from re-entering user data
-
Forgot Password – There is always a probability of visitors (users) forgetting their passwords and a “Forgot Password” Feature comes in handy for password resetting
-
Easily Customizable – The script contains numerous comments and a rich documentation of each and every function which helps you to customize the script
Excellent Security, Forgot Password, Easily Customizable, Sticky Forms, Admin Center, User levels, E-Mail Support, Remember Me
Flexible, user-friendly, loaded with features and many more……..
Go Ahead and try the demo to see the script in action or download the script for a login system for your very own website.
The files have received an update and users will no longer get errors due to short tags and depreciated functions.
Use the download link below to download version v1.1 of the login script, version 2.0 with all the additional features are on the way.
|
DOWNLOAD |
 ADMIN DEMO |
LIVE DEMO |
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
I recommend taking a look at the Documentation for complete details for installation and Customization.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.
Recent Comments