Photo Galleries are becoming more and more popular these days. Today we are going to create a simple one using some of the new CSS3 features and jQuery. A prominent feature of the gallery is that You will be able to Drag the photos with single click in the gallery we are going to create. Hope you will enjoy this and understand it easily.
Lets take a look at what we will be building, hereis the final result :
View The Demo, you can also download the final result byclicking here (*.zip archive).
Step 1: Preparing The Files
Let’s start by creating our needed files :
- Index.html
- style.css ( this file will contain all the styles we need )
- script.js ( this one will contain our scripts )
In this tutorial I used some nature photos, but you can select your own:
- The Lookout By Chris Gin
- Leeds Castle Grounds By Joel Antunes
- Driftwood By Macindows
- Sunny Highlands By sopex
- Grassy Sunset By mattyv8
Here is also the texture I used in this tutorial.Now create a new folder, name it ” images ” then put in your choosed photos.
Step 2: The html file structure
First of all we have to link to our css, javascript files and both of jQuery and jQuery ui, to do this simply paste this code in your head section:
<script type="text/<span class="><!--mce:0--></script> <script type="text/<span class="><!--mce:1--></script> <script type="text/<span class="><!--mce:2--></script> <link rel="stylesheet" type="text/css" href="style.css" />
Now we need to show our images. To do this, add the code above into the body section of your html file :
<img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/3.jpg" alt="" /> <img src="images/4.jpg" alt="" /> <img src="images/5.jpg" alt="" />
Step 3: Adding some styles !
Now we have our html file ready, we need to add some styles to the body section and to our images:
body
{
background: url(texture.jpg);
}
img
{
padding: 10px 10px 50px 10px;
background: #eee;
border: 1px solid #fff;
box-shadow: 0px 2px 15px #333;
-moz-box-shadow: 0px 2px 15px #333;
-webkit-box-shadow: 0px 2px 15px #333;
position: relative;
margin:25px 0 0 15px;
}
Explanation:
Here I added a background image. For each image I set it’s background to a light grey and used some paddingsto give the traditional Polaroid shape. Also I have used some CSS3 techniques to give each image a simple shadow. Next I used some margins to make some space between the images.
Step 4: Time for some scripts
Now we have our images set up, we need to have some scripts to have a working polaroid.
First add this to your script.js file:
$(document).ready(function(){
var zindex = 1;
$("img").draggable({
start: function(event, ui) {
zindex++;
var cssObj = { 'z-index' : zindex };
$(this).css(cssObj);
}
});
});
I defined a variable with a name of zindex and assigned to it 1 as a value. Then I used the jQuery ui features to make each image draggable. When an image is dragged the zindex value will increase by 1 then I used $(this).css to change the z-index value of the dragged image.
Let’s continue, ad this to the previous code :
$('img').each(function(){
var rot = Math.random()*30-15+'deg';
var left = Math.random()*50+'px';
var top = Math.random()*150+'px';
$(this).css('-webkit-transform' , 'rotate('+rot+')');
$(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
$(this).css('left' , top);
$(this).mouseup(function(){
zindex++;
$(this).css('z-index' , zindex);
});
});
$('img').dblclick(function(){
$(this).css('-webkit-transform' , 'rotate(0)');
$(this).css('-moz-transform' , 'rotate(0)');
});
Here I used the .each() technique, so for each image three variables are created : the rotation degrees, the top position and the left position. For each variable you have to use some math : math.random returns a value between 0 and 1 so we have to control the other values to get the numbers we need. Per example the first variable will always return a value between 15 and -15 degrees. For the left and top position I used the same formulas but I have changed the other values. After preparing the variables we have to use them. To do this we are going to use the same method we have used in the previous code ( this.css) then change the rotation degrees, the top position and the left position of each image so we can get a random appearance.
After all this I used the .mouseup method so when an image is clicked it will be showed up in the front. Also you can add something useful : when the button is double clicked we are going to adjust it with rotate(0).
Now all our script file should look like this :
$(document).ready(function(){
var zindex = 1;
$("img").draggable({
start: function(event, ui) {
zindex++;
var cssObj = { 'z-index' : zindex };
$(this).css(cssObj);
}
});
$('img').each(function(){
var rot = Math.random()*30-15+'deg';
var left = Math.random()*50+'px';
var top = Math.random()*150+'px';
$(this).css('-webkit-transform' , 'rotate('+rot+')');
$(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
$(this).css('left' , top);
$(this).mouseup(function(){
zindex++;
$(this).css('z-index' , zindex);
});
});
$('img').dblclick(function(){
$(this).css('-webkit-transform' , 'rotate(0)');
$(this).css('-moz-transform' , 'rotate(0)');
});
});
Thats it !
Thanks for following this tutorial. I hope you liked it and could follow it step by step. If youve done everything correctly, you should have ended up with something likethis. If you have any problem or you need some help feel free to write your question or request into the comments section.
Photo manipulations canshow themaximum creativity and skillfromartist and software as well. There are no confines in photo manipulations -artists express their thoughts anyway they want though sometimes even huge companies collaborate with such skillful artists to express their thought in abstract and very loud way.
Retouching is very neccesary if youre a photographer. It can be pretty fun if you just want to try it out as well. In this article there are collected newest and best retouching tutorials from the web. Of course there are a lot more outside, but I believe you dont need them all. You can find anything here from the basic skin smoothening with gaussian blur to complex picture part extracting from background.
