<link href="/css/nf.lightbox.css" rel="stylesheet" type="text/css" media="screen" />
  <script src="/js/NFLightBox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {  
var settings = { containerResizeSpeed: 350  
};  
$('#gallery a').lightBox(settings);  
});  
</script>

<style type="text/css">
#gallery  
{  
background-color: #444;  
padding: 10px;  
width: 520px;  
}  
#gallery ul  
{  
list-style: none;  
}  
#gallery ul li  
{  
display: inline;  
}  
#gallery ul img  
{  
border: 5px solid #3e3e3e;  
border-width: 5px 5px 20px;  
}  
#gallery ul a:hover img  
{  
border: 5px solid #fff;  
border-width: 5px 5px 20px;  
color: #fff;  
}  
#gallery ul a:hover  
{  
color: #fff;  
}  
</style>

<div id="gallery">
  <ul>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
<li><a href="Ссылка на большое изображение" title="Описание картинки">
<img src="Ссылка на уменьшенное изображение" width="100" >
</a></li>
  </ul>
  </div>