Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

December 11, 2008

6 Comments

Portfolio Layout Idea Using jQuery

by in jQuery on December 11, 2008 @ 3:16 pm

The Inspiration

A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.

After digging around I came across thunderfuel’s website and was like “OMG, I must make that” and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.

Demo of the Portfolio idea

The HTML

As always, I am using a definition list:

  1. <dl id="portfolio">
  2.     <dt>
  3.         <img src="smallerImage.jpg" alt="cubes still life"  />
  4.         <a href=''>Domain.com</a>
  5.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  6.     </dt>
  7.  
  8.     <dd>
  9.         <h3><span>Project:</span> The Project </h3>
  10.         <h4><span>Client:</span> Acme </h4>
  11.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  12.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  13.         <img src="biggerImage.jpg" alt="cubes still life"  />
  14.  
  15.     </dd>
  16.     <!--  more piece adding up to an even number -->
  17. </dl>

The CSS

Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:

  1. #portfolio{position:relative;width:850px;height:450px;margin:0;padding:0;overflow:hidden;}
  2. #portfolio dd{position:absolute;left:250px;top:-455px;width:330px;height:430px;margin:0;padding:0;background:#666600;padding:10px;}
  3. #portfolio dd h3{font:bold 15px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;}
  4. #portfolio dd h4{font:bold 13px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;margin-top:0;}
  5. #portfolio dd p{font:11px Geneva, Arial, Helvetica, sans-serif;}
  6. #portfolio dd img{display:block;margin:0 auto;border:3px solid #999999}
  7. .dt{width:240px;height:65px;background:#808040;font:11px Geneva, Arial, Helvetica, sans-serif;padding:5px;margin:0;}
  8. .dt img{border:2px solid #fff;height:55px;width:55px;float:left;margin-right:5px;}
  9. .dt a{display:block;color:#fff;font:bold 13px Georgia, "Times New Roman", Times, serif;padding-bottom:5px;text-decoration:none;}
  10. .dt.left{position:absolute;left:0px;}
  11. .dt.right{position:absolute;right:0px;}

The JavaScript

I am using the the easing plugin in my example so be sure to grab that also:

  1. <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Here is the actual code being used:

  1. <script type="text/javascript">
  2.     $(document)
  3.     .ready(function(){
  4.         var hght = 0;
  5.         $('dt')
  6.             .addClass('dt')
  7.             .each(function(i){
  8.                 if( i % 2 ){
  9.                     $(this).addClass('left').css('top',hght);
  10.                     hght += 75;
  11.                 }
  12.                 else{
  13.                     $(this).addClass('right').css('top',hght);
  14.                 }
  15.             })
  16.             .click(function(){
  17.                 if( $('#portfolio dd:animated').size() ) return false;
  18.                 var that = $(this);
  19.                 $('#portfolio dd.showing')
  20.                 .animate({top:-455}, 750, 'easeOutQuad', function(){
  21.                     $(this).removeClass('showing');
  22.                     that.next().animate({top:0}, 750, 'easeInQuad').addClass('showing');
  23.                 });
  24.             })
  25.             .eq(0)
  26.             .next()
  27.             .animate({top:0}, 750, 'easeInQuad').addClass('showing');
  28.     });
  29. </script>

Demo of the Portfolio idea

The Improvements

So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?

Be all mean, let me know what you come up with.

Update: Made a change to the easing methods to easeOutQuad and easeInQuad, should be less jarring.

back to beginning of this post back to skip to links
Tags: ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

6 Responses to “Portfolio Layout Idea Using jQuery”

That’s a pretty cool use of jquery. The bumping is a little heavy for me, but very cool concept and implementation!

@zac, I kinda agree and the beauty of the easing plugin is that you have ton of options to chose from.

Interesting use. I agree on a more fluid easing animation, but very interesting.

Made a change to the easing calls, hopefully its a little less jarring.

Quite a nice demo. I wonder though, a click on the images or text looks rather pleasing with the easing out and in. A click on the links (“Domain.com”) results in a jarring disappearing of the panel followed by the expected easing in.
Something to do with the link not being stopped from firing and thus reloading the page maybe?

@Angelo Sozzi that is something I did not think of, let me see if I can address that.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

65 queries. 0.363 seconds. Powered by WordPress visitor stats