Простая фотогалерея на 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!

Вебсовет

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (8) на запись “Простая фотогалерея на 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

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

  5. Zina 22.11.2008 22:31

    Спасибо большущее, искала именно такое оформление!
    Ура!!!

  6. Зарина 03.03.2009 22:37

    очень симпатичная галерея.. использовала ее на сайте, большое спасибо! но вопрос такой: этот самый тег float: left;, позволяющий задавать обтекание справа, при расположении картинок в 3 колонки, дает смещение 2-х картинок вниз, и что характерно, только во втором ряду.. Попыталась сделать обтекание слева (float: right;) - опера и файрфокс отображают все верно.. а эксплорер опять смещает.. http://www.grand-n.ru/gallery.html - здесь можно посмотреть как это все выглядит.. Можно как-то обойти эту неприятность?? Пожалуйста, посоветуйте, как это сделать?

  7. Зарина 04.03.2009 11:22

    скорее всего, проблема возникает, когда фотографии выводятся в нечетное количество колонок.. при выводе в 2 или в 4 колонки, все отображается корректно.. так что, придется оставить пока 2 колонки.

  8. Игорь Квентор 04.03.2009 16:21

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

Трэкбеки

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