Еще один вид галереи на jQuery

В этом уроке мы научимся создавать еще одну галерею на jQuery. Ее особенностью является возможность работать с большим количеством изображений.

demosourse

Шаг 1.

Подключим необходимые для работы скрипты, прописав следующий код между тегами <head>:

 <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jqgalscroll.js"></script>

Шаг 2.

В отдельную таблицу стилей или также между тегами <head> вставим стили галереи:

.jqGSContainer{position:relative;width:500px;}

  .jqGSContainer .jqGSImgContainer{}

  .jqGSContainer .jqGSImgContainer ul{padding:0;margin:0;position:relative;list-style:none;}

  .jqGSContainer .jqGSImgContainer ul li{padding:0;margin:0;position:relative;margin-top:0;margin-bottom:0px;float:left;}

  .jqGSContainer .jqGSImgContainer ul li .jqGSLoader{width:100%;height:100%;position:absolute;}

  .jqGSContainer .jqGSImgContainer ul li img{border:1px solid #fff;}

  .jqGSContainer .jqGSPagination{height:20px;top:5px;padding: 5px 0;}

  .jqGSContainer .jqGSPagination ul{padding:0;margin:0;list-style:none;position:relative;float:right;}

  .jqGSContainer .jqGSPagination ul li{padding:0;margin-right:5px;float:left;padding-right:1px;text-align:center;padding-bottom:1px;}

  .jqGSContainer .jqGSPagination ul li a{padding:2px 0px;background:#000;border:1px solid #fff; color: #fff;text-decoration:none;display:block;width:20px;font:10px Verdana, Arial, Helvetica, sans-serif;}

  .jqGSContainer .jqGSPagination ul li a.selected{background:#fff;color:#f03;border: 1px solid #eaeaea;}

  .jqGSContainer .jqGSPagination ul li a:hover{background:#fff;color:#000;border:1px solid #fff;}

  .jqGSImgContainer{border:1px solid #000;}

Шаг 3.

Далее вставим следующий код скрипта:

 <script type="text/javascript">
			$(document).ready(function(){
				$('#one').jqGalScroll();
});
</script>

Шаг 4.

Ну а теперь непосредственно в тело документа вставим галерею, которая представляет собой простой список.

 <ul id="one">

<li><img src="1.jpg" border="0"/></li>

<li><a href="2.jpg"><img src="2.jpg" border="0"/></a></li>

<li><a href="3.jpg"><img src="3.jpg" border="0"/></a></li>

<li><a href="4.jpg"><img src="4.jpg" border="0"/></a></li>

<li><a href="5.jpg"><img src="5.jpg" border="0"/></a></li>

<li><a href="6.jpg"><img src="6.jpg" border="0"/></a></li>

</ul>

Здесь поменяйте пути к картинкам и соответствующие ссылки для них.

Еще нужно учесть, что ширина картинок не должна превышать 500 px. Если же вы все-таки хотите использовать картинки большей ширины, то измените значение width в самом первом стиле в шаге 2.

Спасибо за внимание! До новых встреч!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.benjaminsterling.com
Перевел: Сергей Патин
Урок создан: 26 Мая 2009
Просмотров: 30336
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^