Несколько лет назад был популярен фотоаппарат "Полароид", который делал моментальные снимки. Эти снимки были уже как бы оформлены в белую картонную рамочку. Это направление фотографии ушло в прошлое, а эффект оформления картинок в стиле "полароид" остался, и мы часто можем встретить его в дизайнерских работах.
Сегодня мы как раз создадим галерею в таком стиле. Но ее особенностью будет то, что Вы сможете перетаскивать фотографии мышкой, класть их в любое место экрана, словно рассматриваете их у себя на столе.
Нужно отметить, что этот эффект основан на сочетании двух мощных технологий: jQuery и CSS3 (CSS3 в этой галерее уже встроен в скрипт). К сожалению, CSS3 пока не является общепринятым стандартом, поэтому не все эффекты этой галереи будут работать в большинстве браузеров (а точнее не будет работать тень, т.к. именно она в данном случае основана на CSS3).
На сегодняшний день полноценную поддержку CSS3 имеют только браузеры Safary и Google Chrome. В них эта галерея будет смотреться особенно эффектно.
Еще одним замечанием будет то, что тестировать галерею на локальном компьютере необходимо при активном подключении к интернет, т.к. скрипт соединяется с сайтом google.
Пример галереи Вы можете посмотреть здесь.
Итак, начнем:
Шаг 1.
Скачаем картинки, используемые в галерее (или возьмем свои).
Шаг 2.
Скачаем и подключим необходимые для работы скрипты и файл таблицы стилей.
Code
<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 изменим пути к фоновой картинке страницы и к фоновой картинке полароидной рамки. Если вы поместили картинки в корень, то ссылки будут выглядеть так:
Code
body { overflow:hidden; background-image:url(bg.jpg); }
.polaroid { width:368px; height:376px; background-image:url(polaroid-bg.png); position:absolute; }
Шаг 4. Вставим картинки следующим образом:
Code
<div class="polaroid">
<img src="01_colosseum.png" alt="Colloseum" />
Coloseum in Rome</p>
</div>
<div class="polaroid">
<img src="02_vatican.png" alt="Vatican" />
Vatican</p>
</div>
<div class="polaroid">
<img src="03_forum_romanum.png" alt="Forum Romanum" />
Forum Romanum</p>
</div>
<div class="polaroid">
<img src="04_fiat_500.png" alt="Fiat 500" />
Fiat 500 - Typical Italian car</p>
</div>
<div class="polaroid">
<img src="05_me_gf.png" alt="Me and my girl in Florance" />
My girl and me in Florance</p>
</div>
<div class="polaroid">
<img src="06_venetian_gondolas.png" alt="Venetian Gondolas" />
Venetian Gondolas</p>
</div>
<div class="polaroid">
<img src="07_pizza.png" alt="Pizza" />
Delicious pizza - <strong>the</strong> Italian food</p>
</div>
<div class="polaroid">
<img src="08_pool.png" alt="Swimming pool" />
Swimming pool near our house</p>
</div>
<div class="polaroid">
<img src="09_florence.png" alt="Florence" />
Bridge in Florence - Ponte Vecchio</p>
</div>
<div class="polaroid">
<img src="10_tower_of_pisa.png" alt="Tower of Pisa" />
Leaning Tower of Pisa</p>
</div>
Галерея готова! Надеюсь, она привлечет внимание посетителей Вашего сайта, и они с интересом будут рассматривать Ваши картинки, перетаскивая их с места на место.
Главная
Форум
Регистрация
Контакты
Онлайн игры
Статистика
Всё для компа
Вход
