Как всё это выглядит
Картинки "упали", но суть работы уловить можно. Также демо под спойлером:
[html]<iframe src="http://sadhaka.moy.su/ForumDesign/mini-gallery.html" frameborder="0" scrolling="no" height="200" width="650"></iframe>[/html]
В галерею в качестве показателя вставлена вот такая вот картинка:
(у вас, конечно, картинки могут быть абсолютно разные)
Вы можете наблюдать авто-подгон размера с маленькими превью и увеличением при наведении.
Код галереи
HTML (вставлять туда, где вы хотите разместить галерею)
CSS (вставлять в html-верх)
HTML-настройка
описываю очень подробно специально, чтобы все, кто захочет, мог поменять классы и айдишники на свои, ибо я себя прокляла при настройке цсс из-за того, что мой мозг догадался почти каждый элемент называть через "gall_". 
создание каркаса галереи
Делаем табличку, которая будет хранить галерею:
<table id="mini_gallery">
<tr>
<td class="gall_con">
</td>
</tr>
</table>
В табличку помещаем котейнер, который будет хранить все содержимое галереи. (а зачем? а затем, чтобы самые сообразительные могли поставить что-нибудь над или под контейнером галереи, задав стиль через табличку. 
)
<table id="mini_gallery">
<tr>
<td class="gall_con">
<div class="name">
</div>
</td>
</tr>
</table>
Внутрь контейнера помещаем еще одну табличку, которая будет содержать сами картинки и описания. (если не понятно, как делать таблицу по аналогии с этим кодом, то изучайте это: Гайд: Таблицы)
количество ячеек и строк, само собой, делаем под себя.
<table id="mini_gallery">
<tr>
<td class="gall_con">
<div class="name">
<table class="gt">
<tr>
<td>
строка_1 ячейка_1
</td>
<td>
строка_1 ячейка_2
</td>
<td>
строка_1 ячейка_3
</td>
<td>
строка_1 ячейка_4
</td>
<td>
строка_1 ячейка_5
</td>
<td>
строка_1 ячейка_6
</td>
</tr>
<tr>
<td>
строка_2 ячейка_1
</td>
<td>
строка_2 ячейка_2
</td>
<td>
строка_2 ячейка_3
</td>
<td>
строка_2 ячейка_4
</td>
<td>
строка_2 ячейка_5
</td>
<td>
строка_2 ячейка_6
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
внутрь ячеек помещаем контейнеры и назначаем им классы.
ВНИМАНИЕ! для новичков: для достижения результата как на демо, вы должны назначить одинаковые классы для контейнеров из одной строки. вот так:
<table id="mini_gallery">
<tr>
<td class="gall_con">
<div class="name">
<table class="gt">
<tr>
<td>
<div class="gall_row1">
</div>
</td>
<td>
<div class="gall_row1">
</div>
</td>
<td>
<div class="gall_row1">
</div>
</td>
<td>
<div class="gall_row1">
</div>
</td>
<td>
<div class="gall_row1">
</div>
</td>
<td>
<div class="gall_row1">
</div>
</td>
</tr>
<tr>
<td>
<div class="gall_row2">
</div>
</td>
<td>
<div class="gall_row2">
</div>
</td>
<td>
<div class="gall_row2">
</div>
</td>
<td>
<div class="gall_row2">
</div>
</td>
<td>
<div class="gall_row2">
</div>
</td>
<td>
<div class="gall_row2">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
те, кто хорошо оперирует с CSS могут хоть для каждой ячейки отдельный класс задать. это позволит вам делать совершенно разные настройки для всплывающих окошек.
заполнение галереи
<td>
<div class="gall_row2">
<a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
<span>текст-описание</span>
</div>
</td>
красное - ссылка при клике на картинку
синее - ссылка на отображаемую картинку
зеленое - текст под картинкой (не обязательно текст, можно вообще любой html-код пихать)
CSS-настройка
FAQ для новичков
самый частые вопросы - это как поменять фон и как настроить границы. чтобы в каждом куске кода не упоминать, описываю здесь настройки.
настраиваем фон:
элемент {background: #цвет url(ссылка на картинку)}
если заливка не нужна (прозрачный цвет) вместо отмеченного красным пишем transparent
Возможно добавить в код дополнительные функции
(вставлять исключительно после ссылки на картинку (закрывающейся круглой скобки) не забывая ставить точку с запятой как разделитель)
background-attachment: fixed - не прокручивающееся фоновое изображение
no-repeat - фоновое изображение прокручивается используя только один элемент (картинку) без повторов
repeat - фоновое изображение повторяется по горизонтали и вертикали.
repeat-x - фоновое изображение повторяется только по горизонтали
repeat-y - фоновое изображение повторяется только по вертикали
background-position: top center - фоновое изображение располагается по центру (вверху)
background-position: top left - верху слева
background-position: right top - верху справа
background-position: left слева по центр
background-position: rightм с права по центру
[mark]background-position: bottom left - внизу слева
background-position: bottom - внизу
background-position: bottom right - внизу справа
настраиваем границы:
border-color - Цвет рамки
border-width - Толщина рамки
border-style - Стиль оформления рамки всех сторон рамки. Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона
border-top - Все параметры верхней рамки
border-bottom - Все параметры нижней рамки
border-left - Все параметры левой рамки
border-right - Все параметры правой рамки
Примеры:
элемент {border: #FF0000 dashed 2px;}
элемент {border-top: #FF0000 dashed 0px; border-bottom: #FF0000 dashed 0px; border-left: #FF0000 dashed 2px; border-right: #FF0000 dashed 2px; }
разбор CSS галереи
разбираю css-код по кускам в том порядке, в котором он выложен выше
#mini_gallery {width: 500px; height: auto; margin: 5px;}
задает стиль таблички, внутри которой все находится
красное - ширина, синее - отступы от краев
#mini_gallery td.gall_con .name {position: relative; height: 135px;}
задает позиционирование контейнера, содержащего галерею
жирная цифра - "высота галереи"
table.gt {width: 100%;}
table.gt td {min-width: 60px; min-height: 60px;}
параметры таблички-галереи относительно контейнеров, которые ее содержат
красное - ширина (лучше в процентах указывать. будет брать проценты от ширины, указанной в первом куске кода)
синее - минимальная высота и ширина ячеек (которые содержат контейнеры с картинкой и описанием).
#mini_gallery td.gall_con {width: 270px; padding: 5px; vertical-align: top; background: url() #54504F;}
задает параметры для ячейки, в которую запихнута табличка с галереей. таким образом можно настроить "задник" галереи.
красное - ширина, синее - отступы, зеленое - фон
#mini_gallery td.gall_con .gall_row1, #mini_gallery td.gall_con .gall_row2 {width: 50px; height: 50px; padding: 5px; background: #ffffff url() repeat;}
задает параметры контейнеров, содержащих картинку и описание.
красное - ширина, синее - высота, зеленое - отступы друг от друга, розовое - фон
#mini_gallery td.gall_con .gall_row1 img, #mini_gallery td.gall_con .gall_row2 img {max-width: 50px; max-height: 50px; margin: auto; }
это та самая "магия", которая уменьшает картинку до иконки. 
управляем циферками, если вам нужно поменять размер иконок.
#mini_gallery td.gall_con .gall_row1 span, #mini_gallery td.gall_con .gall_row1 span a, #mini_gallery td.gall_con .gall_row2 span, #mini_gallery td.gall_con .gall_row2 span a {display: none;}
убирает текст-описание на превью. благодаря этому куску оно видно только при наведении курсора на картинку.
#mini_gallery td.gall_con .gall_row1:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -45px; margin-left: -45px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}
#mini_gallery td.gall_con .gall_row2:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -30px; margin-left: -30px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}
обратите внимание на красное: при создании каркаса мы задавали отдельные классы для контейнеров в первой и второй строках - теперь мы в CSS задаем разные стили для всплывающих окошек в одной и второй строке, а именно, места, где они всплывают (синее). если у вас галерейка в столбик, а не в строчку, то вам очень внимательно надо отнестись к этим отступам!
и еще немного о настройках всплывающих окон:
#mini_gallery td.gall_con .gall_row1:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -45px; margin-left: -45px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}
красное - фон, синее - ширина, зеленое - высота, розовое - отступы;
салатовое - волшебство CSS3 (нагло украдено с одной из галереек на сайте ruseller.com). Играться с настройками новичкам не советую, но "безвредные части" отметила жирным: border-radius - это закругление, box-shadow - это тень окошка.
#mini_gallery td.gall_con .gall_row1:hover img, #mini_gallery td.gall_con .gall_row2:hover img {max-width: 130px !important; max-height: 130px !important; margin: auto; border: 1px dashed #000000;}
это управляет картинкой, которая отображается в всплывающем окошке.
красное - максимальная ширина, синее - максимальная высота (даже если вы обоину огромную вывесили авто-уменьшение и тут работает );
зеленое - рамочка для красоты (уберите, если не надо. как настраивать рамки - описано выше)
#mini_gallery td.gall_con .gall_row1:hover span, #mini_gallery td.gall_con .gall_row2:hover span {font-size: 12px; display: block;}
#mini_gallery td.gall_con .gall_row1:hover span a, #mini_gallery td.gall_con .gall_row2:hover span a {font-size: 12px;}
размер шрифта в тесте-описании
ВСЕ!
надеюсь, не слишком мудрено для новичков и вполне оптимально для тех, кто желает изменить галерею с помощью CSS до неузнаваемости.
Отредактировано Герда (11.11.12 12:20)
