PictureBox - The Most Simple Lightbox Plugin (jQuery)

So you would have seen in many sites that images would be displayed in a separate container and the background would get dull while the image gets displayed, just like lights off ! This is called a jQuery lightbox. And many think that it is a bit difficult to create and implement a jQuery Lightbox. That is kind of true if you are going to create your own Lightbox. The trouble comes in when you need to center the image in the dead center of the page.

Related Post : Horizontal and Vertical Centering in CSS

So to help you out of those troubles many developers started to create lightbox plugins. And I too did so keeping in mind that simplicity should be delivered. 

I created a jQuery Lightbox plugin called as PictureBox and the advantage of this plugin from others lies in its simplicity to implement and you will find out that in the later part of this post.

PictureBox ! - A Simple Yet Awesome jQuery Lightbox plugin

Features :

• Completely Responsive
• Very Easy To Implement
• Very small footprint of 4.7 KB
• Responds to your KeyStrokes
• Includes Image Slider

How To Implement :

As I have been saying the implementation is so simple that even newbies could handle it. Here is the sample implementation code :

<link rel = "stylesheet" href = "includes/picturebox.css">

<script src = "includes/jquery.js"></script> 

<script src = "includes/picturebox.js"></script> 

<div class = "lightbox"> 

                   //Your Images 

</div> 

To put it much simpler just wrap the images that you want to appear in the image slider with a div of class lightbox. Simple as that ! So it is worth trying and you would love it.

Read More

Facebook PHP SDK V4 - Logging In and Get Name of User

Facebook recently updated the PHP SDK. And so the current version is version 4.0. And things have changed a lot from the previous version. It is now completely object oriented and is kinda easier when compared to the earlier version which was 3.2.3. I already made a video on how to Login To Facebook and Get the name of the user using PHP SDK V 3.2.3 and so in this post we will be seeing on how to do the same using this version. Lets get started.

Downloading the Facebook PHP SDK :

And so it is similar to download the PHP SDK and its just like the last version. So get headed to the link below to download the PHP SDK.

DOWNLOAD FACEBOOK PHP SDK V4

Writing Down The Code :

And so the next part is to code the stuff. The first thing that you need to do is that you need to extract the downloaded file and you need to copy the folder named Facebook inside the src folder. Copy that folder to the root of your project. And then write the following piece of code inside your index.php file.

<?php

session_start();

include 'Facebook/FacebookSession.php';

include 'Facebook/FacebookRedirectLoginHelper.php';

require_once( 'Facebook/FacebookRequest.php' );

require_once( 'Facebook/FacebookResponse.php' );

require_once( 'Facebook/FacebookSDKException.php' );

require_once( 'Facebook/FacebookRequestException.php' );

require_once( 'Facebook/FacebookAuthorizationException.php' );

require_once( 'Facebook/GraphObject.php' );

require_once( 'Facebook/GraphUser.php' );

Use Facebook\FacebookSession;

Use Facebook\FacebookRedirectLoginHelper;

use Facebook\FacebookRequest;

use Facebook\FacebookResponse;

use Facebook\FacebookSDKException;

use Facebook\FacebookRequestException;

use Facebook\FacebookAuthorizationException;

use Facebook\GraphObject;

use Facebook\GraphUser;

FacebookSession::setDefaultApplication('APP_ID', 'APP_SECRET');

$helper = new FacebookRedirectLoginHelper('http://cyberfreax.com/test/index.php');

$session = $helper->getSessionFromRedirect();

if($session != NULL){

echo "Logged In !<br>";

}

else{

echo '<a href="' . $helper->getLoginUrl() . '">Login</a>';

}

?>

And so in this code what we basically do is that we just include the Facebook PHP SDK files in our index page. Unlike the earlier version of the Facebook PHP SDK in this version Facebook has separated the different functions into different files so that you don't need to includes unnecessary functions in all files. And moreover it uses namespaces.

We are getting the Facebook session using the default function. If the session is not available then we prompt the user to login by displaying the Login link. And if the session is set it would mean that the user is logged in. And so we are at first just displaying the name of the user. But we would want to display the name of the user too. And so add the following piece of code right below the echo "Logged In !<br>"; line.

$request = new FacebookRequest($session, 'GET', '/me');

$response = $request->execute();

$graph = $response->getGraphObject(GraphUser::className());

echo $graph->getName();

Instead of the above piece of code you can also combine them into a couple of lines. You can add something like the following :

$request = (new FacebookRequest(

      $session, 'GET', '/me'

    ))->execute()->getGraphObject(GraphUser::className());

    echo $user_profile->getName();

But the problem with the above code is that it works for only PHP version 5.3 and above. So make sure that you have a suitable version of PHP before running the above code.






And so that is it. You can now easily add a Login with Facebook link to your website using the latest version of Facebook PHP SDK. Happy Coding :)

Read More

How To Respond To Key Strokes using Javascript

Responding to key strokes using Javascript is pretty simple and not as difficult as you think it is. This can be done using a simple javascript event called as onKeyDown and onKeyUp. And so this is a simple video tutorial teaching you guys on how to respond to key strokes using simple javascript.

Read More

How To Create A Drop Cap in CSS

Drop Caps ! So they are one of the cool ways to design your site. The first thing you need to know is what is a drop cap ? Drop Cap is the one that you see in most of the books that the first letter of a chapter would have different stylings. It would have a bigger font size when compared to other parts of the paragraph. That is called as a drop cap. You can see that in this post too. So lets see on how to add that using CSS.

Using a Span :

One of the easy way to do that is to cover the first character of a paragraph to be within a span. You can do that using the CSS code like in the below.

<style>
.dropcap {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p><span class = 'dropcap'>D</span>rop Caps are really awesome !</p>

Targeting first character using CSS :

In most cases it is possible that the text that you would like to enter in would be dynamic and so the above method would not be of use in such a case. So lets see on how to handle it. It can be done using CSS selectors.

<style>
p:first-child:first-letter {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p>Drop Caps are really awesome !</p>

The output of this method would be the same as that of the previous method.But there is a catch here. This method wouldn't work for IE < 9. But that would not be a big problem. Only a very small percent of IE users would be using IE < 9. So don't worry about that. The output of the above methods would be something like the follows :

Drop Caps

And so that is it about this short post. Happy Designing :)

Read More

Create A Fully Functional LightBox in jQuery [VIDEO]

Ever wondered how to create a lightbox ? So here is a video tutorial on how to create a fully functional LightBox in jQuery. This includes a Image Slider too. Watch the Video Below to do it in minutes :)

Read More

Horizontal and Vertical Centering in CSS

Horizontal and vertical centering in CSS has been a boss for the css newbies who din't know the right way on centering elements in CSS and here is a guide on how to horizontally and vertically center elements in css. There are a few scenarios in this case. And lets deal with all of them.

Images :

1. Know Dimensions Horizontal and Vertical Center :

And so let us you are in such a situation where you are having an image with known dimensions and you want to center the image both horizontally and vertically so that it is in the dead center of the page. Then you can do something like the follows :

<style>

img {
position: absolute;
top: 0;
left: 0;
top: 50%;
margin-top: -250px; //half the height of the image - vertical alignment
left: 50%;
margin-left: -250px; //half the width of the image - horizontal alignment
}
</style>
<img src = "images/1.jpg" width = "500" height = "500">

OUTPUT 

This is the best way to align an image of a known width and height. What if you don't know the width and the height of the image that you are displaying for example if you are displaying images dynamically then you would not be knowing the width and height. So to align them take a look at the next scenario.

2. Unknown Dimensions - Dead Center Align :

To align an image in such a case you first need to create a div and let that div be the parent. The image would be a child in this case and so now you can easily align the image in the dead center of the div.

If you want to align the image in the dead center of the page then just expand the div to the entire page by using a width and a height of 100%.

<style>

#parent{
position: relative;
background-color: #d1d1d1;
width: 80%;  //this is your choice. But make sure you use % instead of pixels
height: 80%;  //this is your choice. But make sure you use % instead of pixels
}

#parent img {
position: absolute;
top: 5%;                           //vertical alignment
bottom: 5%;                  //vertical alignment
margin: auto;               //horizontal alignment
left: 0;
right: 0;
max-width: 70%;    //this is your choice. But make sure you use % instead of pixels
max-height: 70%;   //this is your choice. But make sure you use % instead of pixels
}

</style>

<div id = "parent">
<img src = "images/1.jpg">
</div>

And so the the image now has been dead center aligned ! So now lets see on how to align a text element.

Text

1. Dead Center of the Body :

Add the following code to your text editor. Make sure that the javascript comes after your element's markup.

<style>
p{
text-align: center; //horizontal align
}
</style> 

<p id = "new">Hello World</p>

<script>
var height = window.innerHeight;
alert(height);
document.getElementById("new").setAttribute("style","line-height: " + height +"px;");   //vertical align
</script>

2. Dead Center of a DIV :

It is easier to align text in the dead center of a div than the dead center of the body. This does not include javascript if you know the height of the div. Use the code below for the purpose :

<style>

div {
border: 1px solid #000;
height: 300px;
width: 300px;
}

p{
text-align: center;
line-height: 300px;  //same as height of parent div
}

</style>

<div>
<p>Hello World</p>
</div>

And so that is it for this short tutorial. You can now easily horizontally and vertically align both images and text in your markup.  Stay tuned for more and Happy Coding :)

Read More

Post To Facebook using PHP SDK

Ever wondered how those apps that you use in facebook are able to post content to your profile or your groups ? Well here is the solution. In my last post I've dealt with how to Login to your facebook account using the PHP SDK. And in this post I'll be dealing with how to post to facebook using PHP SDK. Watch the video below to know how to do

Useful Post : Login and Get name of the user using the Facebook PHP SDK

Video Tutorial :

 

Read More

Facebook PHP SDK - Logging in a user [VIDEO TUT INCLUDED]

Hello there. I recently created a facebook web app that lets you to post to multiple groups, pages and your profile with just one click. You can post a message and even a link. Sounds cool right ? You can find the app here. And so I surfaced a lot through the facebook php sdk while creating the app. So now I thought of writing a series of posts dealing with the facebook php sdk.

In this post I'll be dealing with how to login to a facebook account using the facebook php sdk and how to retrieve the user information. And so lets get started.

VIDEO TUTORIAL

Prerequisites :

You need to have the following :

• Fair knowledge on PHP


• Facebook PHP SDK (We will be downloading this)


• Your Text editor

Creating the app :

The first step is to create the actual facebook app. And this will be a kind of a communication link between facebook and your site. Follow the steps below to create your app :

1. Go to Facebook Developers Page.

2. Click on apps on the header and go to Register as a Developer. 

3. And once you have registered as a developer you will get into the documentation. (I swear Facebook has a really bad documentation)

4. Click on the same apps tab and click on Create a new app.

5. Enter a name, choose a category and proceed with creating the app.

6. In your app dashboard go to the settings tab and enter a contact email address.

7. Click on Add Platform and select Website.

8. In the site URL text box type in the domain of your site if you have one else type in localhost if you would be testing the app at your localhost. (Note : Facebook PHP SDK code would work only in the site which you mention here)

9. Save it return to your dashboard.

10. Make a note of your App ID and App Secret.

Bringing in the Facebook Login :

And now that you have completed creating the app and it is time to creating the login functionality. Follow the steps below to do so.

1. Download the Facebook PHP SDK.

2. Unzip it and copy the src folder inside it to the root of your app.

3. Create an index.php file where you placed the src folder.

4. Fire up your index.php file and type in the following code.

<?php

require_once 'src/facebook.php';

$fb = new Facebook(array(

'appId' => 'YOUR APP ID',

'secret' => 'YOUR APP SECRET ID'

));

Remember to replace your app id and your app secret. What this basically does is it creates an instance of the class BaseFacebook present in the facebook.php file.

5. And now to login the user add the following code.

if($fb->getUser() == 0){    //checks if the user is already logged in

$loginUrl = $fb->getLoginUrl();   //carries out if user not logged in

echo "<a href = '$loginUrl'>Login</a>";

}

else{

echo "<a href = 'logout.php'>Logout</a>";  //we will be creating the logout.php file later

}

In this piece of code we are letting the user to login to your site using his facebook account. We are displaying the login link if the user is not logged in else we are displaying the logout url.

6. We have completed logging in the user and now the job is to display the profile picture and name of the user. To do add the following code in the else part.

$api = $fb->api('me');

$name = $api[first_name] . " " . $api[last_name];

$id = $api[id];

echo "<img src = 'http://graph.facebook.com/$id/picture?width=150&height=150'><br>";

echo "Hi $name";

7. And so the only job left is to create the logout.php file. Create a file named logout.php and add the following code in it.

<?php

require_once 'src/facebook.php';

$fb = new Facebook(array(

'appId' => 'YOUR APP ID',

'secret' => 'YOUR APP SECRET ID'

));

$fb->destroySession();

?>

Replace your app id and the app secret in the respective places.

And that's it ! We have successfully created a facebook which lets the user to login and we have displayed the user's profile picture and his name ! We are done for the tutorial. Stay tuned for more tutorials on Facebook PHP SDK. Happy Coding :D

Read More

Creating a Contact Form in PHP

Hello. In this post we will discussing on how to create a contact form in php for your website with core php and this would mean that we would be coding our own contact form and not use any other client for that. And using this method you would be easily able to track the number of people who submitted your contact without having to use Google Analytics. And a point to note is that this form would display error messages in a good looking way.

Creating The Contact Form :

For creating the contact form we would be using PHP for the server side part and we would be using twitter bootstrap for the design. And so the first part in creating the contact form is the markup and the design. The following will be the output of our markup code given below. You can edit the code to your needs.

CODE :

<!DOCTYPE HTML>

<link rel = "stylesheet" href = "libs/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>

<body style = "background-color: #4ea6e7;">

<center>
<div style = "background-color: #fff; border-radius: 20px; position: absolute; top: 10%; padding: 20px; width: 36%; left: 32%;">
<center><h2 style = "font-family: Monda;">CONTACT US !</h2></center>
<hr>
<?php
if(!empty($_GLOBALS['error'])){
echo "<div class = 'alert alert-danger'> " . $_GLOBALS['error'] . "</div>";
}
if(!empty($_GLOBALS['done'])){
echo "<div class = 'alert alert-success'> " . $_GLOBALS['done'] . "</div>";
}
?>
<form action = "" method = "post" class = "form-group">
<input type = "text" class = "form-control" name = "name" placeholder = "Name" style = "width: 100%;"><br>
<input type = "email" class = "form-control" name = "mail" placeholder = "Email" style = "width: 100%;"><br>
<textarea class = "form-control" name = "message" placeholder = "Message" style = "width: 100%; height: 150px; resize: none;"></textarea><br>
<input type = "submit" value = "Send Mail" class = "btn btn-primary">
</form>

</div>
</center>

</body>

NOTE : DO NOT CHANGE THE NAME ATTRIBUTE IN INPUT FIELDS ELSE YOU WOULD HAVE TO CHANGE THAT IN PHP CODE TOO

And now the markup is completed and the rest is to make it working with PHP. Make sure that if you are running this in your localhost then you need to configure your SMTP else if you are running it on a online server then it would mostly be pre-configured. Add the following code above the <!DOCTYPE HTML> in the markup code.

PHP CODE :

<?php

$_GLOBALS['error'] = "";

if(!empty($_POST)){
$name = $_POST['name'];
$email = $_POST['mail'];
$message = $_POST['message'];

if(empty($name) || empty($email) || empty($message)){
$_GLOBALS['error'] = "<b>Oops !</b> All Fields are Mandatory !";
}
else{
$_GLOBALS['error'] = "";
$message = $name . "<br><br>" . $message;
mail("YOUR MAIL ID","Contact Form",$message,"Content-type:text/html;charset=UTF-8\r\nFrom: $email\n");
$_GLOBALS['done'] = "<b>Success !</b> We'll get in touch with you soon !";
}

}

?>

NOTE : Replace YOUR MAIL ID with the mail id where the user's mail has to be sent.

And that's it about creating the contact form ! Feel free to post your doubts below. Happy Coding :)

Read More

What is Session Hijacking and How to Prevent It - [PHP]

Session hijacking would sound like something too big for newbies to php. Well here in this post I will be dealing with what is session hijacking and how to prevent it.

YOU MIGHT ALSO LIKE : What is and How To Prevent XSS Scripting in PHP - PHP Security

What is Session Hijacking ?

Session hijacking is a kind of a hacking method that an hacker can use to get access to other accounts provided that you are having a login system and you use sessions for that. Consider an example where you are using a session variable to store the username and password to check if the user is logged in. When a session gets started a cookie will be created with the name PHPSESSID and it will have a value that when the hacker acquires can add it to his browser and get access to the account of that person. Consider the following line of code :

session_start();

$_SESSION['username'] = "sri";

$_SESSION['password'] = "123";

Save it and open the page in your browser and open the cookies manager. You will observe that the following cookie would be created.

And when the hacker gets access to the content of the cookie he can write a piece of code to create a similar cookie on his browser with the same content and he would get access to the account of the user. And this is called session hijacking.

How To Prevent Session Hijacking :

Session hijacking is the most common method for hacking PHP sessions and in order to prevent that you can use the following two methods.

1. Hiding The Cookie :

Well note exactly hiding the cookie. The cookie would be visible by using this method but one cannot access it via browser script languages such as JavaScript. And so the user would be safe. To do so add the following piece of code right after you start the session.

ini_set('session.cookie_httponly', true);

2. Restricting with IP address :

And in this method we would be storing the IP from where the user logged in, in our session. And anyone else with IP other than the one in our session would be prevented from accessing the session variables. To do so add the following piece of code.

$_SESSION['ip'] = $_SERVER['REMOTE_ADDR']; //add this before logging in the user

if($_SESSION['ip'] != $_SERVER['REMOTE_ADDR']){   //add this check on top of every page shown after user logs in

session_unset();

session_destroy();

}

else{

//rest of your code

}

Working :

These two are the most effective ways for preventing session hijacking. Follow these and the hackers would be having a hard time. Happy Coding :D

Read More