Демо можно посмотреть тут: http://oaotr.0pk.ru/pages/gallery_1
Скриншот для ленивых :

В галерею в качестве показателя вставлена вот такая вот картинка: https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg (у вас, конечно, картинки могут быть абсолютно разные)
Вы можете наблюдать авто-подгон размера с маленькими превью и увеличением при наведении.

Код галереи
HTML (вставлять туда, где вы хотите разместить галерею)

<table  id="mini_gallery">
 <tr>
  <td class="gall_con">
   <div class="name">
      <table class="gt">
       <tr>
       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>
       </tr>
       <tr>
       <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>

       <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>

       <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>

       <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>

       <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>

       <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>
       </tr>
      </table>
   </div>
  </td>
 </tr>
</table>

CSS (вставлять в html-верх)

<style>
#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;}

#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;}
</style>

HTML-настройка
описываю очень подробно специально, чтобы все, кто захочет, мог поменять классы и айдишники на свои, ибо я себя прокляла при настройке цсс из-за того, что мой мозг догадался почти каждый элемент называть через "gall_".

создание каркаса галереи
Делаем табличку, которая будет хранить галерею:

В табличку помещаем котейнер, который будет хранить все содержимое галереи. (а зачем? а затем, чтобы самые сообразительные могли поставить что-нибудь над или под контейнером галереи, задав стиль через табличку. )

Внутрь контейнера помещаем еще одну табличку, которая будет содержать сами картинки и описания. (если не понятно, как делать таблицу по аналогии с этим кодом, то изучайте это: Подробный FAQ по самостоятельному составлению HTML-таблицы)
количество ячеек и строк, само собой, делаем под себя.

внутрь ячеек помещаем контейнеры и назначаем им классы.
ВНИМАНИЕ! для новичков: для достижения результата как на демо, вы должны назначить одинаковые классы для контейнеров из одной строки. вот так:

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

заполнение галереи

красное - ссылка при клике на картинку
синее - ссылка на отображаемую картинку
зеленое - текст под картинкой (не обязательно текст, можно вообще любой html-код пихать)

CSS-настройка
FAQ для новичков
самый частые вопросы - это как поменять фон и как настроить границы. чтобы в каждом куске кода не упоминать, описываю здесь настройки.

настраиваем фон:

если заливка не нужна (прозрачный цвет) вместо отмеченного красным пишем 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 с права по центру
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 - Все параметры правой рамки
Примеры:

разбор CSS галереи
разбираю css-код по кускам в том порядке, в котором он выложен выше

задает стиль таблички, внутри которой все находится
красное - ширина, синее - отступы от краев

задает позиционирование контейнера, содержащего галерею
жирная цифра - "высота галереи"

параметры таблички-галереи относительно контейнеров, которые ее содержат
красное - ширина (лучше в процентах указывать. будет брать проценты от ширины, указанной в первом куске кода)
синее - минимальная высота и ширина ячеек (которые содержат контейнеры с картинкой и описанием).

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

задает параметры контейнеров, содержащих картинку и описание.
красное - ширина, синее - высота, зеленое - отступы друг от друга, розовое - фон

это та самая "магия", которая уменьшает картинку до иконки.
управляем циферками, если вам нужно поменять размер иконок.

убирает текст-описание на превью. благодаря этому куску оно видно только при наведении курсора на картинку.

обратите внимание на красное: при создании каркаса мы задавали отдельные классы для контейнеров в первой и второй строках - теперь мы в CSS задаем разные стили для всплывающих окошек в одной и второй строке, а именно, места, где они всплывают (синее). если у вас галерейка в столбик, а не в строчку, то вам очень внимательно надо отнестись к этим отступам!
и еще немного о настройках всплывающих окон:

красное - фон, синее - ширина, зеленое - высота, розовое - отступы;
салатовое - волшебство CSS3 (нагло украдено с одной из галереек на сайте ruseller.com). Играться с настройками новичкам не советую, но "безвредные части" отметила жирным: border-radius - это закругление, box-shadow - это тень окошка.

это управляет картинкой, которая отображается в всплывающем окошке.
красное - максимальная ширина, синее - максимальная высота (даже если вы обоину огромную вывесили авто-уменьшение и тут работает );
зеленое - рамочка для красоты (уберите, если не надо. как настраивать рамки - описано выше)

размер шрифта в тесте-описании

ВСЕ!
надеюсь, не слишком мудрено для новичков и вполне оптимально для тех, кто желает изменить галерею с помощью CSS до неузнаваемости.

Отредактировано Герда (15.06.2011 14:49:50)