Качественная галерея на jQuery в стиле поларойда

Несколько лет назад был популярен фотоаппарат "Полароид", который делал моментальные снимки. Эти снимки были уже как бы оформлены в белую картонную рамочку.

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

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

Нужно отметить, что этот эффект основан на сочетании двух мощных технологий: jQuery и CSS3 (CSS3 в этой галерее уже встроен в скрипт). К сожалению, CSS3 пока не является общепринятым стандартом, поэтому не все эффекты этой галереи будут работать в большинстве браузеров (а точнее не будет работать тень, т.к. именно она в данном случае основана на CSS3).

На сегодняшний день полноценную поддержку CSS3 имеют только браузеры Safary и Google Chrome. В них эта галерея будет смотреться особенно эффектно.

Еще одним замечанием будет то, что тестировать галерею на локальном компьютере необходимо при активном подключении к интернет, т.к. скрипт соединяется с сайтом google.

Пример галереи Вы можете посмотреть здесь.

Итак, начнем:

Шаг 1.

Скачаем картинки, используемые в галерее (или возьмем свои).

Шаг 2.

Скачаем и подключим необходимые для работы скрипты и файл таблицы стилей.

<link rel="stylesheet" type="text/css" href="stylepolar.css"/>
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="script.js"></script>

Шаг 3.

В таблице стилей CSS изменим пути к фоновой картинке страницы и к фоновой картинке полароидной рамки. Если вы поместили картинки в корень, то ссылки будут выглядеть так:

body { overflow:hidden; background-image:url(bg.jpg); }
.polaroid { width:368px; height:376px; background-image:url(polaroid-bg.png); position:absolute; }

Шаг 4.

Вставим картинки следующим образом:

<div class="polaroid">
<img src="01_colosseum.png" alt="Colloseum" />
<p>Coloseum in Rome</p>
</div>
<div class="polaroid">
<img src="02_vatican.png" alt="Vatican" />
<p>Vatican</p>
</div>
<div class="polaroid">
<img src="03_forum_romanum.png" alt="Forum Romanum" />
<p>Forum Romanum</p>
</div>
<div class="polaroid">
<img src="04_fiat_500.png" alt="Fiat 500" />
<p>Fiat 500 - Typical Italian car</p>
</div>
<div class="polaroid">
<img src="05_me_gf.png" alt="Me and my girl in Florance" />
<p>My girl and me in Florance</p>
</div>
<div class="polaroid">
<img src="06_venetian_gondolas.png" alt="Venetian Gondolas" />
<p>Venetian Gondolas</p>
</div>
<div class="polaroid">
<img src="07_pizza.png" alt="Pizza" />
<p>Delicious pizza - <strong>the</strong> Italian food</p>
</div>
<div class="polaroid">
<img src="08_pool.png" alt="Swimming pool" />
<p>Swimming pool near our house</p>
</div>
<div class="polaroid">
<img src="09_florence.png" alt="Florence" />
<p>Bridge in Florence - Ponte Vecchio</p>
</div>
<div class="polaroid">
<img src="10_tower_of_pisa.png" alt="Tower of Pisa" />
<p>Leaning Tower of Pisa</p>
</div>

Галерея готова! Надеюсь, она привлечет внимание посетителей Вашего сайта, и они с интересом будут рассматривать Ваши картинки, перетаскивая их с места на место.

Данный урок подготовлен для Вас командой сайта http://ruseller.com

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

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

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

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

Ваше имя:

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

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