jQuery Content Swapping Portfolio

Paul Bagosy — Sun, 13 Dec 2009 15:15:05 +0000

jQuery Swapping Portfolio

Here’s a demo of everything I’m about to discuss.

the musical stylings of Eerwyrm will revolt you.

Recently, a number of clients have asked for an complex dynamic image-gallery-like page for a few different applications like portfolios and staff directories. The CMS I work with allows me to build a complex page for the client to load up with content, but the front end is where all the magic happens.

The first of these sites featured an artistic design and required a portfolio for landscape projects, so I wanted to go with an elegant flowing effect. There are two primary element to this concept: the navigation and the content. The content itself can be further divided to images and text, both of which are important elements for this particular layout.

The navigation consits of two columns of thumbnails down the side (or wherever you need them – for this example they’re on the side). They live in a div that’s floated to the right. Here’s what that code looks like:

Each thumbnail is tied to a div which is given a different ID. (link_1, link_2, etc.). In the script, we bind each of those IDs to a click event:

	$('#link_1').bind('click', {id:'1'} ,clickHandler);
	$('#link_2').bind('click', {id:'2'} ,clickHandler);
	etc.

When anything in that div is clicked, it fires the click event, aptly named clickHandler:

	var clickHandler = function(link){
		$('.main').fadeOut().pause(250);
		$('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
		$('#main_' + link.data.id).pause(250).fadeIn("slow");
	}

Important safety tip: That pause() function is there to slow things down so fadeouts don’t cross:

	$.fn.pause = function(duration) {
	    $(this).animate({ dummy: 1 }, duration);
	    return this;
	};

Now, on the content side, it’s just a matter of stacking up DIVs with your content in them and giving each div a unique (and patterned with the same id structure as your thumbnail IDs) ID (main_1, main_2, etc.). Granted, if you’ve got a lot of data, you’re probably better off with a system to import it via AJAX, but for this instance, we’re going to cover a smaller data set.

So, we’ve got our sidebar:

And we have our content:

 
  Content div 1
  Content div 2

Now we just need a little styling on the content divs to hide them:

 .content_div { display:none; }

Then it’s just a matter of displaying your first div when the page loads:

	$(window).load(function(){
		$('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
		$('#main_1').pause(250).fadeIn("slow");
	});

The $(window).load call is important. You don’t want this to fire right on (document).ready if there are any images in your first div, because they will likely not be completely loaded and the code won’t know how big that div is going to be.

so, here’s the simple code:



 
  
  
  
  
  
 
 
  
   
   
  
  
   Content div 1
   Content div 2

Go-Live: Indian Valley Dental

Paul Bagosy — Wed, 25 Nov 2009 16:56:19 +0000

I’ve decided to start cataloging the sites that I’ve done recently, big or small. So, here we go:

Indian Valley Dental

Indian Valley Dental

What the client wanted:
This was a redesign of an existing CMS site that had a lot of Flash-based elements, including the navigation.

What I delivered:
The design kept the header flash from the old site, and I brought over the little Flash page title flourish.

I reworked the existing CMS to provide data is much more search-engine friendly and a lot more streamlined. The header navigation uses a CSS hover effect with a jQuery dropdown. The bottom navigation uses a quick server-side element to generate a style that underlines the page that you’re currently on, and the Contact Us page uses jQuery form validation and an AJAX spam-catcher.

The site is identical in IE 6, 7 and 8, Firefox 3, Chrome 3, Safari 4PB and Opera 10 (aside from a few form elements that resist styling).

Simple from the ground up, but that’s the way I like them.

Paul.Bagosy.Com » jQuery

jQuery Content Swapping Portfolio

Go-Live: Indian Valley Dental