Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.

Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..

Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе

Уроки по сайтостроению - Рубрика: PHP

Фотогалерея на 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"><br>
<li><a href="img/273/big/1.jpg" rel="prettyPhoto[gallery]"><img src="img/273/small/1.jpg" width="60" height="60" alt="1" /></a></li>
<li><a href="img/273/big/2.jpg" rel="prettyPhoto[gallery]"><img src="img/273/small/2.jpg" width="60" height="60" alt="2" /></a></li>
<li><a href="img/273/big/3.jpg" rel="prettyPhoto[gallery]"><img src="img/273/small/3.jpg" width="60" height="60" alt="3" /></a></li>
<li><a href="img/273/big/4.jpg" rel="prettyPhoto[gallery]"><img src="img/273/small/4.jpg" width="60" height="60" alt="4" /></a></li>
<li><a href="img/273/big/5.jpg" rel="prettyPhoto[gallery]"><img src="img/273/small/5.jpg" width="60" height="60" alt="5" /></a></li>
<li><a href="img/273/big/6.jpg" rel="prettyPhoto[gallery]"><img src="img/273/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', т.е. быстро, нормально или медленно).


Вот и все! Можете использовать эту галерею на ваших веб-сайтах!




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-02-20    Просмотров: 9623    Сайт-источник: www.ruseller.ru

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (6)


Комментарий by Bulk, От 2009-11-25

Супер галерейка спасибо! http://compplace.net

Комментарий by Марк, От 2010-02-25

Отличная наработка по галерее. Подскажите как расположить на одной странице html несколько таких галерей, каждая из которых сможет запускать фотографии из своей папки? Заранее благодарен.

Комментарий by Slon, От 2010-05-01

Марк хороший вопрос )) Я ищу такую галерею уже довольно долго. Искал на флеш теперь ищу на JQuery пока что готового решения не нашел. Если что найдется дайте плизз ссылочку на djslon собака на mail.ru

Комментарий by Игорь, От 2010-09-29

Не приятный глюк это галереи заключается в том, что, при нажатии на Enter при увлечиченном изображении, галерею ведет себя просто не адекватно. Может и мелочь для кого-то, но мне не приятно!

Комментарий by FATUM, От 2010-11-30

Жопа галереи в том что нужно делать маленьки копии фото и вручную вписывать картинки в html

Комментарий by query, От 2010-12-11

ну почему жопа?, сделай в цикле вывод картинок и всё

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

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".

Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее

При восстановлении свойств программы Photoshop, использовавшихся по умолчанию, все созданные вами шаблоны кистей удаляются. Во избежание этого сохраняйте образцы кистей в отдельном файле Brushes.abr. Щелкните по стрелке рядом с ярлычком палитры Brushes и выберите из открывшегося меню пункт Save Brushes (Сохранить кисти). Введите имя файла с расширением .abr и нажмите кнопку Save.

Узнать больше

Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *