Please note that you will need to know some HTML / CSS and a little Javascript scripting to follow. Ready to get started? Let’s begin:

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#tabs {
	border:1px solid #ccc; 
	height:28px; 
	background:#eff5f9; 
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}
#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right:5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
	font-weight:bold; 
	color:#000000; 
	padding:7px 14px 6px 12px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

1
2
3
4
5
6
7

.container{ 
	clear:both; 	 	 
	padding:10px 0px; 
	width:664px; 
	background-color:#fff; 
	text-align:left; 	 
}

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

1
2
3
4
5
6

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {	
    //our script goes here...
});
</script>

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

1
2

$('#tabs li a:not(:first)').addClass('inactive');
$('.container:not(:first)').hide();

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

1
2
3
4
5
6
7
8

$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');		
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1″. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.

Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

1
2
3
4
5
6

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');		 
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');	
}

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

This tutorial will walk you through how to create full page background images that rotate like a slideshow. We will be using CSS and jQuery – particularly the nifty cycle plugin. Ready to get started? Let’s begin:

The HTML Markup:

First we create the background images. Place them in your root folder, in a directory called “images”. We wrap them around a special DIV which houses all the images. We need this DIV so we can target it from our script later:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="slideshow">
<img src="/images/b1.jpg" class="bgM"/>
<img src="/images/b2.jpg" class="bgM"/>
<img src="/images/b3.jpg" class="bgM"/>
<img src="/images/b4.jpg" class="bgM"/>
<img src="/images/b5.jpg" class="bgM"/>
<img src="/images/b6.jpg" class="bgM"/>
<img src="/images/b7.jpg" class="bgM"/>
</div>
<div id="wrap">
...your content here
</div>

Make sure your image is a good sized horizontal shot. For almost all screen resolutions have wider width vs height. Our images will scale to the width of the screen. The DIV id=”wrap” is the container for your content. This is directly underneath our slideshow container. Save your HTML and view it in the browser. You should see a series of images on top of each other.

The CSS

Add this code to your page. This will set the images width to span the entire page.

1
2
3
4
5
6
7
8
9
10

#slideshow, img.bgM {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

View Refresh your page. You should see only the first image. The rest of the images are tucked away underneath the first one. This is what “z-index” and “position” properties in our code did. Now for the slideshow effect, we use some jQuery magic.

The jQuery

Download the jQuery Cycle plugin from here, and place it inside a directory called “scripts” in your root folder. Add the jQuery library and a reference to the plugin inside the head section of your HTML:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>

Then add this code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
				$('#slideshow').cycle({
				fx: 'fade',
				pager: '#smallnav', 
				pause:   1, 
				speed: 1800,
				timeout:  3500 
			});			
		});

You can choose to edit the plugin options by tweaking the above code. For the list of available options such as transition effects, timing and callbacks – refer to the jQuery Cycle docs.

Conclusion:

Now refresh your browser and you should see your background fade into the next image and to another. Like I said, this style can be quite refreshing – to vary your page from a million other websites out there with large image backgrounds. The only problem with this is when browser is resized, the image stays in the original size and doesn’t resize on the fly. Maybe one of you guys can improve the image handling with javascript or something.

Bonus Tip: for added functionality, you can add individual links to the background images by wrapping each image into an anchor tag:

1
2
3
4

<div id="slideshow">
<a href="http://yahoo.com"><img src="images/b1.jpg" </a>
<img src="images/b3.jpg" class="bgM"/>
class="bgM"/></a>

This is especially useful if you’re using your background as advertising space of some sort (hint hint).

So go on and try it out for yourself. Please leave me a comment below if you have suggestions on how to improve the code, show off your stuff, or simply say hello.

To view a demo of what we’re building – click on a download link in my freebies section.

An opt-in box is definitely a move forward. It is simple and effective. Of course, we will make it so that it is as “non-intrusive” as possible. Ready to get started? Let’s begin.

Set up the Lightbox

For our opt in box, there’s nothing more graceful than to add a lightbox effect. I picked up this code from CSS Jockey – which was as simple as you can get.

The markup will contain 2 components – the dark overlay for the rest of your page content (hereby called #darkbg), and the actual opt in box (called #lightbox-panel).

1
2
3
4
5
6
7
8

<div id="darkbg"> </div> 
 
<div id="lightbox-panel">
<h3>This is our Opt in box</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
 
<a id="close" href="#">close</a>
</div>

Nothing really going on here, just a couple of DIVs with some content. View it in the browser to see what we have:

Next, we add some CSS to see what the box will look like after we’re done. Note that we’re adding this in the head section of our HTML just for demo purposes. In real code – you want to separate markup, scripts and styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
  #darkbg {  
     background:#000000;  
     opacity:0.7;  
     filter:alpha(opacity=70);  
     position:fixed;  
     top:0px;  
     left:0px;  
     min-width:100%;  
     min-height:100%;  
     z-index:1000;  
    }  
#lightbox-panel {  
     position:relative;  
     top:100px;  
     left:50%;  
     margin-left:-200px;  
     width:400px;  
     background:#FFFFFF;  
     padding:7px 15px 10px 15px;  
     border-radius:4px;
     z-index:1001;  
	 font-family:Arial, Helvetica, sans-serif;
	 box-shadow: 0 0 10px #000, 1px 1px 100px #c9c9c9 inset;
	 border:1px solid #fff;
	 text-shadow: 1px 1px 0 #fff;
    }
</style>

Now refresh your browser and see what the output is:

What a transformation huh?

Now let’s add “display:none” to both DIV elements in the style section – so that next time you load the page – you don’t see them.
After this step, we add Javascript to the page, so the DIVs can elegantly appear and disappear when we want it to.

1
2
3
4
5
6
7
8
9

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
	$("#darkbg, #lightbox-panel").fadeIn(300);
	$("a#close").click(function(){
		$("#darkbg, #lightbox-panel").fadeOut(300);
		})
	})
</script>

The above code is linking to the jQuery library from the jQuery website. The next set of codes does the following when the document (webpage) is ready:

• Fade in both DIVs in 300 milliseconds
• When the anchor tag with the id of “close” is clicked, fade out both DIVs in 300 milliseconds

Refresh your browser and you should see the DIVs fade in. Click the “Close” link and it will fade out.

Now we can play with how our Opt in Box enters the page.

Entrance Effects:

1) From the Side:

Right now, our Opt in box fades in – which is already a good enough effect. But I’ve seen some websites that have their Opt in box come in from the side. Here’s how to do that:

In the style section – take out the left property in the #lightbox-panel section: left:50%;

We’ll add this effect through Javascript like so:

1
2
3

$("#lightbox-panel").fadeIn(50).animate({				 
	left: '50%' 					 
  })

In the first line of code – make sure you delete the lightbox-panel from the selectors so it doesn’t fade in at the same time as the darkbg.
Now refresh your browser and see the effect.

2) From the Top:

If you want your box to come from the top – go in the styles section of #lightbox-panel and delete this line of code: top:100px;

Add this in replacement of it – *Note you may need to adjust this value depending on the size of your box. The taller the box – the larger the negative value is: margin-top:-400px;.

Now in the script section – add this code after the first fadeIn function:

1
2
3

$("#lightbox-panel").fadeIn(50).animate({				 
	top: '500px' 
})

Refresh your browser and you should see a nice top down effect.

Content:

Now although this section is entirely up to you, I did write up what I did for my own Opt in box. See, Opt in boxes are designed to engage your users in one form of activity for marketing purposes. May it be to take a survey, fill out a form (which I have a tutorial on), or simply click on a set of links that lead to your Twitter or Facebook accounts etc.

I wanted only to target the people who download my free stuff – right before they download. So I need a way to capture the click events that lead to specific file type – in my case: all zip files.

This is how my code looks:

1
2
3
4
5
6

$("a[href$='.zip']:not(#real)").click(function(){
	$("#darkbg, #lightbox-panel").fadeIn(300);			
		var thelink = $(this).attr('href');			
		$('a#real').attr('href', thelink).html(thelink);				
	return false;
	})

Instead of simply activating the box right away – I wrap in around a click event. But not just any click – you notice the line a[href$='.zip']:not(#real) – that’s called a selector. This means that all files with the .zip extension – unless if it has an id of “real” (I’ll explain later).

The next line $("#darkbg, #lightbox-panel").fadeIn(300); activates our box. Notice that we’ve created a variable called “thelink”. This variable is whatever value the “href” attribute of the link that you clicked. We need this value to transfer to a link onto our Opt in box itself. Sort of a “go between” between links.

$('a#real').attr('href', thelink).html(thelink);

The above code assigns a new “href” to a link with the id of “real” (from above) – which is in our markup in the actual Opt in box itself:

<p>Here is the file: <a href="" id="real"></a></p>

Finally, I add a line in the click event of our closing link:

1
2
3
4

$("a#close-panel").click(function(){
	$("#darkbg, #lightbox-panel").fadeOut(300);
	$('a#real').attr('href', '').html('');		
})

This $('a#real').attr('href', '').html(''); makes sure that our anchor with id “real” is empty again for next use.

Conclusion:

There you go. We have just created a simple, yet elegant Opt in Box. As I’ve mentioned, to add a contact form in PHP – check out my older post (see the section “Completing the Contact Form with PHP”). Also, for an email subscription form – there’s no better service than Google’s Feedburner. Once signed up – you can use the Email Subscription form they supply – which comes with verification and captcha mechanisms and such – all ready to go!

There is no download for this tutorial because I wanted you to follow the steps and understand the inner workings of the code. Also, if you notice the title “#1″, I’m going to try to write more tutorials such as this one (if you find it useful). So please leave a comment and let me know what you think.

Features:

• A Custom Slideshow – sits in the home page, automatically switches through four images. These images are post thumbnails from posts assigned to a specific category. In other words, the slideshow pulls 4 posts from a category named “featured”. You can change the category by editing “feature.php” – look for the variable $myCat .
• Two Widgetized Sidebars – Each sidebar has a width of 140 pixels – just enough to house small ad spots, text and general widgets .The sidebars also sit on the center of the page as you scroll down.
• Custom Gallery Styles with Lightbox – The default WordPress gallery style is overridden to match the rest of the theme. Lightbox effect is also applied to all links leading to an image.
• Built in Contact Form – no need to install a plugin for a simple contact form, its already in the theme. Simply apply the page template “Contact Form” into your page

The theme also supports the WP 3.0 menu system, gravatars and threaded comments. The thumbnails for each posts, including the images in the slideshow are pulled from the post thumbnails.

How to Use:

Installing the theme is just like any other WordPress theme. Simply go to the “Appearance” > “Install Themes” section in your admin panel. Click the “Upload” link – browse to the theme .zip file and “Install Now“.

Adding Post Thumbnails to your Posts:

To add images to your posts you can use the Post Thumbnail feature of WordPress. Simply go to the post in “Edit” mode. On the right side of the page – click on “Set Featured Image“:

This will trigger the image uploader. Upload your image and as soon as that’s done, click the “Use as Featured Image” link:

Note that you should keep the file sizes to a smaller size. The resizing script has a maximum size limit.

How to Activate the Slideshow:

The slideshow in the homepage pulls 4 posts from a category called “featured” (If you want to pull from a different category – see below). Simply go to “Categories” and one called “featured” – add 4 posts under it.

Visit your homepage and you should now see the slideshow area populated with the posts you just assigned to “Featured”. Now if you don’t see an image – that means you haven’t assigned a Post Thumbnail – so read the section above called “Adding Post Thumbnails to your Posts“.

*If you want to change the slideshow to pull from another category instead of “featured”, go to “Appearance” > “Editor” and click “feature.php” from the right side. In the editor – change the word “featured” into your category slug that you want (see below). Save your changes.

How to insert a Photo Gallery:

Adding a photo gallery into agency is as easy as pie. Simply go to the post / page you want in “Edit” mode and click on the image uploader. Navigate to your local directory and highlight the images you want and click “Open”.

As soon as the images upload, click on “Save Changes” and additional settings will show. Select your options and click “Insert Gallery”.

Update your post / page and preview it. You should see your gallery in place. The lightbox effect should also automatically pick up. All images that are linked to another image will trigger the lightbox effect in the Agency theme.

How to Customize the Navigation Menu:

Agency supports the WP Menu System which let’s you customize the links any way you want. Go to “Appearance” > “Menus” and start by creating a new menu. Enter a menu name and click “Create“.

This will create a blank menu panel in the right side of the page. The idea is to select categories, pages or custom links from the left side, click the “Add to Menu” button – and it will appear on the menu panel in the right. In this panel, you can drag and drop the links so you can design the menu hierarchy. Links that are staggered underneath become the drop down links from the respective parent – you get the drift.

Once the menu is done – hit “Save Menu” and in the top most left column box called “Theme Locations“, select the menu you just created from the drop down called “Header Menu”. Click “Save” and view your website. You menu should now be in place.

Credits:

The contact form code came from Trevor Davis – which works like a charm. The lightbox effect for the images are from No Margin for Errors. The Javascript for the floating sidebar is from a plugin called “stickyfloat“. Finally, the awesome model photos from the demo site are from my friend Jigs Tambong.

Conclusion:

Agency is ideal for high content blogs with multiple post categories. Some HTML and CSS knowledge is required to customize, as well as Photoshop for the graphic elements. On the same note, my recent theme “Lucky Guess” is now FREE!. Please follow me in Twitter, Facebook or leave your comments below:

You can purchase Agency from this link.

BTW, you have to check out BlogEx for a large collection of WordPress Themes!

Adding it to a WordPress theme has its benefits as well. For one, the code stays with the theme. Anyone who uses it gets this effect automatically. Not to mention, it’s pretty easy to implement.

This article will walk you through how to add Lightbox into your WordPress themes. I’m also going to assume that you have created WordPress themes before, for you will need to know how to work with template files and such. Ready to get started? Let’s begin.

Grab Pretty Photo

There are many lighbox plugins out there. I choose one called Prettyphoto from no-margin-for-errors.com. Prettyphoto uses jQuery, and is quite extensible. But the main reasons why I chose it is because the animation is flawless and the design is awesome. Download the production version from this link

Extract the .zip file into your hard drive. Inside prettyPhoto_compressed_3.1.2 – you will find the following folders and files. Copy them according to below:

• prettyPhoto folder (from prettyPhoto_compressed_3.1.2\images) and place inside (yourtheme\images\)
• prettyPhoto.css (from prettyPhoto_compressed_3.1.2\css) and place inside your theme root folder
• jquery.prettyPhoto.js (from prettyPhoto_compressed_3.1.2\js) and place inside (yourtheme\scripts\)

Include the Scripts

First we need jQuery. There is a preferred way to include jQuery into our themes – that is to use the wp_enqueue_script function. Open functions.php and add the code below. *If your theme doesn’t have a functions.php file – go ahead and create one.

1
2
3
4

function insert_jquery(){
	wp_enqueue_script('jquery');
}
add_action('init', 'insert_jquery');

Note that this is the preferred way because since WordPress is already shipped with a bunch of scripts (including jQuery) – you might as well use them. It is also considered good practice because updating Worpdress will include these javascript libraries (and how often do you do that!)

Add the Prettyphoto script and css into your theme header.php file:

1
2

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>

Custom Code

Modify the code in prettyPhoto.css. This step is necessary so the path to the images for prettyPhoto is corrected according to your setup:

• open prettyPhoto.css
• CTRL + F (Find) all instances of “url(../”
• And replace with “url(” *There should be around 100 occurences
• Save the file

Again, this is due to the location of the images and the css file has changed from the example files from prettyPhoto. This ensures the images needed for our lightbox is functioning properly:

Open header.php – and add the following code:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">  
jQuery(document).ready(function($) {
   $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
	animationSpeed: 'normal', /* fast/slow/normal */
	padding: 40, /* padding for each side of the picture */
        opacity: 0.35, /* Value betwee 0 and 1 */
	showTitle: true /* true/false */			
	});
})
</script>

What the above code does is selecting all links with the href attribute that equals to anything ending in .jpeg, .jpg, .gif and .png, and applying the prettyPhoto() function to it. This means that any link tag that leads to an image (file extensions mentioned) will trigger prettyPhoto. The script is also enclosed inside a document ready event using a jQuery noConflict wrapper. This is to prevent any compatibility issues with other javascript libraries that maybe included with your theme.

I also went ahead and added some options such as the animation speed, padding and show title to our .prettyPhoto function. For additional customization options – refer to the no-margin-for-errors documentation.

Conclusion

If all goes well – you can test your work by clicking on an image that links to another image. This should launch the prettyPhoto code that we’ve just plugged in. You can also apply the same code to links with inline content, external files, youtube movies or other flash based content. Again, refer to prettyPhoto documentation.

First, take a look of what we’re making:

Ready to get started? Let’s begin:

Set up the Environment:

In order for our PHP scripts to run, you need to have a web server. A good example is XAMPP, which is free and can be downloaded from http://www.apachefriends.org/en/xampp.html. Create a root folder – name it anything, and inside it, create the following folders:

• Images – this is where the image of the gallery will go.
• Scripts – this is where our scripts will go

Download Timthumb script: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/. Timthumb is an image resizer script that is written in PHP. Save timthumb.php inside scripts.

Let’s create a new HMTL file inside the root, name it index.php. Add this line of code:

1
2
3
4

<?php 
$path =  'http://' . $_SERVER['SERVER_NAME'] . '/root/images/'; 
$files = scandir('images/'); 
?>

The above code creates 2 variables:

• $path – is the full image path of our images
• $files – is an array of filenames from a specified folder that we’ve scanned through the scandir() function

Then add the code below:

1
2
3
4

<?php foreach ($files as $file){ ?>
<li ><a href="<?php echo $path . $file; ?>"><img src="scripts/timthumb.php?src=<?php echo $path . $file; ?>&h=134&w=264&zc=1&q=100" /></a></li>
<?php }?>
</ul>

This loops through each item in the array $files – and assign it to another variable $file. For each one found, we’re printing a list item with an anchor and image tags. Within these tags you’ll notice the variables we’ve created earlier. The timthumb script is inserted at the beginning of the src attribute of our thumbnails. The width and the height parameters are hard coded in there as well. Note that we are going to randomize this section a little bit later.

Assuming that you already have photos in your image folder – fire up your web browser and navigate to index.php. You should have something like the screenshot below:

As you can see – we’re swiftly on our way. Our thumbnails are resizing right. Once clicked, the larger image appears. Though there are mysterious images that are returning empty (file name is shows as “.” and “..”). This may not be the case with yours – but with me, I just decided to fix this by wrapping our list items inside an ‘if – else’ statement:

1
2
3
4
5
6
7
8
9

<ul>
<?php foreach ($files as $file){ 
	if ($file == '.' || $file == '..'){ 
		echo ''; 
	} else {
?>
<li ><a href="<?php echo $path . $file; ?>"><img src="scripts/timthumb.php?src=<?php echo $path . $file; ?>&h=194&w=224&zc=1&q=100" /></a></li>
<?php } }?>
</ul>

Now we move on to the Fancy Box script:

Add Fancy Box

I almost always use jQuery for all my projects. It is one of the most versatile and powerful javascript libraries to date. Download the latest version from http://jquery.com/ and include it in your document:

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

Download the Fancybox files from http://fancybox.net/. Once again, include the script right under the jQuery one. Note that Fancy box comes with its own image folder and css file. You need to include that css as well:

1
2

<script type="text/javascript" src="scripts/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.1.css" />

Now let’s add a “rel” attribute to our anchor tag, with a value of “lightbox”. This makes it easier for our script to target which elements to add an effect on.

<a href="<?php echo $path . $file; ?> rel=”lightbox” ">…

Finally, create a new script tag and add our line of code:

1
2
3
4
5
6

$(document).ready(function(){
	$("a[rel=lightbox]").fancybox({
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic'		
	});
});

The above code states that when the document is ready – grab all the anchor tags with an attribute value of “lightbox” and hook it up with the fancybox function. I’ve chosen the effect ‘Elastic’ for the transitions – you can replace this with your own liking.

Now go back to the browser and hit F5 to refresh. Click on a thumbnail – you should see Fancy Box in action with smooth and eye popping animation added to your photo gallery.

Next up – some styling with CSS.

Pretty ‘er up.

Now it is always good practice to separate your formatting and markup. Create a new file named style.css, go back to index.php and link the stylesheet as follows:

<link rel="stylesheet" type="text/css" href="style.css"  />

In the last screenshot you notice that I marked the little buttons. That’s because of two things – if you’ve configured Fancybox correctly – those icons should be visible. The other thing is, I’ve created an icon that is very identical to those of Fancybox’s – and we’ll include in our thumbnails. Take a look at the couple of images below:

These images (available in the download) I’ve saved inside the root folder. In your style.css – add these lines of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body {
	background:url(bg.jpg);
	}
ul li {
	list-style:none; 
	float:left; 
	position:relative; 
	}
ul li a img {
	border:0;
	padding:10px 10px 9px 10px; 
	background:#ffffff; 
	margin-bottom:20px;
	margin-left:24px;
	}

The code above adds a nice texture to our gallery background. Next, it floats each item to the left – aligning them all side by side. Then it adds a nice white background to each image, along with proper paddings and margins:

Remember our custom script tag just above our closing head tag? – add, this line of code just in between the $(document).ready() function:

$("ul li").append('<span></span>');

This will insert an empty span tag inside each of our list items (this is for the small magnifying glass icon). If you’re thinking – why not just add an inline span tag in our “for each” loop inside index.php – that’s an excellent question. This is because for users without javascript enabled – they won’t see this magnifying button.

Add these lines of code inside our style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ul li span {
	background:url(magnify.png); 
	width:27px; 
	height:26px; 
	position:absolute; 
	left:290px; 
	top:-3px; 
	}
ul li img {
	box-shadow: 0 0 7px #807a72; 
	-moz-box-shadow: 0 0 7px #807a72; 
	-webkit-box-shadow: 0 0 7px #807a72;
	border-radius:4px; 
	-moz-border-radius:4px; 
	-webkit-border-radius:4px;
}

The above styles adds the subtle details that will make our thumbnails beautiful. This includes – of course our magnify.png, CSS3 box shadows (box-shadow) and rounded corners (border-radius).

Our gallery looks really good so far, but not good enough. Let’s add some embellishments.

Randomize the Images and Orientation:

Let’s make the thumbnail images be mixed orientation – some tall and some wide. Remember our thumbnail dimensions declared right after the timthumb script? All we need to do is switch the height and width values. So let’s create a PHP function. Append this code on top of index.php (right before the html tag):

1
2
3
4
5
6
7
8
9

<?php 
	function random_orientation(){		
		$orientation = array('&h=194&w=224', '&h=224&w=194' );
		shuffle($orientation);
		foreach($orientation as $o){
			return $o;
		}		
	};
?>

The code above randomizes the two strings (‘&h=194&w=224‘ and ‘&h=224&w=194’). Then we call this function where our image tag is:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; <?php echo random_orientation();?>&zc=1&q=100" />

Now our thumbnails have different orientation each time we refresh. But as you can see, we need to fix the float – some thumbnails get stuck where portrait ends. We also need to fix the magnify icon positioning.

We need a way to tell what the current thumbnail orientation is, and somehow apply a class to that specific list item. This way we can fix the padding and margins accordingly. Add this line of code inside our “else” statement:

1
2
3
4
5
6
7

<?php foreach ($files as $file){ 
	if ($file == '.' || $file == '..'){ 
		echo ''; 
	} else {	
	//this is the new code to be added:
	$current_o = random_orientation();		
?>

This grabs the current orientation and assigns it to a variable. Now, inside our li tag – paste this line of code:

1
2
3
4
5

<?php 	
	if ($current_o == '&h=224&w=194'){
		echo 'class="tall"';
	}
?>

This adds a class name of “tall” for each list item – if the $current_o variable equals to the portrait dimension. We also need to replace our image thumbnail script:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; <?php echo random_orientation();?>&zc=1&q=100" />

to this new code:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; ?><?php echo $current_o;?>&zc=1&q=100" />

Refresh your browser and if we inspect our code – you should see list items with a class of “tall” for images that have 224 x 194 dimensions:

Also, add these lines of code to our style.css file:

1
2
3
4
5

ul li {height:250px; width:250px; margin:8px;}
ul li img {margin:15px 0 0 0;}
ul li.tall img{margin:0 0 0 15px;}
ul li span {left:222px; top:8px;}
ul li.tall span {left:210px; top:-6px;}

The above code overrides the default styling for the list items.
Note that you also have to delete some previous styling for our list items (see the comments in the download). If you’re following this tutorial – I apologize for the replacements. As you see, I’m developing this as I go.

Lastly, add this code inside index.php:

1
2
3
4
5
6

<?php 
$path =  'http://' . $_SERVER['SERVER_NAME'] . '/root/images/';
$files = scandir('images/'); 
//this is the new code:
shuffle ($files);
?>

This will randomize the images. So now we’ve fixed the list items, magnify icon – as well as randomized the images:

Final Touches:

So our gallery is so done. Except I like to add those final details that make it really good. Let’s add a pre-loader image. This is when you see a “loading” message for each thumbnail before they appear. To do this, we go back to jQuery. Inside our document ready event, add this line of code:

$('img, span').hide().animate({opacity: 1.0}, 3000).fadeIn('slow');

The above code delays our images just a tad bit – just enough to see a preloader image. Save your “loading.png” image in the root directory. In your styles.css, add these lines of code:

1
2
3
4

ul li {
background:url(loading.png) no-repeat;
background-position:100px 100px;
}

This just sets a background image to our list items. So next time you load the page – you should see our preloaders:

Finally, download the fancy box mousewheel.js pack inside your scripts folder and include in your document:

<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.2.pack.js"></script>

You should now be able to view next and previous images once you scroll your mouse wheel.

Conclusion:

Well now, I think our gallery is ready for prime time. The good thing about this is you never have to re-size a thumbnail again. All you need to do is add the large image inside the “images” folder and presto! Another good thing is that your gallery doesn’t look the same all the time. With our randomized order and orientation, the gallery looks fresh at each refresh. So go ahead and grab the download files. Play around with it – and maybe even improve the code. Be sure to include your comments below:

The Goal:

We will use clean markup. We’re trying to integrate this into exsting HTML – so we will be generating all extra classes and tags using Javascript. I imagine most web documents follow the same constant pattern: Heading tags, followed by some content which are a mixture of different DIVS, paragraphs, images etc. This goes on until the next heading tag – which is usually the same type as the first heading.

Look at the sample mark up below:

1
2
3
4
5
6

<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
        <!--content in here-->

We will use the H5 tags as our “Clicker” – once clicked, will hide the contents right underneath it. Click it again, and it will show the contents again.

The Script:

We start by calling the jQuery library, followed by the document.ready() call:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
 
               <!--script goes here-->
 
});
</script>

We then loop through each of our particular heading tag (in this case, all of H5). Once it finds all of them, it checks to see if right next to it is another H5 tag; if it’s not, it adds a class of “clicker” to it and appends a span with a minus (-) sign in it:

1
2
3
4
5

$("h5").each(function(e){
	if(!($(this).next().is("h5"))){				
	    $(this).addClass("clicker").append('<span>-</span>');				
	}					
});

If you investigate your code so far – you will see that only the H5 tags that have content OTHER than H5 tags have the class “clicker” and the span tag with a minus (-) sign in it:

Now let’s code the click events:

1
2
3
4
5
6
7
8
9

$("h5.clicker").toggle(
		function(){			
			$(this).nextUntil("h5").slideUp('slow');
			$(this).find('span').html('+');	
			},
		function(){  
			$(this).nextUntil("h5").slideDown('fast');
			$(this).find('span').html('-');	
		})

Now that we have our designated clickers, we create a couple of functions that toggle at every click.

The first action, hides the contents below “$(this)” – which is the tag you just clicked. Remember – we only want to hide the contents up until the next H5 tag. It also changes the content of the span into a plus (+) symbol.

The second action shows the contents below, and changes the span to a minus (-) symbol.

Optional Styling:

At this point you already have a functional accordion. If you’re applying the code to an existing page, you are already working with the current styles. Although, using CSS3 for say the plus (+) and minus (-) span looks pretty cool – which I’m sure you’d want to use.

Add this code to your styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#wrap h5 span, #wrap h5 span:visited {
	background: #2daebf url(alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 1px 9px 2px 9px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	float:right;
	font-family:Arial, Helvetica, sans-serif; font-weight:bold;
	*top: -47px; /*ie 7*/
}
 
#wrap h5 span:hover{ background-color: #007d9a; color: #fff; }
#wrap h5 span:active{ top: 1px; }
#wrap h5 span, #wrap h5 span:visited { font-size: 23px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  }

Of course you have to replace the #wrap h5 with your own class / ids. This creates the css3 button you see in the demo. This code is courtesy of Zurb’s Super Awesome buttons with CSS3 and RGBA:

Conclusion

And that is it! You have yourself an accordion page powered by jQuery. Feel free to grab this code and improve it. Maybe refactor it into a more plugin like code – make it more reusable. Or even – fix the choppiness issue in the slideUp / slideDown animation in certain browsers. In any case, please leave a comment on what you think of this code.

You might also be interested in these articles regarding jQuery accordions:

• Simple Accordion w/ CSS and jQuery
• Exactly How to Create a Custom jQuery Accordion
• Grid Accordion with jQuery

Below is a screenshot of Rotary’s glorious homepage. The roundabout carousel sits right on the fold – with images that are pulled straight from your post thumbnails. Click to view the Rotary Demo page:

Custom Post Type

You like that carousel / slider in the home page? Well that is due to the amazing code known as the roundabout by Fred LeBlanc. You can easily change the contents of this carousel in two ways:

1) Using a custom post type

In the left hand side of the admin area you will notice a section called “Roundabouts”. Simply add a new roundabout and give it a title, some content and attach a “feature image”.

The images are automatically resized to the right dimensions. Also – you’re only allowed up to 5 roundabouts.

2) Change the static code

If you decide you don’t want to use the custom post type feature – you can simply change the HTML. Inside home.php you will see an unordered list with each item as follows:

1

<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/586x360.jpg" alt="Need Image Here" /></a><div class="hiddendesc">Need to Enter Image</div></li>

Simply replace the values of your images, title and link and you’re set to go.

The Navigation Menu

This by far is my favorite 3.0 feature – custom menus. It’s simply amazing. I’ve added the code to Rotary that lets you design the main navigation of the theme.

Simply drag and drop items to the menu builder and save.

Feature Images

Just like the roundabout items – all posts in this theme can have its own feature image. Simply use the “Set feature Image” option for each post:

This image will show as thumbnails in the archive pages, and a medium photo inside the single page template:

Conclusion

Truly by using the features above – you can utilize the power of WordPress 3.0 as well as turn your blog into a cool CMS. Give Rotary a spin – it’s cool, it works and it’s only $10! Please leave your questions and comments below.

So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

Add the following code right above the closing head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Take a look at our markup:

1
2
3
4
5
6
7
8

<ul>
<li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li>
<li><img src="images/107023_5283.jpg" title="Cloudy Skies"  /></li>
<li><img src="images/1282015_12556521.jpg" title="Nice Horsy"  /></li>
<li><img src="images/1262387_19591724.jpg"  title="Grassy Meadows" /></li>
<li><img src="images/220121_3233.jpg" title="Jigsaw Pieces"  /></li>
<li><img src="images/1282209_96954111.jpg" title="Retro Groove"  /></li>
</ul>

Pretty clean right? Ok, now we start manipulating and styling with code:

Step 1: Wrapping Elements with jQuery

We are going to use jQuery to find all these images in a list item and check if it has a title attribute. If it does, it will wrap the image in a DIV with class name “wrapper”.

1
2
3
4
5
6
7

$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{								
				$(thumbs[i]).wrap('<div class="wrapper" />')

jQuery will also take the contents of the image’s title and place it inside another DIV called “caption” and place it inside wrapper, right after the image itself. Finally, let’s remove the title attribute from the image tag.

1
2
3
4
5
6

var imgtitle = thumbs[i].title;	
after('<div class=\'caption\'>' + imgtitle + '</div>').
				removeAttr('title');
 
			}					
		}

Now take a look at our mark up when the document loads:

1
2
3
4
5
6
7

<ul>
<li>
<div class=”wrapper”><img src="images/77335_4871.jpg" /></div>
<div class=”caption”> Autumn Leaves</a>
</li>
...
</ul>

Pretty slick right? Now let’s move forward.

Step 2: General Styling with CSS

Now that we have our DIVs in place, we can now set up the general styles with our stylesheet. What we’re trying to achieve is to hide the caption from a viewing area set on its containing DIV: wrapper.

Take a look at our stylesheet:

1
2

div.wrapper{width:218px; height:218px; overflow:hidden; position:relative;  }
div.caption {position:relative; text-align:center; padding:55px 15px}

Note that the wrapper dimensions are taken from how wide and tall the images are.

Step 3: Events and More Styling with jQuery

Now back to our script, all we need to do now is assign a couple of events to the hover method of our wrapper DIV. Thankfully, jQuery’s .hover() simplifies this action by letting us bind two handlers (in and out) all within the same context.

All we need to achieve is a way to slide the caption DIV upwards when we hover (maybe decrease the opacity of the image), then slide the DIV back downwards when we mouse out:

1
2
3
4
5
6
7
8
9
10

$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);

Notice that I also used the .animate() function for manipulating the CSS properties which renders all of our effects smoothly.

Optional Pretty Styling:

For demonstration purposes I’ve added pretty backgrounds, as well as font types to maximize the effect. Simply add a background to the DIV caption, and assign different font types and styles (check out Google Fonts).

There you have it. You have just created your own image hover effects using jQuery and CSS. You can download the source code from here, or view the live demo.

Please feel free to comment below on what you think of this tutorial.