Простая фотогалерея на CSS PDF Печать E-mail

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

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

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

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

tumb01.gif   /images/stories/Prostaya-fotogalereya-na-CSS/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% соответственно. То есть, несмотря на размер наших превьюшек и описательного текста (в разумных пределах конечно), эта фоновая картинка всегда будет показывать свою нижнюю часть и правый край.

Вот, собственно, и все! Еще совет: не делайте с превьюшек ссылку просто на картинку в такой-то папке. Оформите каждую фотографию на отдельной странице, с более подробным описанием и ссылкой возврата на главную страницу. Это будет гораздо красивее и правильнее, нежели сиротливо прилепленная к левому верхнему углу фотка в окне браузера.

Автор: Игорь Квентор

По материалам сайта: http://www.websovet.com/

< Предыдущая   Следующая >