Миниатюры (tumbnail) в сообщениях, настраиваемые по вашему размеру

ErikPshat · 29.10.2012, 06:31

Миниатюры можно вставлять в сообщениях через код [DECOR]
Вот такой примитивный пример:

PSP-E1000 TA-096

FB - Предохранитель подсветки экрана 2 шт - 1 с тыльной стороны + 1 с лицевой.
LB - Предохранитель питания USB 3 шт - 2 с тыльной стороны и 1 с лицевой.
TB - Предохранитель питания консоли 1 шт с лицевой стороны.

Щёлкните "Увеличить" на изображении, чтобы открыть его в новом окне.
Для просмотра в 100% масштабе, щёлкайте значёк мышки [+] в нужной части изображения.

Лицевая сторона: предохранители FB / LB / TB

Увеличить

Обратная сторона: предохранители подсветки экрана FB и USB LB

Увеличить

Вот такой код вставляем по нажатию кода декора

:

url(attachment.php?attachmentid=7915); background-size: cover; width: 200px; height: 150px

url(attachment.php?attachmentid=7915) вы можете вставить потом, это ссылка на картинку бэкграунда, который будет отображаться в сообщении, как Тумбнейл (миниатюра).
background-size: cover - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
width: 200px; height: 150px - собственно размеры блока Декора.

Далее, внутри, между тегами Декора, помещаем слово "Увеличить" и обрамляем его ссылкой на полномасштабное изображение, собсно ту же самую картинку, что ставили в бэкграунд, только с полным путём.
Ну тут можно приукрасить увеличение, на сколько хватает фантазии, можно вместо слова увеличить повесить картинку с +сиком, либо поместить надпись в любое место блока, на надпись повесить свой фон, цвет и т.д., благо код Декора позволяет производить всё, что угодно.

ErikPshat · 29.10.2012, 09:20

Вот такой код с иконкой лупы с плюсиком:

[DECOR="url(http://s.pikabu.ru/images/big_size_comm/2012-06_6/13407242629490.jpg); background-size: cover; width: 200px; height: 150px"]
   [FLOAT="right"]
      [URL="http://s.pikabu.ru/images/big_size_comm/2012-06_6/13407242629490.jpg"]
         [IMG]https://www.pspx.ru/forum/images/icons/zoom.png[/IMG]
      [/URL]
   [/FLOAT]
[/DECOR]

Иконка лежит на форуме здесь:

Код декора - тот же.
Просто ставите картинку лупы, обрамляете её ссылкой на полномасштабную картинку, затем выравниваете по правому краю с помощью FLOAT.

Вообще можно сделать отдельным BB-кодом.

**vash** · 29.10.2012, 12:20

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

ErikPshat · 29.10.2012, 16:54

Сообщение от vash

А Декором только модераторы и админы могут пользоваться.

Да нет, декором все могут пользоваться. У кого мозги есть, тот подсмотрит код в других сообщениях через цитату.

Другие пользователи просто не видят кнопок Декора и таблиц в форме ответа, а использовать код все могут.

**vash** · 29.10.2012, 17:05

Сообщение от ErikPshat

У кого мозги есть, тот подсмотрит код в других сообщениях через цитату.

Таких, моё ИМХО, единицы (я не про мозги). Не в обиду будет сказано, до такого не каждый модератор-то дотумкает (вот я точно не знал).

ErikPshat · 29.10.2012, 17:26

Сообщение от vash

Djordj10, при простом форматировании карты памяти в ПСП с кастомной прошивкой появляются такие папки:

Всего остального не должно быть, скинь скриншот того, что у тебя получается.

vash, ты в декоре, между тегами, убирай перенос на новую строку. Потому что переносы учитываются и картинка лупы сдвигается на новую строку.
Я так код написал для визуального просмотра, чтобы видно было, где открывается тег, а где закрывается, т.е. чтобы было более понятно, а не всё в кучу.

На самом деле перенос строки (ENTER) не нужен, это в HTML переносы не учитываются, а в BB-кодах учитываются. Пробелы не учитываются.
Твой код должен был выглядеть так:

**COOLERbyPSP** · 29.10.2012, 20:44

Лупа как-то не вписывается =\
Иконочку бы попроще

ErikPshat · 29.10.2012, 20:53

А чё с лупой? По-моему вполне нормально, по сравнению с самой миниатюрой вполне гигиенично смотрится.
Ну это первое, что попалось мне на глаза в Яндекс.Картинках.

COOLERbyPSP, ты смотрел тег в последнем посту?

Сообщение от COOLERbyPSP

Иконочку бы попроще

В смысле? Поменьше, без прозрачности, чтобы никто не догадался, что именно там нужно нажать для увеличения?

Эмм, напись отображается при наведении на лупу: "Нажмите для увеличения"?

**KirJan-DeSign** · 29.10.2012, 21:24

Сообщение от ErikPshat

попалось мне на глаза в Яндекс.Картинках.

ая-яй)))) а что-то из этих не подойдёт?

Search big.pngSearch litle.pngzoom+.pngSearch wave.pngloading.gifloading_anim.gif

ErikPshat · 29.10.2012, 21:32

Ну давай потестим, какая лучше подходит...

Пока нравится моя, как более наглядная и бросающаяся в глаза.
И ещё зелёненькая, но мелковатая и плохо видимая, т.е. пользователь не сразу поймёт, что это такое и для чего.

Всё равно, моя лучше и я бы ей дал бы 1-ое место!!!

Какие ещё будут предложения? А то пришли, обосрали и ушли, а сами предложить чего-то более стоящего не могли )))

**KirJan-DeSign** · 29.10.2012, 21:37

[QUOTE=ErikPshat;1052626]Ну давай потестим, какая лучше подходит...

ну вот ВТОРАЯ с анимацией как на телефонах или камерах уже настраивает на манипуляции с картинкой), и ПЕРВАЯ с зелёным плюсиком вроде норм.

ErikPshat · 29.10.2012, 22:00

ОК! Вот эта мне нравится. Она и анимированная, и видно, что сама миниатюра не анимированная, а иконка "настроек" крутится )))

Сообщение от KirJan-DeSign

ну вот ВТОРАЯ с анимацией как на телефонах или камерах уже настраивает на манипуляции с картинкой), и ПЕРВАЯ с зелёным плюсиком вроде норм.

А ваще мне индеец понравился

**KirJan-DeSign** · 29.10.2012, 22:02

Сообщение от ErikPshat

ОК! Вот эта мне нравится. Она и анимированная, и видно, что сама миниатюра не анимированная, а иконка "настроек" крутится )

ну спасибо)))
а что по поводу бреда ?:
https://www.pspx.ru/forum/showpost.ph...4&postcount=18

ErikPshat · 29.10.2012, 22:08

Сообщение от KirJan-DeSign

а что по поводу бреда ?:
https://www.pspx.ru/forum/showpost.ph...4&postcount=18

Ну это уже наш BB-код преобразуется в HTML. Там же код Декора уже написан на HTML, это он и есть.

Здесь же, BB-код [RESIZE] написан другим способом, без Декора, правда пришлось ещё добавлять внутрь таблицу, т.к. лупа никак не хотела перемещаться в правый внерхний угол.