jQuery: multidirectional gallery

In this post I will show you how to create a multidirectional image gallery with four arrow-shaped controls. Only the very first image will be visible by default. When a user clicks on a control, the corresponding image will be shown with a movement that takes one of the four cardinal points as origin. This example is all based on CSS absolute positioning within a context, so it's vital that you understand the CSS code before digging into the jQuery animations. First of all, let's start with our markup:

<div id="gallery">

 <img src="1.jpg" class="main" alt="" />
 <img src="2.jpg" class="top" alt="" />
 <img src="3.jpg" class="bottom" alt="" />
 <img src="4.jpg" class="left" alt="" />
 <img src="5.jpg" class="right" alt="" />
 
 <div id="nav">
 
   <a href="#" id="top">Top</a>
   <a href="#" id="bottom">Bottom</a>
   <a href="#" id="left">Left</a>
   <a href="#" id="right">Right</a>
 
 </div>

</div>

We need to dimension our gallery container so that it will be able to host our images, which are 200 x 150 pixels wide:

#gallery {
 width: 600px;
 height: 450px;
 position: relative;
 margin: 2em auto;
}

Then we center all our images and we stack them one on the top of the other:

#gallery img {
 display: block;
 width: 200px;
 height: 150px;
 position: absolute;
}

#gallery img.main {
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -75px;
 z-index: 10;
}

#gallery img.top,
#gallery img.bottom,
#gallery img.left,
#gallery img.right {
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -75px;
 z-index: 5;
}

Finally, we have to position our controls on the four edges of the main image, all vertically and horizontally centered:

#nav {
 width: 200px;
 height: 150px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -75px;
 z-index: 11;
}

#nav a {
 display: block;
 width: 31px;
 height: 31px;
 position: absolute;
 text-indent: -1000em;
}

#nav #top {
 top: 0;
 left: 50%;
 margin-left: -15px;
 background: url(top.png) no-repeat;
}

#nav #bottom {
 bottom: 0;
 left: 50%;
 margin-left: -15px;
 background: url(bottom.png) no-repeat;
}

#nav #left {
 top: 50%;
 left: 0;
 margin-top: -15px;
 background: url(left.png) no-repeat;
}

#nav #right {
 top: 50%;
 right: 0;
 margin-top: -15px;
 background: url(right.png) no-repeat;
}

With jQuery, all we need to do is to reset the default absolute positioning rules and margins of the four images plus creating our movement effect:

$(function() {

  $('#top', '#nav').click(function(event) {
  
    $('img.top', '#gallery').animate({
    
      marginTop: 0,
      top: - 30 
    }, 'slow');
  
    event.preventDefault();
  });
  
  $('#bottom', '#nav').click(function(event) {
  
    $('img.bottom', '#gallery').animate({
    
      marginTop: 0,
      top: 280 
    }, 'slow');
  
    event.preventDefault();
  });
  
  
  $('#left', '#nav').click(function(event) {
  
    $('img.left', '#gallery').animate({
    
      marginLeft: 0,
      left: 20 
    }, 'slow');
  
    event.preventDefault();
  });
  
  $('#right', '#nav').click(function(event) {
  
    $('img.right', '#gallery').animate({
    
      marginLeft: 0,
      left: 430 
    }, 'slow');
  
    event.preventDefault();
  });

});

You can see the demo below.

Demo

Live demo