Очередная красивая галерея в стиле lightbox. Плавное открытие, закрытие и смена картинок, затемнение фона и режим автослайдера придадут вашему сайту изысканность и оригинальность
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<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>
Сама галерея прописывается следующим образом:
Code
<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>
Осталось лишь залить скрипт из прикреплённого архива в папку js стиль в папку css и все картинки в папку images
