Простая фотогалерея на CSS

21.12
2007

Рубрики: Верстка |

fotogallery.jpg

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

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

Но если вы хотите просто разместить на своем сайте несколько фоток с подписями, то это очень леххко и красиво можно оформить с помощью CSS, что мы сейчас и сделаем.

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

tumb01.gif   tumb02.gif

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превьюшки. Так как и сами превьюхи могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость. А именно: привяжем первую картинку фоном непосредственно к превьюшке, то есть к тэгу img, а вторую — к тэгу p, который задействуем для подписи. В результате нижний край превьюшки будет всегда на одном и том же расстоянии от подписи.

Еще нам понадобятся сами превьюшки. Их мы нарежем из фоток, сделаем для простоты одинакового размера и сложим все в общую кучу, то есть одну папку. Фотки мы разместим каждую на своей отдельной странице, с которой будет возврат на главную при помощи кнопки BACK.

Итак, запишем для начала код нашей главной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Фотогалерея | Урок с сайта Websovet.com</title>
</head>
<body>
<div id="header"></div>
<div id="container">
<div class="tumb">
<a href="foto1.html"><img src="1_sm.jpg" alt="okno_v_nebo" /></a>
<p>Окно в небо</p>
</div>
<div class="tumb">
<a href="foto2.html"><img src="2_sm.jpg" alt="zloy_indeets" /></a>
<p>Злой индеец</p>
</div>
<div class="tumb">
<a href="foto3.html"><img src="3_sm.jpg" alt="pod_krylom_samoleta" /></a>
<p>Под крылом самолета</p>
</div>
<div class="tumb">
<a href="foto4.html"><img src="4_sm.jpg" alt="nasyp_kamney_na_pirse" /></a>
<p>Насыпь камней на пирсе</p>
</div>
<div class="tumb">
<a href="foto5.html"><img src="5_sm.jpg" alt="tsvetushy_kust" /></a>
<p>Цветущий куст</p>
</div>
<div class="tumb">
<a href="foto6.html"><img src="6_sm.jpg" alt="goryachaya_kamennaya_baba" /></a>
<p>Горячая каменная баба</p>
</div>
</div>
</body>
</html>

Код совсем простой. Мы опять же поместили содержимое страницы в “коробочку” — container, которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div-ом с классом tumb. Рассмотрим теперь подробнее лист стилей CSS:

* {
margin: 0;
padding: 0;
border: 0;
}

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!

Вебсовет

Digg it Bookmark it Stumble it add to technorati

Комментарии

Комментарии (4) на запись “Простая фотогалерея на CSS”

  1. Travinka 22.12.2007 15:24

    Здорово! Галерейка вышла симпатишная!

  2. Kventor 22.12.2007 16:49

    Спасибо! :) Думаю, эту темку мы продолжим и добавим еще несколько интересных фишек.

  3. Серега 30.03.2008 08:41

    Прикольно! Спасибо!

  4. Илья 03.08.2008 15:55

    Отлично! Это то, что непременно нужно для моей галереи!Больше всего радует, когда от статьи идет ссылка на конкретный пример, очень наглядно!

Трэкбеки

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




Поиск

Рубрики

Пузомерки





Blog Catalog

DMOZ

Каталог дизайнерских блогов