Увеличение изображений через плагин imgbox на jQuery

<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>