A portfolio gallery using WordPress and JQuery

Technology Blog

We wanted our portfolio to be slick and individual so when we commissioned our new site design I asked the designer to create something specifically for it. She came up with something that looked great – all I had to do was to make it work. My tool of choice was JQuery, a powerful Javascript library that is packaged with WordPress.

We already had a portfolio page, which was presented in the usual blog style as a series of posts following each other down the page: adequate, but not really compelling. My idea was to use JQuery to rearrange the content and make it interactive. For each of the entries there would be a thumbnail which you would click on to show the corresponding content: only one entry would be shown at a time and all the other entries would be hidden.

JQuery is the ideal tool to deal with this sort of requirement. I was able to create a working script very quickly, and the final version is a mere 41 lines long, including comments. By virtue of some theming logic I shan’t cover here, the script is loaded only on the portfolio page. See the code in full.

I’ll walk through the code a little at a time so you can see how it works. First, some basic magic:

var $j = jQuery.noConflict();
$j(document).ready(function() {
...
});

This code assigns the JQuery library object to a variable $j for later use, then wraps all the remaining code in a function which is called automatically once the HTML document is loaded. This is the standard way to ensure all the DOM objects you want to manipulate are present before the code starts to run.

// add a helpful instruction for users
 $j('#p2c-header p:last').append(' Click on the thumbnails on the left to see more.');

This adds a sentence to the document to explain how to interact with the portfolio thumbnails. It’s done here so it only appears for users who have Javascript turned on. We want the portfolio page to be usable with or without Javascript. The selector string in the quote tells JQuery to apply the append instruction to the last paragraph within the element with ID “p2c-header”.

// create the gallery area
 $j('#archives').before('<div id="side-gallery"></div>');

This creates a new DIV element with an ID of “side-gallery” and inserts it before the one with ID “archives”, which is the list of posts. This new DIV will contain our thumbnails.

// for each entry, get an image and copy to the gallery
 $j('.content-item').each(function(i) {
...
};

This defines a new anonymous function which applies to each portfolio entry, which the theme code has output as an element of class “content-item”. As we’ll see this function does all the remaining work.

 var permalink = $j(this).find('h2 a').attr('href');
 $j(this).addClass('portfolio-content');
 var wrap = $j('<div></div>');
 var wrap2 = $j('<div><a href="'+permalink+'"></a></div>');
 var target = $j(this);
 $j(this).find('img').eq(0).
  prependTo(wrap2.find('a')).
  removeAttr('align').removeClass('alignright').
  removeAttr('style').
  clone().appendTo(wrap);
 $j(this).prepend(wrap2);
 $j('#side-gallery').append(wrap);

This first part of the function as listed above extracts the screenshot from the post, moves it above the article text and puts a copy of it in the side gallery.

// hide each one apart from the first
 if(i > 0) {
  $j(this).hide();
 }
 // on click show this item and hide the rest
 wrap.click(function() {
  $j('.content-item').hide();
  target.show();
 });

This second extract above hides the current post unless it is the first, then defines a click event handler function to show the current post when the thumbnail is clicked on.

 // get a blockquote if any and keep it
 var quote = $j(this).find('blockquote').eq(0).clone();
 // remove content after the first paragraph
 $j(this).find('p:first').append(' <a href="'+permalink+'">More&gt;</a>').
  nextAll().remove();
 if(quote.size() > 0) {
  var wrap3 = $j('<div></div>');
  wrap3.append(quote);
  $j(this).append(wrap3);
 }

This final extract does some further reformatting. It moves any testimonial quote there may be in the portfolio posting below the main text so it can be more conveniently displayed in a word balloon, and it also reduces the text to a single paragraph so it will fit better into the available space.

All that’s needed now is the CSS to lay out the generated HTML:

#side-gallery {
 overflow: hidden;
 width: 154px;
 float: left;
 margin-right: 5px;
}
#side-gallery .gallery-item {
 float: left;
 border: 1px solid #000;
 margin-right: 5px;
 margin-bottom: 5px;
 height: 70px;
 width: 70px;
 overflow: hidden;
 cursor: pointer;
}
.fullsize-item {
 border: 2px solid silver;
 text-align: center;
 margin-bottom: 20px;
 height: 200px;
 width: 356px;
 overflow: hidden;
}
.portfolio-content .readmore {
 font-size: 1.1em;
 font-weight: bold;
}
.portfolio-content .client-quote {
 clear: both;
 overflow: hidden;
}
.portfolio-content h2 {
 margin-top: 20px;
}

The side gallery is floated to the left of the post. Each thumbnail is styled to be 70 pixels square so only the top left corner of each screenshot appears in the side gallery. The screenshot that appears above the post is given a fixed height so the layout does not move when clicking between entries.

And that’s it: a neat interactive portfolio built using minimal code.

Got a WordPress problem? Figure W are experts in WordPress theme and module development. Contact us today.

One Response to “A portfolio gallery using WordPress and JQuery”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>