Качественная галерея на 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> 

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