- Метки урока:
- web дизайн
- jquery
Создаем портфолио на 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="#">
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com
Перевел: Сергей Патин
Урок создан: 17 Марта 2009
Просмотров: 50951
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.