<script type="text/javascript" src="/js/jquery.imgbox.pack.js"></script>
<style>
#imgbox-loading {
  position: absolute;
  top: 0;
  left: 0;
  background: url('/images/imgbox-spinner.gif') center center no-repeat;
  cursor: pointer;
  display: none;
  z-index: 90;
}

#imgbox-loading div {
  background: #FFF;
  width: 100%;
  height : 100%;
}

#imgbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: none;
  z-index: 80;
}

.imgbox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF;
  display: none;
  z-index: 90;
}

.imgbox-img {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.imgbox-close {
  position: absolute;
  top: -15px;
  right: -15px;
  height: 30px;
  width: 30px;
  background: url('/images/imgbox-close.png') top left no-repeat;
  cursor: pointer;
  outline: none;
}

.imgbox-title {
  padding-top: 10px;
  font-size: 11px;
  text-align: center;
  font-family: Arial;
  color: #333;
  display: none;
}

.imgbox-bg-wrap {
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
}

.imgbox-bg {
  position: absolute;
  width: 20px;
  height: 20px;
}

.imgbox-bg-n {
  left: 0;
  top: -20px;
  width: 100%;
  background: url(/images/imgbox-bg-n.png) repeat-x;
}

.imgbox-bg-ne {
  right: -20px;
  top: -20px;
  background: url(/images/imgbox-bg-ne.png) no-repeat;
}

.imgbox-bg-e {
  right: -20px;
  top: 0;
  height: 100%;
  background: url(/images/imgbox-bg-e.png) repeat-y;
}

.imgbox-bg-se {
  right: -20px;
  bottom: -20px;
  background: url(/images/imgbox-bg-se.png) no-repeat;
}

.imgbox-bg-s {
  left: 0;
  bottom: -20px;
  width: 100%;
  background: url(/images/imgbox-bg-s.png) repeat-x;
}

.imgbox-bg-sw {
  left: -20px;
  bottom: -20px;
  background: url(/images/imgbox-bg-sw.png) no-repeat;
}

.imgbox-bg-w {
  left: -20px;
  top: 0;
  height: 100%;
  background: url(/images/imgbox-bg-w.png) repeat-y;
}

.imgbox-bg-nw {
  left: -20px;
  top: -20px;
  background: url(/images/imgbox-bg-nw.png) no-repeat;
}
</style>
  <style type="text/css">
  #images a {
  margin-right: 14px;
  }

  #images a img {
  border: 1px solid #888;  
  padding: 3px;
  vertical-align: top;
  }

  #credit {
  clear: both;  
  margin-top: 50px;
  padding-top: 20px;
  font-size: 10px;
  border-top: 1px solid #BBB;
  font-family: Verdana;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function() {
  $("#example1-1").imgbox();

  $("#example1-2").imgbox({
  'zoomOpacity' : true,
  'alignment' : 'center'
  });

  $("#example1-3").imgbox({
  'speedIn' : 0,
  'speedOut' : 0
  });

  $("#example2-1").imgbox({
  'speedIn' : 0,
  'speedOut' : 0,
  'alignment' : 'center',
  'overlayShow' : true,
  'allowMultiple' : false
  });
  });
  </script>

<div id="images">  
<a id="example1-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>
</div>

<div id="images">  
<a id="example1-2" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>
</div>

<div id="images">  
<a id="example1-3" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>
</div>

<div id="images">  
<a id="example2-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>
</div>