ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог гайдов, уроков, подборок » УРОК: Мини-галерея с авто-уменьшением изображений (HTML+CSS3)


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

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

1

Как всё это выглядит

https://i.imgur.com/oetLZyA.jpg

Картинки "упали", но суть работы уловить можно. Также демо под спойлером:

Свернутый текст

[html]<iframe src="http://sadhaka.moy.su/ForumDesign/mini-gallery.html" frameborder="0" scrolling="no"  height="200" width="650"></iframe>[/html]

В галерею в качестве показателя вставлена вот такая вот картинка:

http://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg

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


Код галереи
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)

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+4

2

О боже, сколько кодов. Разбираться нужно долго. А сильно грузит форум?

0

3

маскарад чувств
нет

0

4

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

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

5

Герда
Да? Хм, спасибо, спасибо. :) А о я мало что знаю о том, что и насколько сжирает трафик. Но следить за этим надо.  :D

0

6

маскарад чувств

сделаю статью о том, как делать сайт "легким".

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

7

А как сделать так, чтобы при увеличении картинки, она не становилась прозрачной?

0

8

Уже сами разобрались))

0

9

Герда написал(а):

сделаю статью о том, как делать сайт "легким".

Она уже существует? Если да, то где ее искать?

0

10

Элис
нет не существует

Подпись автора

Рады приветствовать Вас на просторах «Fantom - soul mirror».

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог гайдов, уроков, подборок » УРОК: Мини-галерея с авто-уменьшением изображений (HTML+CSS3)