Creating A Portfolio In WordPress With jQuery Tools Expose & Overlay

July 9, 2011 / Wordpress / by Paul Robinson / 10 Comments

This post was published back on July 9, 2011 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

I’ve had a few comments saying that you all love the new design, some in particular wondering how the new portfolio was achieved. Well I’m going to explain how. While I will give any CSS that is needed for the effect to work, I won’t be giving the CSS that makes up my portfolio. The designer won’t be very happy if I do.

First off, here is a screenshot of the portfolio in action, for those that haven’t seen it or for those people who (strangely) have Javascript disabled.

Return True Portfolio Screenshot

View Demo

The demo link will take you to the portfolio page here on Return True where you can check out the effect before we continue. Had a play around? Like it? Want to continue? Good.

jQuery Tools Expose & Overlay

Okay, first thing we need is to do is to grab these two excellent tools. The easiest thing to do is to include jQuery Tools from a CDN. jQuery is (nearly) always included in your WordPress theme so we’ll just grab jQuery Tools. It’s best practice to only include the library when you need it, just to save bandwidth. To do this we are going to decide the name of our portfolio page now. Unoriginally I’m going to choose ‘Portfolio’. So here is the code you would add in your header.php. It is very important it is placed before wp_head().

if( is_page( 'portfolio' ) )
    wp_enqueue_script('jTools', 'http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js', array('jquery'), '1.2.5');

1 2	if( is_page( 'portfolio' ) ) wp_enqueue_script('jTools', 'http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js', array('jquery'), '1.2.5');

This will ensure jQuery Tools is only loaded when we need it, saving us some bandwidth and making the page load a little faster.

Setting Up Portfolio Thumbnail

This part is optional depending on if you want a thumbnail for you portfolio items. Also if you already have posts you will have to go through them selecting a featured image for each one as this isn’t retroactive in any way.

If you would like a cropped thumbnail for each portfolio item, you will need to add this code to your theme’s functions.php.

if(function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails');
	add_image_size('portfolio-thumb', 280, 150, true);
}

if(function_exists('add_theme_support')) {

add_theme_support('post-thumbnails');

add_image_size('portfolio-thumb', 280, 150, true);

}

Replace the 280 & 150 by whatever width & height will fit your design/theme. The last setting is whether or not the image should be hard cropped. If you do not leave the option set the images will be cropped in proportion, but will cause your layout to be uneven.

Basic CSS

Before we get to the PHP & HTML let’s take a look at the basic CSS needed to make this code work.

/* the overlayed element */
.overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#F8F8F8;
	
	width:920px;
	padding:30px;
	min-height:200px;
	border:1px solid #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-o-border-radius: 10px;	 
}

/* close button positioned on upper right corner */
.overlay .close {
	background-image:url(images/layout/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}
.folio-o-image {
	float: left;
	width:510px;
}
.folio-o-content {
	float:right;
	width:360px;
}

/* the overlayed element */

.overlay {

/* must be initially hidden */

display:none;

/* place overlay on top of other elements */

z-index:10000;

/* styling */

background-color:#F8F8F8;

width:920px;

padding:30px;

min-height:200px;

border:1px solid #fff;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-o-border-radius: 10px;

}

/* close button positioned on upper right corner */

.overlay .close {

background-image:url(images/layout/close.png);

position:absolute;

right:-15px;

top:-15px;

cursor:pointer;

height:35px;

width:35px;

}

.folio-o-image {

float: left;

width:510px;

}

.folio-o-content {

float:right;

width:360px;

}

This is actually the CSS from my theme to give you an idea of what you can do. The only required rules are .overlay and .overlay .close. The close image is custom, but you can get one by using Google or make one.

Organizing The Loop

One of the things we need to do is organize our WordPress loop so it contains all the information needed by jQuery Tools Overlay. Let’s take a look at the code:

<!-- START PORTFOLIO POST PULL -->
<div class="portfolioPosts">
<?php 
$count = 1;	
query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9));
if (have_posts()) : while (have_posts()) : the_post();
?>
	<div class="portfolioPost<?php if ($count % 3 == 0) { ?> norightmargin<?php } ?>">
		<div class="portfolioImage">
			<a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>" rel="#folio<?php echo $count; ?>"><?php the_post_thumbnail('portfolio-thumb', array('class' => 'portfolio-thumb')); ?></a>
		</div>
		<div class="portfolioText">
			<h4><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>" rel="#folio<?php echo $count; ?>"><?php the_title(); ?></a></h4>
		</div>
	</div>
					
<!-- LOOP FOR OVERLAY -->
	<div id="folio<?php echo $count; ?>" class="overlay">
		<div class="folio-o-image">
			<?php the_post_thumbnail('large', array('class' => 'portfolio-thumb')); ?>
		</div>
		<div class="folio-o-content">
			<h2><?php the_title(); ?></h2>
			<?php the_content(); ?>
		</div>
	</div>
<!-- END LOOP FOR OVERLAY -->		
<?php $count++; endwhile; endif; ?>
<div class="clr"></div>
</div>
<!-- END PORTFOLIO POST PULL -->

<?php

$count = 1;

query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9));

if (have_posts()) : while (have_posts()) : the_post();

<div class="portfolioPost<?php if ($count % 3 == 0) { ?> norightmargin<?php } ?>">

<a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>" rel="#folio<?php echo $count; ?>"><?php the_post_thumbnail('portfolio-thumb', array('class' => 'portfolio-thumb')); ?></a>

</div>

<h4><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>" rel="#folio<?php echo $count; ?>"><?php the_title(); ?></a></h4>

</div>

<div id="folio<?php echo $count; ?>" class="overlay">

<?php the_post_thumbnail('large', array('class' => 'portfolio-thumb')); ?>

</div>

<?php the_content(); ?>

</div>

<?php $count++; endwhile; endif; ?>

</div>

It does look complicated, but it is actually just some simple HTML, and a few standard WordPress functions. I’m not going to go through the HTML as yours will probably be different. I will however go through the PHP & any important HTML that can’t be missed out.

I’ve highlighted the important lines to help a little. Let’s go through them and see what each part does:

First lines 4-6. We set up a counter to help with the overlay. We make our query, I’m using a custom post type which we found out how to make yesterday, but you could use a category (‘category_name’) or tag (‘tag’). The last line is just the normal WordPress post loop.

Next line 8. This is just normal HTML, but it has a special bit of code to add a class which removes the margin from the right hand side when $count modulo 3 is equal to 0. That basically means when $count is divided by 3, is the remainder 0.

Line 10. This line just uses normal WordPress functions to output a link to the portfolio page, but we add a special rel attribute. This is for jQuery Tools Overlay to attach to. Each post must have a unique rel, so to do that we name them #folio and use the $count to add a number on the end. Finally we use the_post_thumbnail to grab the thumbnail size we created earlier.

Line 13. The same as line 10, this line also has the rel attribute so that it triggers the same action.

Line 18. Here we make the content that will appear in the overlay box. It must have an ID that matches the rel attributes from line 8 and 10, hence the use of $count. The class overlay makes sure it is hidden, but also displays correctly when it is triggered by jQuery Tools.

Line 20. This is the big image that will appear in the overlay. You may have created another thumbnail size earlier or you may want to load a WP default size like I have here.

Line 28. This closes the loop, but first we increment the $count variable so that the next post has a different number for it’s ID and rel attributes.

jQuery Tools Initialize

This might actually be the easiest part of this whole tutorial. The code to initialize the overlay & expose is actually very small. Again we only want this loaded when it’s needed so in your header.php, but this time after wp_head, add this.

<?php
if( is_page( 'portfolio' ) ) {
?>
<script type="text/javascript">
jQuery(function($) {
    $('a[rel^="#folio"]').overlay({ mask: '#999999' });
});
</script>
<?php
}
?>

<?php

if( is_page( 'portfolio' ) ) {

jQuery(function($) {

$('a[rel^="#folio"]').overlay({ mask: '#999999' });

});

</script>

<?php

}

All this simple little bit of code does is match all of the hyperlinks (a tags) on the page whose rel attributes start with ‘#folio’ and set them to trigger the overlay & the expose (mask), just change the hex color with one of your choice. Good, huh?

That’s All Folks

I hope this tutorial has been helpful. If you have any questions or I’ve missed something let me know & I’ll get them sorted as soon as I can.

Expose jQuery jQuery Tools Overlay Portfolio Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

10 Comments

Hey Paul, this is looks good. Is there any way to link from the outside to an open overlay? Thanks.

…should be “this looks good.” (sorry)

author

Do you mean having an external link trigger the overlay so it is open when you enter the site?

That’s a tricky one. I’m not sure. You could either give each hyperlink a unique ID or use the rel attribute given to help the portfolio work, and use something like the jQuery hashchange event plugin to detect when the hash changes. That way you could trigger the correct click event.

Unfortunately I’m not sure of the code off the top of my head. If you don’t need it for bookmarking purposes, say you just want to be able to send people to the correct overlay your code might be something like:

jQuery(function($) {
    $('a[rel^="#folio"]').overlay({ mask: '#999999' });
    var hash = location.hash;
    if(hash)
        $('a[rel^="'+hash+'"]').trigger('click');
});

jQuery(function($) {

$('a[rel^="#folio"]').overlay({ mask: '#999999' });

var hash = location.hash;

if(hash)

$('a[rel^="'+hash+'"]').trigger('click');

});

That should work provided the hash you added to the URL was the same as the rel attribute in the relevant hyperlink.

Like I said a hash based bookmarking system link some tab systems or sliders have would be much harder, but if you just want the ability to send people to the page and have an overlay open, that should work okay (I hope).

Hey Paul, yes that’s exactly what I meant. Thank you! I suppose not being able to bookmark each page is unfortunate, but I was just trying to get viewers from A to B. Thanks again as always.

author

No problem. Sorry I couldn’t be more specific with the bookmarking. It’s normally better to build the code to support the hash change event from the ground up, and I’m too busy with work to do it at the minute. I’m very sorry. 🙁

Hi Paul,

this is great. I have been enjoying your tutorials. Can you help to explain how to create pagination. I have been having a lot of difficulty. thanks

here is the code for my portfolio template

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
	<div id="content">
	<?php
	$count = 1;
query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9));
if (have_posts()) : while (have_posts()) : the_post();
?>
	<?php	
		$custom = get_post_custom($post->ID);
		$screenshot_url = $custom["screenshot_url"][0];
		$website_url = $custom["website_url"][0];
	?>
        <div id="outsideportbox">
        	<div class="qitem">
			<h1><?php the_title(); ?></h1>
			<a href="<?php the_permalink();?>"><?php the_post_thumbnail('portfolio'); ?> </a>
			<span class="caption">
			<?php the_content(); ?>
			</span>
			</div>
			<div id="portboxbot"></div>
		</div><!-- #outsideportbox -->
		
        <?php $count++; endwhile; endif; ?>
       
       
        </div><!-- #content -->
        
<?php get_footer(); ?>

<?php

Template Name: Portfolio

<?php get_header(); ?>

<?php

$count = 1;

query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9));

if (have_posts()) : while (have_posts()) : the_post();

<?php

$custom = get_post_custom($post->ID);

$screenshot_url = $custom["screenshot_url"][0];

$website_url = $custom["website_url"][0];

<?php the_content(); ?>

</span>

</div>

</div>

<?php $count++; endwhile; endif; ?>

</div>

<?php get_footer(); ?>

author

Hi Josh,

you should just need to add the paged variable into the post query.

So for example:

query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9, 'paged' => $paged));

1	query_posts(array('post_type' => 'portfolio', 'posts_per_page' => 9, 'paged' => $paged));

ohh man. I feel like a such a fool. 3 hours trying to figure this out. Do you offer tutorial help for hourly pay?

author

Don’t worry about it Josh, we all have those facepalm moments. 😉

I do work or offer help for pay. You can check out my hire me page for pricing on common jobs or if you need a custom quote you can email me via the hire me page. 🙂

Older Comments

Newer Comments

Creating A Portfolio In WordPress With jQuery Tools Expose & Overlay

jQuery Tools Expose & Overlay

Setting Up Portfolio Thumbnail

Basic CSS

Organizing The Loop

jQuery Tools Initialize

That’s All Folks

10 Comments

David

David

Paul Robinson

David

Paul Robinson

Josh

Josh

Paul Robinson

Josh

Paul Robinson

Leave a Reply Cancel reply

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.

jQuery Tools Expose & Overlay

Setting Up Portfolio Thumbnail

Basic CSS

Organizing The Loop

jQuery Tools Initialize

That’s All Folks

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.