Мар
13
2011

Простая но красивая галерея на jQuery

В этой статье я расскажу Вам как сделать простую но красивую и интересную галерею на jQuery. Пример вы можете просмотреть здесь. Кода здесь немного но выглядит хорошо =).

Для начала скачиваем плагин галереи: panelgallery-1_1.js
Потом подключаем библиотеку jQuery и наш скачанный плагин panelgallery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="путь к файлу/jquery.panelgallery-1_1.js" type="text/javascript"></script>

Потом выберем любых 6 картинок (можно и больше но я буду делать на 6). Вставляем в наш код картинки.
Прописываем CSS стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css"> 
body {
        background-image: url('notebook2.png'); /* картинка фона у меня ноутбук */
        background-repeat: no-repeat;
        }
#container {
        padding-top: 9px;
        padding-left: 55px;
               }
img {
        padding-top: 9px;
        padding-left: 55px;
        } 
</style>

После этого вставляем jQuery код:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$('#container').panelGallery({
	sections:5, // количество панелей при смене картинок 
	imageTransitionDelay :3000,
	startDelay:5000,
	sectionTransitionDelay : 700,
	repeat:false,
	direction:"tb"
});
</script>

Ну и добавляем сами картинки:

1
2
3
4
5
6
7
8
<div id="container" style="position:relative">
<img src="wallpaper.jpg" height="198" width="309" name="tb" /> 
<img src="choice.jpg" height="198" width="309" name="rl" /> 
<img src="desnycya.jpg" height="198" width="309" name="lr" /> 
<img src="gdz.jpg" height="198" width="309" name="bt" /> 
<img src="lvivchurch.jpg" height="198" width="309" name="tb"  /> 
<img src="blogmksite.jpg" height="198" width="309"  name="bt" /> 
</div>
tb — смена сверху в низ.
bt — смена снизу вверх.
lr — с лева на право.
rl — с права на лево.
Желательно чтобы размер картинки совпадал с введенным height и width.
Вот все смотрим пример:

Скачать можно здесь. 911-essay.com

Вам будет интересно прочитать и это:

Об авторе: Петро Бородатий

Создаю веб-сайты, пишу скрипты для популярных CMS, веду блог. Программист портала AdvertsMarket.net.

Оставить комментарий

Услуги

Веб-студия "MKSITE"

Реклама от Google

Социальные сети

Партнеры

Система Orphus