Creating A Pinterest Style Image Layout in CSS

Hey there ! Used Pinterest and love that fluid image layout ? Well you could easily create a similar layout with Bootstrap. In this post we would be creating an image layout similar to the one in Pinterest and we would be doing this with Bootstrap and Picturebox (a jQuery Lightbox plugin). The output that we create would be completely responsive and fluid. So alright lets dive into the topic. 

Prerequisites :

• Bootstrap
• Picturebox Plugin
• Text Editor
• And some sample images

Getting Started with The Code :

Ok so lets get started with the code. Create a folder on your desktop and open it up. Copy the Bootstrap.css file that you just downloaded into this folder. And also paste folders images and includes that was present in the Picturebox plugin that you just downloaded. Now just create a couple of files in the folder and name it as index.html and another one as pinterest.css. Keep the pinterest.css file in your includes folder. We would first be dealing with the index.html file. So open it up and type in the following code and this would link the script files and the css files that we would be using.

<link rel = "stylesheet" href = "bootstrap.css">
<link rel = "stylesheet" href = "includes/picturebox.css">
<script src = "includes/jquery.js"></script>
<script src = "includes/picturebox.js"></script>

We would be using Bootstrap's grid system in this project. You might be familiar with that but still its worth explaining. Bootstrap's grid system divides the entire width of your browser into 12 columns which would arrange itself depending on the width of the window. To make use of the Bootstrap grid just create a class called container which would be the grand parent class and a class named rows which would be the parent class. We would be creating four child columns each with a class col-md-3 and the 3 here implies that we are combining 3 of those 12 columns and making that into a single column. And so we would now have 4 columns and each of them would be a combination of 3 columns which we spoke about early. So below is the code that would create what we spoke now.

<div class = "container">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
</div>
</div>

Now lets fill these columns with images. The first child div corresponds to the first column of images, the second child div the second column of images and so on. So lets fill it up and the end code would look something like below.

<div class = "container">
<div class = "row">
<div class = "col-md-3">
<img src = "images/1.jpg">
<img src = "images/2.jpg">
<img src = "images/3.jpg">
<img src = "images/4.jpg">
</div>
<div class = "col-md-3">
<img src = "images/5.jpg">
<img src = "images/6.jpg">
<img src = "images/7.jpg">
<img src = "images/8.jpg">
<img src = "images/9.jpg">
<img src = "images/10.jpg">
</div>
<div class = "col-md-3">
<img src = "images/11.jpg">
<img src = "images/12.jpg">
<img src = "images/13.jpg">
<img src = "images/14.jpg">
</div>
<div class = "col-md-3">
<img src = "images/16.jpg">
<img src = "images/17.jpg">
<img src = "images/18.jpg">
<img src = "images/19.jpg">
<img src = "images/20.jpg">
<img src = "images/15.jpg">
</div>
</div>
</div>

And so the final task we need to do with the index.html file is integrating this with the Picturebox plugin. To do that cover the image tags with a div of class lightbox. That's it. Its really so simple to integrate the Picturebox plugin. The entire index.html file would look like the following :

index.html file : 

<link rel = "stylesheet" href = "includes/bootstrap.css">
<link rel = "stylesheet" href = "includes/picturebox.css">
<script src = "includes/jquery.js"></script>
<script src = "includes/picturebox.js"></script>
<title>Pinterest Style Image Gallery</title>
<div class = "container imggrid">
<div class = "row">
<div class = "col-md-3">
<div class = "lightbox">
<img src = "images/1.jpg">
<img src = "images/2.jpg">
<img src = "images/3.jpg">
<img src = "images/4.jpg">
</div>
</div>
<div class = "col-md-3">
<div class = "lightbox">
<img src = "images/5.jpg">
<img src = "images/6.jpg">
<img src = "images/7.jpg">
<img src = "images/8.jpg">
<img src = "images/9.jpg">
<img src = "images/10.jpg">
</div>
</div>
<div class = "col-md-3">
<div class = "lightbox">
<img src = "images/11.jpg">
<img src = "images/12.jpg">
<img src = "images/13.jpg">
<img src = "images/14.jpg">
</div>
</div>
<div class = "col-md-3">
<div class = "lightbox">
<img src = "images/16.jpg">
<img src = "images/17.jpg">
<img src = "images/18.jpg">
<img src = "images/19.jpg">
<img src = "images/20.jpg">
<img src = "images/15.jpg">
</div>
</div>
</div>
</div>
</body>

You could see that we have added an extra class to the div with the class container called imggrid. So the entire index.html file is now done. Lets now add some code the pinterest.css file and lets complete the task. Add the following code to the css file.

body {
  background-color: #0072c5;
  color: #fff;
  font-family: Lato;
  font-weight: 700;
  font-size: 50px;
}
.imggrid img {
  width: 100%;
  margin-bottom: 15px;
}

 So its all done now and your Pinterest style image layout is now ready ! Just open up the index.html file in the browser and you could see the awesome Pinterest style image layout in your browser ! Try resizing your browser and take a look at the responsiveness of the layout. Good looking right ? And you can download the source code or see the live demo below.

I used the following book to learn Twitter Bootstrap and its really awesome. Wanna know more about Bootstrap ? Then make sure you check out the following book.

So leave your doubts if any in the comments section. Happy designing :)

Read More

How To Host Your Node JS Application Online

Just created your node application and dont know what to do with that further ? Well your application would be of no use to others if you are not gonna host it online somewhere. But hosting a node js application is kinda different compared to hosting your PHP application. You just dont have any file manager that would let you upload your node js and you could not run it. It doesn't work that way. So how do you do it ? We would be dealing the exact same thing in this post on how to host your Node JS application online.

We would be using IBM Bluemix to host your node js application. IBM Bluemix is a cloud hosting platform that lets you to host your applications online. It accepts loads of different languages including even PHP. You could upload your PHP application too. But still, this is in beta as of now and it is free unless it is beta. Maybe they would have a free plan to go with, including loads of limitations. So now lets see on how you would host your Node application online using IBM Bluemix.

Hosting your First Node JS Application :

1. Head over to this link and join the free beta. Sign up for it and move on to your dashboard.

2. The next thing that you would need to do is to download and install the cloud foundry tool that is a command line tool for IBM Bluemix. You could get that from this GitHub link. Scroll down to the downloads section.

For Windows users just copy the downloaded file which would be name cf to your system32 folder so that the command could be accessed via the command prompt.

For Ubuntu users I hope that tool is available via the Ubuntu Software Centre. 

3. Now that you have downloaded and installed the Cloud Foundry tool open up your Terminal and type in the following command so that the api gets set.

cf api https://api.mybluemix.net/

I hope that it would already be set for Windows users but still there is no harm in running the above code.

4. Make a copy of your Node application folder and open it up. You need to create a file named manifest.yml in your root (make note of the extension). And open it up in your text editor and type in the following in it.

---
applications:
- name: NAME OF YOUR APPLICATION HERE
  memory: 256M
  instances: 1
  host: YOUR PREFERRED HOST
  command: COMMAND YOU NEED TO RUN TO START THE APPLICATION

Make sure that you replace the things written in caps. Name of your application MUST match the name of the folder in which your Node application resides.

YOUR PREFERRED HOST - This is where your Node application would reside online. If you enter in xproweb then your application would be hosted at xproweb.mybluemix.net given the fact that it is not taken by some other user. If it had been taken you will get an error while upload and we will be uploading the file now.

For example my manifest.yml file for the chat application which I created in the last post looked like this :

---
applications:
- name: xproweb
  memory: 256M
  instances: 1
  host: xproweb
  command: node server.js

5. Alright now that you have created your manifest file, open up your terminal and change directory to your Node application root folder. And type in the following command :

cf login

It would now prompt you for an Email ID and a password. Enter in the email and password that you used to sign up at Bluemix.

6. Now you need to make a small change to your code. Add the following snippet before everything in your server.js file. This is a must for every application.

var port = (process.env.VCAP_APP_PORT || 8192);
var host = (process.env.VCAP_APP_HOST || 'localhost');

7. Before you upload your application you MUST delete your node_modules folder. Cloud Foundry will look into your package.json file and it would install the dependencies by itself.

8. And its time to upload your application to Bluemix. Type in the following command in your terminal and hit enter to start upload.

cf push app_name

Replace app_name with the name of your application as specified in your manifest.yml file. So now your application would be uploaded successfully. Just point your browser to the host provided in your manifest.yml file and you would see your application there !

There is also an alternative to Bluemix called as Heroku and you could check about it here.

That is it ! You now have a successful Node application running online ! Happy Node-ing :)

Read More

Create a Simple Chat Application in Node JS

Node JS is the new hotness for developers out there. Well not completely new. It came out about five years back but still if fairly new. It was mostly noted because of its non blocking procedure. And so it would be much useful for creating a file upload system which does not affect the rest of your code, can be used to create a chat system and much more. So lets get started with our chat system.

Getting Started with Chat System :

There are some pre-requisites that you would need to know for creating this. Take a look below for them :

• Knowledge on Javascript would help
• Good Text Editor
• Node JS on your computer

So well just head to this site and install Node JS.

NOTE : This is just a test application to get you started and has no measures for security.

Starting with your Code :

 Create a folder on your desktop and lets call it "chat". Open your terminal or your command prompt and change the directory to the chat folder on your desktop and run the following command.

npm init

It would prompt you to enter you some details regarding your application. Enter those details and hit return. Now that a package.json file would be created in your chat folder. This package.json file would be containing details that you entered in the terminal. And now you need to enter the name of the modules that you need to use in your application. In our case we would be using two modules connect and socket.io. I would be explaining the need of these modules later. For now open up the package.json file that was just created and type in the following in it. You need to enter this before the closing curly braces.

,"dependencies": {
  "connect": "2.0.0",
    "socket.io": "0.9.6"
  }

And now you need to install these modules before you could use it. To do the installation type in the following command in your command prompt after you change the directory to the chat folder.

npm install

And so now the modules got installed and lets get started with some node code.

Create a file called server.js in your chat folder. You would be creating your server in this file. We would be using the connect module to create the server. This would redirect your server to the index.html file in a folder named public which you need to create. Type in the following code to create the server and redirect it.

var connect = require('connect');
var io = require('socket.io');
var app = connect().use(connect.static('public')).listen(8080);
var chat = io.listen(app);

Now just create a folder named public and create a file named index.html in that folder. Just type in some sample content in it and lets test your app to see if that works well. To start your application type in the following command in your terminal after changing the current directory to the chat folder.

node server.js

Now open up your browser and navigate to http://localhost:8080 and this should display the index.html file of your public folder.

And now lets make our page to look like a public chatroom. Just add the following code in your index.html file.

<title>Chat Room - Node JS</title>
<link rel = "stylesheet" href = "style.css">
<script src = "/socket.io/socket.io.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class = "room">
<div class = "messages">
<b><p class = "text" style = "color: #0072c5;">Messages</p></b><hr>
<div class = "text" id = "chat">
</div>
</div>
<textarea class = "msginput" id = "chattr" placeholder = "Hit Enter To Send Message" onkeydown = "check(event.which)"></textarea>
</div>
</body>

And to do some styling add the following code in your style..css file.

body {
background-color: #f1f1f1;
}
.room {
background-color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 70%;
height: 70%;
padding: 2%;
}
.msginput {
resize: none;
width: 95%; font-family: Arial;
font-size: 16px;
padding: 10px;
border-radius: 10px;
position: absolute;
bottom: 10px;
left: 2%;
}
.messages {
border: solid #d1d1d1 1px;
padding: 10px;
height: 80%;
overflow-y: scroll;
}
.text {
font-family: Arial; }

Ok so now the markup part is done and lets get started with some socket.io code. So what is socket.io ? It is used for web socket programming in Node JS. Web sockets are bidirectional and full duplex that allows you to send and receive data back and forth between the server and the client simultaneously unlike the http protocol.

Socket.io allows you to emit and receive events between the client and the server. You can emit an on the server side and the client can listen for that and do some function or a client can emit an event and you can listen for that event on the server side. So we first need to create a variable that contains the sockets object. And we could use the connect event that is already present in the module to run a function when a new client connects to the site. So type in the following code in your index.html file.

<script src = "/socket.io/socket.io.js"></script>
<script type = "text/javascript">
var chat = io.connect();
var nickname;
chat.on('connect', function(){
              console.log('New user connected');
});
</script>

Try running this using the node server.js command in your terminal. Now open up your browser and redirect to http://localhost:8080. And then open up your terminal and you would see the message New user connected. We now need to create a prompt that asks the user to enter their name. After getting the name of the user we would then fire an event from the client that would contain the name of user. On the server side we would just listen for that event and would broadcast that message to all the sockets connected at that time. We will be dealing with the server side events at the end. To do that modify the above code as follows :

<script type = "text/javascript">
var chat = io.connect();
var nickname;
chat.on('connect', function(){
nickname = prompt("Enter Your Name :");
chat.emit('message', {message: "<i><b style = 'color: #0072c5;'>" + nickname + "</b> Joined</i><hr style = 'opacity: 0.3;'>"});
});
</script>

Instead of sending just a boring plain text I have just formatted it with some html tags make it look good. Alright. You could see that in the index.html we already had created a chat room look with a textarea with id chattr. We would just check every character that the user enters and check for him hitting the return key. Once he hits the return key we would fire the chat event and would send the message that the user entered along with the event. If you had noticed above we would have created an onkeydown event in the textarea that fires a check() function along with the event parameter. So lets create the check function now. Using this we would check the key code of the key pressed. And if it matches the keycode of return key (i.e. 13) we would fire the chat event. Add the following code to the script tag.

function check(e){
if(e==13){
chat.emit('chat', {message: nickname + ": " + $('#chattr').val()});
$("#chattr").val("");
    }
}

Ok so now lets go to our server side and lets listen for the events that we fired from our client. To do that add the following code to your server.js file.

chat.sockets.on('connection', function(client){
client.on('message', function(data){
chat.sockets.emit('message', {message: data.message});
});
client.on('chat', function(data){
chat.sockets.emit('message', {message: data.message + "<hr style = 'opacity: 0.3;'>"});
});
client.on('disconnect', function(){
   chat.sockets.emit('message', {message: "<p style = 'color: red;'>An User Left.</p> <hr style = 'opacity: 0.3;'>"});
});
}); 

You could notice that we are emitting another event called message event to all the sockets while listening to the chat event. We would be listening to that event on the client side again and would be displaying it to the user. And we also are emitting an event when the user gets disconnected which displays a message An User Left to all the users connected. So now our final job would be to display the message to the user. To do that add the following code within the script tag of your index.html file.

chat.on('message', function(data){
$("#chat").append(data.message);
});

We have just appended the div with id chat with the message that an user sends. So this would complete your application.

With all these said you could see that Node JS is already becoming too popular due to its asynchronous code. So it is a must to learn if you are going to be one of those awesome web developers out there. I used the following book learn Node JS and its really awesome. So why don't you do that too. You can buy it from the link below.

 You can find the code in the link below.

Try opening the live demo in a couple of tabs and test it out. And so that's the end of the post. Hope it helped out. Happy Node-ing :)

Read More

How To Prevent Cross Site Request Forgery - PHP

CSRF stands third in the top 5 most important PHP security issues. Most of the sites out there are vulnerable to this CSRF attack. This can be carried out if you got some form submission on your site. So the first part of this post we would be seeing on what is CSRF attack, how it could be carried out and in the next post we would be dealing with the steps that we could take to prevent the attack.

How CSRF is carried out :

So the first step that you need to take in preventing any kind of hack is to learn how that hack works and how an hacker carry out that attack. So now lets see on how a CSRF attack is carried out.

Lets consider that you are having a site that allows your users to enter a list of movies that they've seen using a simple form that allows them to enter the name of the movie and their rating of the movie.  Let the form code look something like the following : 

<form method = "post" action = "submit.php">
<input type = "text" name = "movie">
<input type = "text" name = "rating">
<input type = "submit">
</form>

Lets say that your site's address is yoursite.com. Below is how the attack could be carried out considering this kind of a form.

1. The hacker would create a simple page containing the exact same form. He would change the action of the form that he just created to "yoursite.com/submit.php". So he is now redirecting the form to the submit.php file which is on your host.

2. The hacker would just fill in the details of the form by himself and the form would look something like this.

<form method = "post" action = "submit.php">
<input type = "text" name = "movie" value = "Inception">
<input type = "text" name = "rating" value = "5">
<input type = "submit">
</form>

3. The hacker would hide the form and would just trigger the submit button using javascript when someone visits this page.

4. So when a user who is logged in to your site visits this page then the movie Inception would be added to your database with the rating of 5 which the user would not be aware of. And the hacker has successfully completed his attack.

This is not the most basic example. The most basic example of this kind of an attack can be carried out if the developer is using a GET request. The hacker can simply modify the GET parameters and create an URL. He could then make the user to just open the link by some means.

This is just an example. In the same way the hacker could do any stuff. Even Bank Transactions ! Frightening right ? Well no worries. There are solutions for you, the developer, to overcome this issue.

How To Prevent CSRF :

1. Captcha Verifictaion :

Well, using captchas is one of the best ways to prevent a CSRF attack and this is the reason why most of the sites have a captcha verification when the user wants to do some sensitive changes to his/her account. But still captchas are not user friendly and a normal user would not understand the significance of a captcha code and would just get frustrated by entering it again and again. So there is another alternative which proves to be much efficient and user friendly.

2. Using Secret Token :

This is considered to be the best way to prevent CSRF attacks by most of the developers out there The basic concept is that you are including a hidden field in your form and you are entering a secret token as a value in it. You need to save this token value in a session variable. And in the form submission page all you need to do is to check if the value of the hidden field matches the value in your session variable. If it doesn't match then that would most probably be a CSRF attack. You can do it like follows.

<!-- form.php file --><form method = "post" action = "submit.php">
<input type = "hidden" value = "secret_token" name = "postsecret">
.... <!-- Rest of your Form goes here -->
</form>
<?php
 $_SESSION['secret'] = "secret_token";
?>

<?php
//submit.php file
if($_SESSION['secret'] != $_POST['postsecret']){
     //It's a CSRF attack
}
else{
    //Rest of your code here
}
?>

The only thing that you need to make sure is that if the secret_token is sufficiently hard to guess and it gets regenerated every time the user visits the form.php file.

And so this would be the end of the post and hope this helped you. Safe coding :)

Read More

What is and How To Prevent XSS [PHP Security]

Security has been much of a concern for a long time and so it is important that you secure your web apps in the right away and you add the right amount of security.

Cross Site Scripting (XSS) is one of the most common vulnerability that most of the sites out there have got. It seems that about 65% of the websites over the internet are vulnerable to XSS. So why don't you just add your site to the rest 35%.

YOU MIGHT ALSO LIKE : What is And How To Prevent Session Hijacking in PHP

In this video showing you a demo on how XSS is performed and how you could prevent that.

Basic Principle :

The Basic principle behind XSS attacks is that if the user has got a text area to enter some details in it and pass it in a form and if you don't monitor the data that the user enters then he would be able to add HTML tags and even inject Javascript ! So you need to filter the data to make sure that the user input is free of Javascript for sure and the HTML part is just your wish. So take a look into the video to get to know on how to prevent the user from entering some Javascript into the input fields.

The Awesome Google Chrome :

If you are going to try XSS on Google Chrome you are going to fail even if the developer has not added any kind of data sanitization. This is because Chrome has some inbuilt stuff that prevents the users from entering Javascript into the input fields. But rest of the browsers out there are vulnerable to this attack. So it is even safer to use Chrome when you browse.

So maybe I'd be making more such videos in the future on PHP Security. Safe Coding :)

Read More

Creating a Slide Up and Slide Down Effect using CSS

CSS animations do rock according to me when compared to other kinds of web animation. I love those just for the fact that they are pure CSS. But still a few of those CSS animations are not completely pure CSS. They need JavaScript to handle some stuff. In this post we will be seeing on how to create a simple CSS slide up and slide down animation. So lets get started.

YOU MIGHT ALSO LIKE : CREATE YOUR FIRST CSS ANIMATION

The HTML Part :

The first thing of course is that you need to create the stuff that you need to animate. In this case we would be creating a simple HTML div that has a background color of black or whichever you prefer. Just add the following code to create the element and about the background color we would be dealing that with CSS.

<div class="slide" id = "slide">Random Stuff in here.</div> 

CSS :

And so now lets get started with the fun part. Add the following CSS stylings to your page. This basically adds a CSS transformation that lets you to animate the div that we created in HTML.

.slide {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
width: 200px;
height: 200px;
background-color: red;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
.slide.closed {
max-height: 0;
}

The basic concept behind this is that we are just adding an additional class the div when we click on a button that we are about to create. This can be done using JavaScript. And so just add the following code and you would get the complete finished product.

<button onclick="document.getElementById('slide').classList.toggle('closed');">Click Me !</button>

And so that is it ! Happy Animating :)

Read More

Introduction To PHP Data Objects (PDO)

MySQL is almost dead and people are moving towards PDO and MySQLi a lot these days. The most important reason that people switch from MySQL is the fact that it is prone to injection. This could be prevented but still it is a major security flaw. So it is now time for you to migrate to PDO.

PHP Data Objects :

PDO is not as difficult as you think. It is pretty simple, in fact much simpler than MySQL. It is a more standardised way for dealing with Databases. It has common  syntaxes for different types of databases including MySQL, PostgreSQL, MS SQL Server etc. So watch the video below to get to know the basics of PDO.

Read More

Customizing Scrollbar with jQuery and CSS

Scrollbars would look really cool if they get customized in the right way. It would for sure enhance the visual appearance of your site. And so in this post we would be seeing on how to customize the scrollbar using jquery and CSS. There is a method to customize it using pure CSS but the big problem with that is that it wont take effect in non webkit browsers like Firefox or Opera. And so we would be using jQuery plugins to make this task easier. This would just include a single line of jquery. So lets get started.

jQuery enscroll Plugin :

This plugin would help us in customizing the scrollbar. You can download the plugin from here.

Writing Down the Markup :

So lets just write in the HTML part now. Wrap the content that you want to be scrollable with a div of class scrollbox. Below is a sample code :

<script src = "jquery.js"></script>
<script src = "enscroll.js"></script>
<div class = "scrollbox">
   //Your Content Here
</div>

And so that is it we are done with the markup ! Simple as that !

The CSS:

And so it is time to customize the scrollbar. This of course we would be doing with CSS. Take a look at the code below :

.vertical-track {   //For the background track of the scroll bar
   //Stylings Here
}
.vertical-handle { //For the scrollbar pointer
   //Stylings Here
}

This styling holds good only for the vertical scrollbar. You can use .horizontal-track and .horizontal-handle for styling the horizontal scrollbar.

jQuery Part :

And so we are done with the markup and CSS. Lets add the jquery line now. Before that make sure that you have included the enscroll.js file and your jquery.js file. The following is the jQuery code that you would need to add.

<script type = "text/javascript">
$(document).ready(function(){
   $('.scrollbox').enscroll();
});
</script>

And so that is it for this post. Happy styling :)

Read More

Create Your First CSS Animation

CSS Animations ! Yeah you can really do some good looking animation stuff in CSS and the basics are pretty simple too. In this post I would be writing on how to do some basic animation using CSS. To get started with CSS animations you need to learn a little bit about CSS transforms. They are kinda simple too.

So CSS animations are made of keyframes. Keyframes are parts of the animations and they define the animation. There are two steps in creating some animation effect using CSS.

• Defining the CSS animation
• Assigning it to an HTML element

And so let us get started with the first step i.e. defining the CSS animation. And by the way in this post we will be creating an animation that moves an image from one end to another.

Defining CSS Animation :

And so to define a css animation we need to use the @-keyframes keyword and you need to use moz and webkit to make sure that it works on all webkit browsers and as well as firefox and in addition to this keyword you need to add a name to the animation. So type in the code below to create the keyframe :

@-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

And so that is it about defining the CSS Animation. You have now created the keyframes. And now you need to make it compatible with all those webkit browsers and firefox. It is really simple to do that. Just add the following lines of code and you could do it.

@-webkit-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);
} 

@-moz-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

It is better that you add these two pieces of code before the previous one. And now that you have completed with the keyframes stufff. It is now time to add the HTML code and associate this animation with the HTML image.

Assigning Animation To HTML Image :

Lets just add a simple image using HTML and add a class to it.

<img src = "image.jpg" class = "animation">

And now let us add the animation to the HTML element. Add the following code to the CSS file.

.animation {
animation-name: firstanim;
animation-duration: 2s;
animation-timing-function: ease-in;
}

The first two lines are self explanatory. The third line wont be clear if you are new to this. It just defines the type of animation that you would like it to happen. It can take 5 type of values. They are linear,ease,ease-in,ease-out,ease-in-out. You can just experiment these things if you want. And the last thing that you need to do is to just add the following code to the same class so that it supports webkit browsers and firefox.

-webkit-animation-name: firstanim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: firstanim;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in;

And so that is it for this tutorial on basic CSS Animation. You can just download the Source code from the above link and try the demo. Happy Animating :)

Read More

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