<link rel="stylesheet" type="text/css" href="/css/style.css" />

<div id="loader" class="loader"></div>  
  <div id="ps_container" class="ps_container">  
  <div class="ps_image_wrapper">  
  <img src="Ссылка на первое большое изображение" alt="" />  
  </div>  
  <div class="ps_next"></div>  
  <div class="ps_prev"></div>  
  <ul class="ps_nav">  
  <li class="selected"><a href="Ссылка на большое изображение" rel="Ссылка на миниатюру">Image 1</a></li>  
  <li><a href="Ссылка на большое изображение" rel="Ссылка на миниатюру">Image 2</a></li>  
  <li><a href="Ссылка на большое изображение" rel="Ссылка на миниатюру">Image 3</a></li>  
  <li><a href="Ссылка на большое изображение" rel="Ссылка на миниатюру">Image 4</a></li>  
  <li><a href="Ссылка на большое изображение" rel="Ссылка на миниатюру">Image 5</a></li>  
  <li class="ps_preview">  
  <div class="ps_preview_wrapper"></div>  
  <span></span>  
  </li>  
  </ul>  
  </div>

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>  

  <script type="text/javascript">  
  /*  
  the images preload plugin  
  */  
  (function($) {  
  $.fn.preload = function(options) {  
  var opts = $.extend({}, $.fn.preload.defaults, options),  
  o = $.meta ? $.extend({}, opts, this.data()) : opts;  
  return this.each(function() {  
  var $e = $(this),  
  t = $e.attr('rel'),  
  i = $e.attr('href'),  
  l = 0;  
  $('<img/>').load(function(i){  
  ++l;  
  if(l==2) o.onComplete();  
  }).attr('src',i);  
  $('<img/>').load(function(i){  
  ++l;  
  if(l==2) o.onComplete();  
  }).attr('src',t);  
  });  
  };  
  $.fn.preload.defaults = {  
  onComplete : function(){return false;}  
  };  
  })(jQuery);  
  </script>  
  <script type="text/javascript">  
   
  $(function() {  
  //some elements..  
  var $ps_container = $('#ps_container'),  
  $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),  
  $ps_next = $ps_container.find('.ps_next'),  
  $ps_prev = $ps_container.find('.ps_prev'),  
  $ps_nav = $ps_container.find('.ps_nav'),  
  $tooltip = $ps_container.find('.ps_preview'),  
  $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),  
  $links = $ps_nav.children('li').not($tooltip),  
  total_images = $links.length,  
  currentHovered = -1,  
  current = 0,  
  $loader = $('#loader');  
   
  /*check if you are using a browser*/  
  var ie = false;  
  if ($.browser.msie) {  
  ie = true;//you are not!Anyway let's give it a try  
  }  
  if(!ie)  
  $tooltip.css({  
  opacity : 0  
  }).show();  
   
   
  /*first preload images (thumbs and large images)*/  
  var loaded = 0;  
  $links.each(function(i){  
  var $link = $(this);  
  $link.find('a').preload({  
  onComplete : function(){  
  ++loaded;  
  if(loaded == total_images){  
  //all images preloaded,  
  //show ps_container and initialize events  
  $loader.hide();  
  $ps_container.show();  
  //when mouse enters the pages (the dots),  
  //show the tooltip,  
  //when mouse leaves hide the tooltip,  
  //clicking on one will display the respective image  
  $links.bind('mouseenter',showTooltip)  
  .bind('mouseleave',hideTooltip)  
  .bind('click',showImage);  
  //navigate through the images  
  $ps_next.bind('click',nextImage);  
  $ps_prev.bind('click',prevImage);  
  }  
  }  
  });  
  });  
   
  function showTooltip(){  
  var $link = $(this),  
  idx = $link.index(),  
  linkOuterWidth = $link.outerWidth(),  
  //this holds the left value for the next position  
  //of the tooltip  
  left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,  
  //the thumb image source  
  $thumb = $link.find('a').attr('rel'),  
  imageLeft;  
   
  //if we are not hovering the current one  
  if(currentHovered != idx){  
  //check if we will animate left->right or right->left  
  if(currentHovered != -1){  
  if(currentHovered < idx){  
  imageLeft = 75;  
  }  
  else{  
  imageLeft = -75;  
  }  
  }  
  currentHovered = idx;  
   
  //the next thumb image to be shown in the tooltip  
  var $newImage = $('<img/>').css('left','0px')  
  .attr('src',$thumb);  
   
  //if theres more than 1 image  
  //(if we would move the mouse too fast it would probably happen)  
  //then remove the oldest one (:last)  
  if($ps_preview_wrapper.children().length > 1)  
  $ps_preview_wrapper.children(':last').remove();  
   
  //prepend the new image  
  $ps_preview_wrapper.prepend($newImage);  
   
  var $tooltip_imgs = $ps_preview_wrapper.children(),  
  tooltip_imgs_count = $tooltip_imgs.length;  
   
  //if theres 2 images on the tooltip  
  //animate the current one out, and the new one in  
  if(tooltip_imgs_count > 1){  
  $tooltip_imgs.eq(tooltip_imgs_count-1)  
  .stop()  
  .animate({  
  left:-imageLeft+'px'  
  },150,function(){  
  //remove the old one  
  $(this).remove();  
  });  
  $tooltip_imgs.eq(0)  
  .css('left',imageLeft + 'px')  
  .stop()  
  .animate({  
  left:'0px'  
  },150);  
  }  
  }  
  //if we are not using a "browser", we just show the tooltip,  
  //otherwise we fade it  
  //  
  if(ie)  
  $tooltip.css('left',left + 'px').show();  
  else  
  $tooltip.stop()  
  .animate({  
  left : left + 'px',  
  opacity : 1  
  },150);  
  }  
   
  function hideTooltip(){  
  //hide / fade out the tooltip  
  if(ie)  
  $tooltip.hide();  
  else  
  $tooltip.stop()  
  .animate({  
  opacity : 0  
  },150);  
  }  
   
  function showImage(e){  
  var $link = $(this),  
  idx = $link.index(),  
  $image = $link.find('a').attr('href'),  
  $currentImage = $ps_image_wrapper.find('img'),  
  currentImageWidth = $currentImage.width();  
   
  //if we click the current one return  
  if(current == idx) return false;  
   
  //add class selected to the current page / dot  
  $links.eq(current).removeClass('selected');  
  $link.addClass('selected');  
   
  //the new image element  
  var $newImage = $('<img/>').css('left',currentImageWidth + 'px')  
  .attr('src',$image);  
   
  //if the wrapper has more than one image, remove oldest  
  if($ps_image_wrapper.children().length > 1)  
  $ps_image_wrapper.children(':last').remove();  
   
  //prepend the new image  
  $ps_image_wrapper.prepend($newImage);  
   
  //the new image width.  
  //This will be the new width of the ps_image_wrapper  
  var newImageWidth = $newImage.width();  
   
  //check animation direction  
  if(current > idx){  
  $newImage.css('left',-newImageWidth + 'px');  
  currentImageWidth = -newImageWidth;  
  }  
  current = idx;  
  //animate the new width of the ps_image_wrapper  
  //(same like new image width)  
  $ps_image_wrapper.stop().animate({  
  width : newImageWidth + 'px'  
  },350);  
  //animate the new image in  
  $newImage.stop().animate({  
  left : '0px'  
  },350);  
  //animate the old image out  
  $currentImage.stop().animate({  
  left : -currentImageWidth + 'px'  
  },350);  
   
  e.preventDefault();  
  }  
   
  function nextImage(){  
  if(current < total_images){  
  $links.eq(current+1).trigger('click');  
  }  
  }  
  function prevImage(){  
  if(current > 0){  
  $links.eq(current-1).trigger('click');  
  }  
  }  
  });  
  </script>