jQuery: a slideshow with a side navigation menu

I always take inspiration from desktop applications to create new jQuery demos. In this post I'd like to show you how to create an image slideshow which features a vertical thumbnail-based menu on its left side. This menu is initially hidden and it will be shown by clicking on a tab. Let's see the details.

The markup

The underlying HTML structure is as follows:

<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="img/1.jpg" alt="" id="s1" />
  <img src="img/2.jpg" alt="" id="s2" />
  <img src="img/3.jpg" alt="" id="s3" />
  <img src="img/4.jpg" alt="" id="s4" />
 </div>
 <ul id="slideshow-nav">
  <li>
   <a href="#s1"><img src="img/1-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s2"><img src="img/2-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s3"><img src="img/3-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s4"><img src="img/4-thumb.jpg" alt="" /></a>
  </li>
 </ul>
 <a href="#" id="open">Apri</a>
</div>

We have three main elements:

1. slideshow-wrapper: the full-width image container
2. slideshow-nav: the thumbnail-based vertical menu
3. open: the tab for showing/hiding the menu

The CSS

Our CSS design is all based on contextual positioning:

#slideshow {
 width: 700px;
 height: 400px;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
}

#slideshow-wrapper {
 width: 2400px;
 height: 400px;
 position: absolute;
 left: 100px;
 z-index: 3;
}

#slideshow-wrapper img {
 float: left;
 width: 600px;
 height: 400px;
 position: relative;
}

#slideshow-nav {
 width: 100px;
 height: 276px;
 margin: 0;
 padding: 0;
 list-style: none;
 position: absolute;
 top: 50%;
 margin-top: -138px;
 left: 100px;
 z-index: 2;
}

#slideshow-nav li,
#slideshow-nav li a,
#slideshow-nav li a img {
 display: block;
 width: 100%;
}

#open {
 display: block;
 width: 18px;
 height: 150px;
 background: url(img/open-off.png) no-repeat;
 text-indent: -1000em;
 position: absolute;
 top: 50%;
 left: 82px;
 margin-top: -75px;
 z-index: 2;
}

#open:hover {
 background: url(img/open-on.png) no-repeat;
}

We've used z-index to initially hide the vertical menu just behind the main image wrapper. Bear in mind that an element with a greater z-index value will be always displayed on the top of another element with a lower z-index value.

The jQuery code

We have to associate a sliding action to each thumbnail link and a show/hide effect to the tab control:

var Slider = {

 slide: function() {
 
  $('a', '#slideshow-nav').each(function() {
  
   var $a = $(this);
   var href = $a.attr('href');
   var $img = $(href);
   var left = $img.position().left;
   
   $a.click(function(event) {
   
       $('img', '#slideshow-wrapper').not($img).css('left', 0);
   
    $img.animate({
     left: - left
    }, 1000);
    
    event.preventDefault();
   
   });
  
  
  });
 
 
 },
 
 control: function() {
 
  var $control = $('#open', '#slideshow');
  var $nav = $('#slideshow-nav', '#slideshow');
  
  $control.click(function(event) {
  
   if(parseInt($nav.css('left')) == 100) {
   
    $nav.animate({
     left: 0
    }, 1000); 
   
   } else {
   
    $nav.animate({
     left: 100
    }, 1000);
   
   }
  
  
   event.preventDefault();
  
  });
 
 
 },
 
 init: function() {
 
  this.slide();
  this.control();
 
 
 }

};

$(function() {

 Slider.init();

});

Each link has an anchor which is equal to the corresponding ID of the current image, so we'll use this anchor to select the images. The action on the tab control is different: here we have to check whether the vertical menu is actually positioned behind the main image wrapper by testing its left property to see if its current value is 100 or not. After testing this value, we can finally show or hide the menu.

You can see the demo below.

Demo

Live demo

Download

ZIP file