
<script type="text/javascript" src="http://www.cocomama.nl/js/jquery-1.4.1.js"></script>

    <div id="galleryContainer">
    
      <ul class="gallery">
      
        <li>
           <img rel="159" src="http://www.cocomama.nl/cache/photo1/photo1-159-184-119-184-184-119.jpg" alt="" />
        </li>
      
        <li>
           <img rel="160" src="http://www.cocomama.nl/cache/photo43/photo43-160-184-119-184-184-119.jpg" alt="" />
        </li>
      
        <li>
           <img rel="161" src="http://www.cocomama.nl/cache/photo43/photo43-161-184-119-184-184-119.jpg" alt="" />
        </li>
      
        <li>
           <img rel="162" src="http://www.cocomama.nl/cache/photo43/photo43-162-184-119-184-184-119.jpg" alt="" />
        </li>
      
        <li>
           <img rel="165" src="http://www.cocomama.nl/cache/photo43/photo43-165-184-119-184-184-119.jpg" alt="" />
        </li>
      
        <li>
           <img rel="196" src="http://www.cocomama.nl/cache/photo43/photo43-196-184-119-184-184-119.jpg" alt="" />
        </li>
      
      </ul>

      <a id="next" title="Next"></a>
      <a id="prev" title="Previous"></a>
      <div id="gallerySwitch"><a href="javascript:;" title="Gallery view">Gallery view</a></div>

      <div id="ajaxContent"><div id="preLoader"></div><div id="imgContainer"></div></div>
    
    <div>
  
<script type="text/javascript">
var boolBusy = false;
var nextImg;

$(document).ready(function() {
  loadImageById($('ul.gallery li:first-child').children('img').attr('rel'));
  $('ul.gallery li').bind({     click: function(){ nextImg = ( $('ul.gallery li').index($(this))+1 ); loadImageById($(this).children('img').attr('rel')) } });
  $('#gallerySwitch a').bind({  click: function() { unloadImage(); } });
  $('#next,#prev').css({ opacity: 0.3 });
  $('#next,#prev').hover(
    function() { $(this).animate({ opacity: 0.9 }, 250 ); },
    function() { $(this).animate({ opacity: 0.3 }, 250 ); } 
   );
  $('#next,#prev').bind({
    click: function(){ navigate($(this).attr('id')) }
  });

});

function navigate(navDirection)
{
  if (nextImg == undefined) nextImg = 1;
  var galleryLength = $('#galleryContainer ul li').size()
  if (navDirection == 'next'){
    nextImg++;
    if (nextImg > galleryLength) nextImg = 1;
  }else if (navDirection == 'prev'){
    nextImg--;
    if (nextImg < 1) nextImg = galleryLength;
  }
  loadImageById( $('#galleryContainer ul li:nth-child('+nextImg+')').children('img').attr('rel') )
}

function loadImageById(imageId)
{
  if (!boolBusy){
    $.ajax({
      url:'/ajax/getBigImage.asp?id='+imageId,
      beforeSend: function() {
                boolBusy = true;
                $('#ajaxContent').css({display: 'block'});
                $('#preLoader').fadeIn(500);
              },
      complete: function(oResponse) {
                boolBusy = false;
                $('#imgContainer').html(oResponse.responseText); // Replace src
                $('#next,#prev').fadeIn(500);
                $('#imgContainer').fadeIn(500, function(){
                  $('#preLoader').hide();
                  $('#gallerySwitch').fadeIn(250);
                  $('#imgContainer').bind({
                    click: function (){ unloadImage(); }
                  });
                })
              }
    });
  }
}

function unloadImage()
{
  $('ul.gallery li img').css({ display: 'block' })
  $('#next,#prev').fadeOut(500);
  $('#imgContainer').fadeOut(500, function(){
    $('#imgContainer').html('');
    $('#ajaxContent,#preLoader').css({display: 'none'});
  });
  $('#gallerySwitch').fadeOut(500);
}
</script>

<style type="text/css">
body
{
  padding: 0;
  margin: 0;
  background: #000;
}

#galleryContainer
{
  position: relative;
  width: 600px;
  height: 405px;
  padding: 0;
  margin: 0;
}

#next, #prev
{
  position: absolute;
  display: block;
  height: 38px;
  width: 42px;
  top: 50%;
  margin: -19px 0 0 0;
  background: url("../images/slider-nav.png") no-repeat;
  z-index: 100;
}

#next
{
  right: 18px;
  background-position: top left;
}

#prev
{
  left: 18px;
  background-position: bottom left;
}

ul.gallery
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 600px;
  height: 405px;
}

  ul.gallery li
  {
    width: 190px;
    height: 125px;
    padding: 5px;
    margin: 0;
    display: block;
    float: left;
    cursor: pointer;
  }
  ul.gallery li img
  {
    display: none;
    border: 3px #fff solid;
  }

#gallerySwitch
{
  position: absolute;
  bottom: 0;
  right: 0;
  height: 60px;
  width: 60px;
  z-index: 100;
}

#gallerySwitch a
{
  background: url("../images/gallery.gif") no-repeat scroll center bottom transparent;
  height: 38px;
  width: 42px;
  display: block;
  text-indent: -5000em;
}

#ajaxContent, #preLoader, #imgContainer
{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
	overflow:hidden;
  width: 600px;
  height: 405px;
  cursor: pointer;
}
#preLoader
{
  z-index: 1;
  cursor: wait;
  background: #fff url("../images/loading.gif") no-repeat center center;
}
#imgContainer { z-index: 50; display: none; }
</style>