jQuery: portfolio gallery

In this post I'll show you how to create a dynamic portfolio gallery with jQuery. Imagine that you want to display a gallery with all the previews of the web sites you have worked on with the addition of an overlay effect when you hover a site preview. If you have a preview generator on your web site, you can use it very easily. In my example I'll use several iframe elements to mimic such a service, because I do not have a preview generator. sad. However, the techniques explained here fit beautifully also to other use cases. Let's get started now.

The first thing is our markup structure. The base version is as follows:

<div id="portfolio">

<iframe/>

<!--other previews-->

</div>

We want to turn the above structure into this one:

<div id="portfolio">

  <div class="preview">
  
    <div class="overlay">
    
     <a href="...">View site</a>
    
    </div>
    
    <iframe/>
  
  
  </div>
  
  <!--other previews-->


</div>

Our CSS rules are pretty simple:

body {
 margin: 0;
 padding: 2em 0;
 font: 76% 'Lucida Grande', Verdana, sans-serif;
}

#portfolio {

  padding: 2em 0 2em 3.5em;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  height: 100%;
  background: #333;
  border-radius: 10px;
  


}

div.preview {
 width: 32%;
 margin: 0 5px 0 0;
 float: left;
 height: 300px;
 position: relative;
 
}

div.preview iframe {

  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  padding: 0;

}

div.overlay {
 position: absolute;
 width: 100%;
 height: 0px;
 overflow: hidden;
 top: 0;
 left: 0;
 background: #333;
 line-height: 300px;
}

div.overlay a {
 width: 100%;
 height: 100%;
 display: block;
 text-align: center;
 font-size: 1.6em;
 font-weight: bold;
 text-decoration: none;
 color: #fff;
 text-transform: uppercase;
}

The height of our overlay element has been zeroed and its overflowing content hidden so that it won't appear when the portfolio gallery loads.

The first thing we have to do with jQuery is to remove the borders and scrollbars from the iframes:

$('iframe', '#portfolio').attr({
   frameborder: '0',
   scrolling: 'no',
   width: '400',
   height: '300'
});

Then we generate our final markup structure:

 $('iframe', '#portfolio').each(function() {
  
  
    $(this).wrap('<div class="preview"></div>');
  
  
  });
  
  $('div.preview', '#portfolio').each(function() {
  
    var $preview = $(this);
    var $iframe = $preview.find('iframe');
    var href = $iframe.attr('src');
    
    $('<div class="overlay"/>').
    html('<a href="' + href + '">View site</a>').
    css('opacity', '0.8').
    insertBefore($iframe);
  
  
  });

When our overlay slides down, we want to add a bouncing animation on it, so we'll use the jQuery Easing plugin:

$('div.preview', '#portfolio').each(function() {
  
    var $preview = $(this);
    var $overlay = $preview.find('div.overlay');
    
    $preview.hover(function() {
    
      $overlay.stop(true, true).
      animate({
        height: 300
      }, 'slow', 'easeOutBounce');
    
    
    }, function() {
    
    
      $overlay.stop(true, true).
      animate({
        height: 0
      }, 'slow', 'easeOutBounce');

    
    
    
    });
  
  
  
  });

You can see the demo below.

Demo

Live demo