All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок
Страница 1 из 11
Модератор форума: Vladislavik-36 
Форум » Движки » uCoz » Качественная галерея на jQuery в стиле поларойда
Качественная галерея на jQuery в стиле поларойда
leonP4Дата: Пятница, 23.10.2009, 11:23 | Сообщение # 1
.:хакер:.
Группа: Администратор
Сообщений: 1006
Награды: 11
Статус: Offline
Несколько лет назад был популярен фотоаппарат "Полароид", который делал моментальные снимки. Эти снимки были уже как бы оформлены в белую картонную рамочку.

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

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

Нужно отметить, что этот эффект основан на сочетании двух мощных технологий: 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>

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


Админ - Первый источник флуда на форуме =)
 
Форум » Движки » uCoz » Качественная галерея на jQuery в стиле поларойда
Страница 1 из 11
Поиск:
Реклама