Проста фотогалерея на css, вебсовет

Для організації фотогалереї на сайті часто використовують готові скрипти на PHP. Я пробував пару-трійку раз зайнятися цим корисною справою і прийшов до висновку, що якщо потрібна динамічна галерея, де можуть оцінювати ваші роботи інші люди, і де можна легко і швидко вставляти фотки і тексти описи до них прямо з робочого столу, то краще скористатися готовими онлайн сервісами, яких в мережі ціла купа. Ось хоча б старий добрий Flickr.

Чіпляти до свого сайту скрипт, потім налаштовувати його - той ще геморой. Ті безкоштовні скрипти, що лежать в мережі, або прості, але страшненькі в оформленні та глючний в роботі, або настільки великовагові і перевантажені всякими надмірностями, що правити і заточувати їх під свій сайт запаришся.

Але якщо ви хочете просто розмістити на своєму сайті кілька фоток з підписами, то це дуже легко і красиво можна оформити за допомогою чистого CSS і пари допоміжних картинок, що ми зараз і зробимо.

Для початку нам потрібно заготовити парочку ось таких картинок:

Відразу пояснимо, для чого вони у нас такі довгі. Обидві картинки ми будемо використовувати фоном під наші превью (превью - зменшена копія фотографії).

Так як превью можуть бути різного розміру і орієнтації (горизонтальні або вертикальні), і підписи до них можуть бути різної довжини, то ми зробимо наступну хитрість: прив'яжемо першу картинку фоном до Тегу div. а другу - до Тегу p. який задіємо для підпису.

В результаті нижній край прев'юшки буде завжди на одному і тому ж відстані від підпису, незалежно від довжини підпису.

Ще нам знадобляться самі прев'юшки фотографій. Великі фотографії ми розмістимо кожну на своїй окремій сторінці, з якої буде повернення на головну за допомогою кнопки BACK.

Отже, запишемо для початку код головну сторінку:

Код зовсім простий. Ми помістили вміст сторінки в «коробочку» - container. яку розташували по центру, а кожну прев'юшки з підписом оформили окремим div-му з класом tumb.

Розглянемо тепер докладніше файл стилів CSS:

a text-decoration: none;
>

body background: #fff;
>

#container width: 860px;
margin: 0 auto;
>

#header background: url (header.gif) no-repeat;
width: 860px;
height: 160px;
margin: 0 auto;
clear: both;
>

div.tumb background: url (tumb01.gif) no-repeat;
width: 210px;
float: left;
margin: 0 30px 20px;
>

div.tumb img margin: 5px 4px;
>

div.tumb p background: url (tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, sans-serif;
color: # 333;
margin: 0;
padding: 0 25px 20px 10px;
>

Почнемо по порядку. Для всієї сторінки разом ми встановили поля, відступи і межі рівними 0. Фон вказали білого кольору, у посилань вимкнули підкреслення, а розмір контейнера задали в 860 пікселів по ширині і автовирівнювання.

Для шапки намалювали симпатичний зоголовок і помістили його там у вигляді фону, задавши ширину і висоту. Це все просто. А ось далі буде хитрість.

Для превьюшек, як уже говорилося, ми використовували div з класом tumb. При цьому самому селектору tumb ми в правилах задали відображення фону у вигляді першої нашої картинки, показаної вище, вказавши її ширину в 210 пікселів і заборонивши повтор. Висоту при цьому не вказуємо!

Крім того, ми сюди ж додали правило обтікання зліва (float: left), бо хочемо розташувати по горизонталі кілька превьюшек. Якщо цього не зробити, то все прев'юшки будуть розташовуватися на сторінці в стовпчик одна під інший.

У наступному наборі правил ми вже поставили самим прев'юшки з тегом img відступи, щоб картинки не ліпилися одна до одної.

Зверніть увагу на запис - div.tumb img. Вона показує, що ми не просто якогось довільного тегом img задаємо ці правила, а саме тому, що входить в блок div з класом tumb.

Далі ми для тега p. знову ж таки, що входить в блок div з класом tumb. задали розмір і колір шрифту, поля і відступи і - найважливіше - вказали в якості фону другу нашу чудову картинку. При цьому крім заборони на повтор ми показали її координати щодо осей х і у. 0 і 100% відповідно.

Тобто, незважаючи на розмір наших превьюшек і описового тексту (в розумних межах звичайно), ця фонова картинка завжди буде показувати свою нижню частину і правий край, автоматично підлаштовуючись під довжину і ширину прев'юшки.

Ось, власне, і все!

Ще порада: не робіть з превьюшек посилання просто на картинку в такий-то папці. Оформіть кожну фотографію на окремій сторінці, з більш детальним описом і посиланням повернення на головну сторінку. Це буде набагато красивіше і правильніше, ніж сиротливо приліплена до лівого верхнього кута фотка в вікні браузера.

Готовий приклад галереї можна подивитися тут: Фотогалерея, приклад на CSS.

Сподіваюсь вам сподобалось. Enjoy!