- Метки урока:
- jquery
- галерея
- изображения
Интересная галерея на jQuery
Сегодня мы с вами научимся создавать галерею, которая называется "PrettyGallery" и основана на технологии jQuery.
Вот пример того, что у нас должно получиться (щелкните по любой миниатюре):
Итак, с чего начнем:
Шаг 1.
Подготовим фотографии для нашей галереи: миниатюры размером 60х60 px и оригинальные изображения произвольного размера (в моем случае это 800х600 px). Скачать уже готовые изображения можно здесь.
Сохраним их в папку images в корне нашего сайта. Для удобства можно создать отдельно папки для больших картинок и миниатюр.
Шаг 2.
Распакуем в корень сайта файлы со скриптами, необходимыми для работы.
Шаг 3.
Вставим следующий код между тегами <head> </head>. Тем самым мы подключаем css-стили, отвечающие за внешний вид галереи, а также скрипты jquery, lightbox и prettyGallery, скачанные в предыдущем шаге.
<link rel="stylesheet" href="scripts/styleGallery.css" type="text/css" media="screen" title="prettyDropdown main stylesheet" charset="UTF-8" />
<script src="scripts/jQuery 1.2.6.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/prettyGallery.css" type="text/css" media="screen" title="prettyDropdown main stylesheet" charset="UTF-8" />
<script src="scripts/prettyGallery.js" type="text/javascript" charset="UTF-8"></script>
<link rel="stylesheet" href="scripts/prettyPhoto.css" type="text/css" media="screen" charset="UTF-8" />
<script src="scripts/prettyPhoto.js" type="text/javascript" charset="UTF-8"></script>
Шаг 4.
В том месте, в котором мы хотим видеть нашу галерею на странице, нужно вставить код:
<ul class="gallery">
<li><a href="images/big/1.jpg" rel="prettyPhoto[gallery]"><img src="images/small/1.jpg" width="60" height="60" alt="1" /></a></li>
<li><a href="images/big/2.jpg" rel="prettyPhoto[gallery]"><img src="images/small/2.jpg" width="60" height="60" alt="2" /></a></li>
<li><a href="images/big/3.jpg" rel="prettyPhoto[gallery]"><img src="images/small/3.jpg" width="60" height="60" alt="3" /></a></li>
<li><a href="images/big/4.jpg" rel="prettyPhoto[gallery]"><img src="lessons/170209pg/images/small/4.jpg" width="60" height="60" alt="4" /></a></li>
<li><a href="images/big/5.jpg" rel="prettyPhoto[gallery]"><img src="images/small/5.jpg" width="60" height="60" alt="5" /></a></li>
<li><a href="images/big/6.jpg" rel="prettyPhoto[gallery]"><img src="images/small/6.jpg" width="60" height="60" alt="5" /></a></li>
</ul>
Как видим, галерея организована на основе списка, в котором можно изменить пути к картинкам (если вы скачали картинки из урока, то ничего изменять не нужно).
Здесь вы можете добавить или уменьшить количество изображений, а также указать их названия в параметре alt="".
Шаг 5. Заключительный!
Перед закрывающим тегом </body> вставим код скрипта:
<script type="text/javascript" charset="utf-8">
$("a[rel^='prettyPhoto']").prettyPhoto({showTitle:false});
$('ul.gallery:first').prettyGallery({itemsPerPage:3, navigation:'bottom', animationSpeed:'slow'});
</script>
В последней строке этого скрипта можете настроить количество миниатюр, показываемых одновременно ("itemsPerPage:"); расположение панели навигации (параметр "navigations:" который может принимать значения 'top' или 'bottom', или 'both', т.е. либо сверху, либо снизу, либо одновременно и сверху, и снизу); а также скорость прокрутки (параметр "animationSpeed", который может принимать значения 'fast', 'normal', или 'slow', т.е. быстро, нормально или медленно).
Вот и все! Можете использовать эту галерею на ваших веб-сайтах!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.no-margin-for-errors.com/projects/prettyGallery/
Перевел: Сергей Патин
Урок создан: 17 Февраля 2009
Просмотров: 112571
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.