Интересная галерея на jQuery

Сегодня мы с вами научимся создавать галерею, которая называется "PrettyGallery" и основана на технологии jQuery.

Вот пример того, что у нас должно получиться (щелкните по любой миниатюре):

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Итак, с чего начнем:

Шаг 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
Просмотров: 112385
Правила перепечатки

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

^ Наверх ^