Создаем портфолио на jQuery

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

Пример этой галереи вы можете посмотреть здесь. (Нажимайте по верхним ссылкам, что скрывать или показывать разные части портфолио).

Итак,

1. Подготовим несколько фотографий размером 200х115 px или скачаем используемые в примере.

2. Скачаем и подключим к нашему документу фреймворк jQuery, скрипт framework.js и файл CSS, отвечающий за дизайн галереи.

<link href="screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="framework.js"></script>

3. Создадим контейнер с идентификатором container

<div id="container">
</div> 

Вставим в него список со стилем filter, отвечающий за количество и название категорий галереи:

   <ul id="filter">
		<li class="current"><a href="">All</a></li>
		<li><a href="">Design</a></li>
		<li><a href="">Web</a></li>
		<li><a href="">CMS</a></li>
		<li><a href="">Photo</a></li>
		<li><a href="">Favorite</a></li>
	</ul>

4. После этого списка вставим код самой галереи (кстати она тоже является просто списком):

<ul id="portfolio">   
   
<li class="design">   
<a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />name</a>   
</li>   
<li class="design">   
<a href="#"><img src="images/apple.png" alt="" height="115" width="200" />name</a>   
</li>   
<li class="design">   
<a href="#"><img src="images/cnn.png" alt="" height="119" width="200" />name</a>   
</li>   
 
 
 
<li class="web">   
<a href="#"><img src="images/facebook.png" alt="" height="118" width="200" />name</a>   
</li>  
<li class="web">   
<a href="#"><img src="images/google.png" alt="" height="114" width="200" />name</a>   
</li>        
           
           
<li class="cms">   
<a href="#"><img src="images/netflix.png" alt="" height="119" width="200" />name</a>   
</li>  
           
<li class="photo">   
<a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />name</a>   
</li>  
           
<li class="photo">   
<a href="#"><img src="images/white-house.png" alt="" height="120" width="200" />name</a>   
</li>  
           
<li class="favorite">   
<a href="#"><img src="images/white-house.png" alt="" height="120" width="200" />name</a>   
</li>  
</ul>  

Необходимо отметить, что класс элемента галереи должен соответсвовать классу категории, которые мы добавляли в шаге 3, но писать этот класс следует маленькими буквами, т.е. не Favorite (как в названии категории), а favorite.

Добавлением или удалением элементов списка добиваемся нужной нам структуры галереи.

Вместо слова "name" пишем соответствующее название каждой картинке, ссылки можно добавить редактируя параметр <a href="#">