Step 1: Create the Mark-up

Here I have created two columns - for navigation and output. For the sake of simplicity I use attribute rel for links to find corresponding image by id in output section.

<div id="gallery">
 <div id="gallery_nav">
  <a rel="img1" href="[removed];"><img src="iphone_1.png" /></a>
  <a rel="img2" href="[removed];"><img src="iphone_2.png" /></a>
  <a rel="img3" href="[removed];"><img src="iphone_3.png" /></a>
  <a rel="img4" href="[removed];"><img src="iphone_4.png" /></a>
 </div>
 
 <div id="gallery_output">
  <img id="img1" src="iphone_1b.jpg" />
  <img id="img2" src="iphone_2b.jpg" />
  <img id="img3" src="iphone_3b.jpg" />
  <img id="img4" src="iphone_4b.jpg" />
 </div>
 
 <div class="clear"></div>
</div>

Step 2: Quick CSS

The CSS is pretty simple, too. You may wonder why output images have property display: block;. Well, at my first attempt I did try to use display: none;. As result - slideUp and slideDown animations were flickering. After some experimenting I found that best solution is to set them as block elements. That did the trick and now animations are smooth.

#gallery img {
 border: none;
}
 
#gallery_nav {
 float: left;
 width: 150px;
 text-align: center;
}
 
#gallery_output {
 float: left;
 width: 600px;
 height: 550px;
 overflow: hidden;
}
 
#gallery_output img {
 display: block;
 margin: 20px auto 0 auto;
}

Step 3: Simple jQuery

The jQuery is pretty much straight forward. First we hide all output images except first one. When user clicks on navigation links, we check if its referring image is hidden. If it is true, we proceed animations.

$(document).ready(function() {
 $("#gallery_output img").not(":first").hide();
 
 $("#gallery a").click(function() {
  if ( $("#" + this.rel).is(":hidden") ) {
   $("#gallery_output img").slideUp();
   $("#" + this.rel).slideDown();
  }
 });
});