Главная » Файлы » Прочие скрипты » jQuery

Очередная lightbox галерея на css и jQuery
23.06.14, 11:38:40

Скачать файл




Очередная красивая галерея в стиле lightbox. Плавное открытие, закрытие и смена картинок, затемнение фона и режим автослайдера придадут вашему сайту изысканность и оригинальность

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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>


Осталось лишь залить скрипт из прикреплённого архива в папку js стиль в папку css и все картинки в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: CSS, галерея, Lightbox, на, JQuery, Очередная
Просмотров: 348 | Загрузок: 0 | Комментарии: 7 | Рейтинг: 0.0/0
Всего комментариев: 3
0
Сейчас этот сайт неактуален. Мы уже давно переехали на новый домен imapo.ru

0
Существует море других интересных галерей

0
Похоже, что эта галерея не умеет работать с последними версиями jQuery

Имя *:
Email: