Простая фотогалерея на div-ах
28 Июнь 2008
Hello, world!
Открываю, наконец, собственный блоГ, а не какой-нибудь буржуйский ЖЖ. Перед вами сайтик, созданный за полдня, 12 часов 50 минут. Основное время при этом ушло на превьюшки для веб-дизайнов, рисунок сайта, верстка же xhtml заняла от силы минут 40. Хвала дивам. И вордпрессу тожу за простоту.
Единственное — не нашлось быстро плагина фотогалереи к вордпрессу :(, что для портфолио необходимо. Поэтому попробовала создать минимумом дивов простой стандарт галереи так, чтобы, ествественно, новые изображения помещались в начало галереи, а не в конец, как пришлось бы сделать при ручной верстке таблицами.
Код такой:
#gallery {width:100%; float:left; }
#gallery div {float:left; padding: 5px; width: 270px; height: 250px; } */Нужная ширина, высота ячейки с картинкой и текстом под ней, можно в процентах
#gallery img {width: 240px; height: 200px; } */Нужная ширина, высота превьюшек, если нужно сделать их одинаковыми
</style>
<div id=»gallery»>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
</div>
Вот и все. Достоинства такого решения простые:
1) мало кода,
2) картинки с подписями добавляются вверху без разрушения всей структуры;
3) при сужении экрана картинки выстраиваются в соотвествии с шириной этого экрана, что мне и требовалось.




10 Август 2008 в 17:18
Увлекательно. Подпишусь на РСС. А сколько времени ушло на написание статьи?
11 Август 2008 в 16:37
Павел, в отличие от создания сайтика, просто секунды)))))).
5 Сентябрь 2008 в 21:11
Я так понимаю, в самом последнем абзаце как раз таки вся соль и изложена
9 Сентябрь 2008 в 8:03
Интересно, а комментарии которые не нравятся автору здесь стирают?
9 Сентябрь 2008 в 10:19
Нет, Filin, а что — были прецеденты?