Design by Pelling

Archived Blog

Creating a Simple Image Portfolio with jQuery

Today we’ll be looking at creating a simple image portfolio page using HTML, CSS and jQuery. The aim of this tutorial is to provide a means by which you can familiarise yourself with jQuery so that hopefully you can apply it to your own projects.

First let’s take a look at the proposed design:

Jquery Image Gallery

The idea is that the images are presented on a grid. Upon hovering over a particular image, the information for that photograph is shown (e.g. top center photo) whilst the other images are darkened. This effect is very easy to achieve, and can be done using overlays.

We’ll be creating the grid using a list, each list item containing an image and 2 divs. One of these divs will act as the black overlay, whereas the other will be for the attribution with white background. The way these 3 elements will be layered is shown below:

Simple Jquery Image Portfolio

The HTML & CSS

Now that we’ve got a clear idea in our heads about what we’re trying to achieve, lets think about the HTML markup. When using javascript, it’s important to think about the usability of the website when the visitor has javascript disabled. Therefore we need to make sure that the links are accessible even without javascript, i.e. it needs to degrade gracefully.

So here’s the HTML code:

<ul id='portfolio'>
<li>
<img src='images/1.jpg' width='300' height='180' alt='' />
<p><a href='http://www.flickr.com/photos/dheuts/3804259707/'>Lonely leaf left alone</a> by <a href='http://www.flickr.com/photos/dheuts/'>Dave Heuts</a></p>
</li>
<li>
<img src='images/2.jpg' width='300' height='180' alt='' />
<p><a href='http://www.flickr.com/photos/sindykids/4014044638/'>Mom</a> by <a href='http://www.flickr.com/photos/sindykids/'>sⓘndy°</a></p>
</li>
<li>
<img src='images/3.jpg' width='300' height='180' alt='' />
<p><a href='http://www.flickr.com/photos/denemiles/3971887734/'>Reflections for the day</a> by <a href='http://www.flickr.com/photos/denemiles/'>Dene' Miles</a></p>
</li>
</ul>

And the CSS:

#portfolio li{
display: block;
float: left;
width: 300px;
}
.bg_fff,
.bg_000{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.bg_fff{
background: url(images/bg_fff.png) center repeat; /* white png with 80% opacity */
height: 40px;
line-height: 40px;
width: 290px;
padding-right: 10px;
text-align: right;
}
.bg_000{
background: url(images/bg_000.png) center repeat; /* black png with 80% opacity */
}

Please note that there are 2 classes in the above CSS which are not currently being used within the HTML, i.e. .bg_000 and .bg_fff. These are the CSS declarations for the 2 overlays, .bg_000 for the black overlay, and .bg_fff for the white one. These will be used later once we add JavaScript.

You should now have something along the lines of the screenshot below:

Jquery Image Portfolio

As you can see I added a little more HTML & CSS to my version to make it look a little more presentable, however the fundamental concept is the same. We can now add some JavaScript to animate the portfolio and make it look a little nicer.

As a side note, we know that it will degrade gracefully for visitors who have JavaScript disabled since we coded the portfolio without JavaScript first.

The JavaScript

The first thing we want to do is hide the image links, which can be achieved very easily by using the following code:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/'></script>
<script type='text/javascript'>
$(function(){
var list_item = $('#portfolio li');
list_item.find('p').hide();
});
</script>

The code above loads jQuery from the Google Library CDN. It then waits for the document to be ready, assigns #portfolio li to a variable, and then finds paragraphs within our portfolio and hides them.

The next thing we need to do is to add black and white overlays to each list item. The white overlay needs to contain the contents of the paragraph, i.e. the attribution. What we’ll therefore do is to cycle through the list items within the portfolio, prepend the 2 divs, and them move the attribution from the paragraph to the white overlay.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/'></script>
<script type='text/javascript'>
$(function(){
var list_item = $('#portfolio li');
list_item.find('p').hide();
list_item.each(function(){
$(this)
.prepend("<div class='bg_000'></div><div class='bg_fff'>"+$(this).find('p').html()+"</div>")
.find('p')
.remove();
});
});
</script>

Everything is now in place for us to add the animation. Now all we need to do is fade the divs in/out as needed.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
var list_item = $('#portfolio li');
list_item.find('p').hide();
list_item.each(function(){
$(this)
.prepend("<div class='bg_000'></div><div class='bg_fff'>"+$(this).find('p').html()+"</div>")
.find('p')
.remove();
});
list_item.hover(function(){
$(this).toggleClass('active');
$('.active .bg_fff, #portfolio li:not(.active) .bg_000').stop(true, false).fadeIn('fast');
}, function(){
$(this).toggleClass('active');
$('.bg_fff, .bg_000').stop(true, true).fadeOut('fast');
});
});
</script>

The hover() event handler is in 2 parts. The first section dictates what happens when a user’s mouse enters a list item, and the second when the user’s mouse leaves it. In both cases we will be toggling the .active class to help identify which list element is currently being hovered over.

When the mouse enters a list item, the .active class is added. We then fade in the white overlay .bg_fff for the active list item and the black overlay .bg_000 for the rest. Upon mouse leave we will just fade out all overlays.

You’ll notice that I’ve used a stop() function before animating the various elements. This is to prevent queueing of animations, which can cause undesirable results when a user mouse their mouse around before each animation has finished. If you’re interested in finding out more there’s a great article over at Learning jQuery.

And there you have it! Your very own image portfolio built with HTML, CSS and jQuery.

Want to hire us? We'd love to hear from you

Pelling have over 50 years combined experience designing and coding websites. We work with companies of all sizes, from one-man bands to multinational blue chip companies. We endeavour to provide high quality service, while maintaining a competitive price.

We pride ourselves in our level of customer service, which we believe is the main reason behind our high customer retention rates.

Contact us