Техническая поддержка сервиса Quadro.Boards

Объявление

Идет поиск Хранителя форума

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Мини-галерея с авто-уменьшением изображений (HTML+CSS3)


Мини-галерея с авто-уменьшением изображений (HTML+CSS3)

Сообщений 1 страница 2 из 2

1

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

http://i017.radikal.ru/1106/6b/8e39f7aafcf2.jpg

В галерею в качестве показателя вставлена вот такая вот картинка: http://forumd.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="http://forumd.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

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

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

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

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

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

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

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

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

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

       <td>
        <div class="gall_row2">
        <a href="#"><img src="http://forumd.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_". %-)

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

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

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

<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="http://forumd.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 с права по центру
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 до неузнаваемости.

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

-1

2

Скажите, а можно ли создать галерею индивидуально для каждого посетителя? То есть чтобы он сам мог загружать какие хочет картинки, наподобие фотоальбомов, но не в форме ответа, а на пустой странице?  :blush:

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Мини-галерея с авто-уменьшением изображений (HTML+CSS3)


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC