Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Очередная lightbox галерея на css и jQuery
Очередная красивая галерея в стиле 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>
<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>
<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
Вы сейчас просматриваете Очередная lightbox галерея на css и jQuery. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Очередная lightbox галерея на css и jQuery нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Очередная lightbox галерея на css и jQuery и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
