[FAQ] bb-код [SLIDER] - анимированные картинки в сообщениях на форуме

[ErikPshat]

Слайдер v1.99 (устарело)

В ообщем побаловался сегодня ночью немного с ББ-кодом картинок. Выбрал анимированный эффект с FX. Но что-то не особо впечатляет, т.к. из-за них форум движется ))) А это опять нужно бороться с движением. Да и скорость у меня слабая, может поэтому всё выглядет не так. И в спойлере почему-то не так работают. Если есть идеи, предлагайте. Не будет идей, тогда к вечеру уберу эту затею.

При наведении мышки на картинку, она замерзает, пока не уберёте мышку.
Можно остановить принудительно ротацию, нажав "Стоп".
Можно просто просматривать нужные картинки по пронумерованным кнопочкам слева внизу.

Действие аналогично как в листинге[LIST].
Но здесь не получается реализовать всё в одном теге. Поэтому используются 2 вида тегов:

1. [animate-name="Название_Анимации"]...[/animate-name] - В опцию вписывается время название анимации без_пробелов! Этот тег обрамляет список картинок в тегах [animate=""][img]...[/img][/animate"], аналогично тегу[LIST].

2. [animate="fadeIn, fadeOut"]...[/animate"] - в этот тег уже вставляются ссылки на картинки в теге [IMG]. В опциях, через запятую вставляются 2 вида эффектов - входящий (In) и выходящий (Out). Все виды возможных эффектов можно посмотреть здесь.

Виды возможных эффектов: Attention seekers flash bounce shake tada swing wobble pulse Flippers (currently Webkit, Firefox Nightlies, IE10 only) flip flipInX flipOutX flipInY flipOutY Fading IN (входящий) fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig Fading OUT (выходящий) fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig Bouncing IN (входящий) bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight Bouncing OUT (выходящий) bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight Rotating IN (входящий) rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight Rotating OUT (выходящий) rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight Specials hinge rollIn rollOut

Слайдер v2.00 (устарело)

Убрали из-за невозможности выставить свой размер окна слайдера.
Лишняя красивая рамка так же отнимала рабочее пространство.
Из преимуществ - возможность указания названия слайдера (уникальный ID, в результате возможность многократного использования на странице без конфликтов с другими слайдерами)
Оставлен для истории: https://www.pspx.ru/forum/AnythingSli...mes/index.html

Действие аналогично как в листинге[LIST].
Используются 2 вида тегов:

1. [slider-name="Название_Анимации"]...[/slider-name] - В опцию вписывается название слайдера без_пробелов! Этот тег обрамляет список картинок в тегах [slider=""]http://img.jpg[/slider"], аналогично тегу[LIST].

2. [slider="Описание картинки"]...[/slider"] - в этот тег уже вставляются ссылки на картинки (в чистом виде (без тега [IMG]). В опцию, пишем краткое описание или титры, которые потом будут появляться над картинкой выплывающим вниз эффектом.

Ограничения! В ББ-коде нельзя делать переносы на новую строку, то есть весь код должен идти непрерывно. Иначе на каждый перенос будет добавляться 2-ной перенос и окно картинок будет увеличиваться в высоту с прогрессией.

Телевизор для форума v3.0

Эталон

• Нажми на звёздочки справа, чтобы посмотреть картинку в полный размер ***
  
• Если тебе не нравится эта надпись, нажми крестик в правом углу -> ***
  
• В нижнем правом углу можно включить/отключить AutoPlay ***
  
• В нижнем левом углу можно смотреть картинки выборочно, нажимая на точечки ***
  
• Можно поменять фон под слайдером, проводя мышкой по палитре внизу ***
  
• Картинки вставляются в тег [slider-size=*width:640;height:360*] ***
  
• В опцию вписываем размеры по ширине и высоте ***
  
• Внутрь этого тега вставляем тег листинга [slider=*Описание картинки*] ***
  
• Внутри тега [slider] вставляем прямую ссылку на картинку ***
  
• Одновременно эта ссылка появится после описания при клике на звёздочки ***
  
• У меня глаз-алмаз, поэтому я тебя щас приворожу! ***
  
• Ох, эта сучка меня приворожила :( ***
  

Действие аналогично как в листинге [LIST].
Используются 2 вида тегов:

1. [slidersize="width:640px;height:360px"]...[/slidersize] - в опцию вписываются размеры слайдера по ширине и высоте (через точку с запятой, без пробелов). Этот тег обрамляет список картинок в тегах пункта №2 ниже, аналогично тегу [LIST].

2. [slider="Описание картинки"]...[/slider"] - в этот тег уже вставляются ссылки на картинки в чистом виде (без тега [IMG]). В опцию, пишем краткое описание или титры, которые потом будут появляться над картинкой выплывающим вниз эффектом.

Примечание: Если не требуется вставлять описание к картинке, то 2-ой вид тега не нужен. Можно просто вставлять картинку в теге [IMG] или [ATTACH](из вложения данного сообщения).

Ограничения! В ББ-коде нельзя делать переносы на новую строку, то есть весь код должен идти непрерывно. Иначе на каждый перенос будет добавляться 2-ной перенос и окно картинок будет увеличиваться в высоту с прогрессией. Допускаются только пробелы между ББ-кодами.

[ErikPshat]

COOLERbyPSP

Сообщение от COOLERbyPSP но сжимать и так сжатое...

Можно не сжимать, а сжатое просто преобразовать в другое состояние и родить новое существо, лёгкое по весу, наиболее приспособленное к вебу.

Сообщение от COOLERbyPSP Убиваю 2х зайцев, показывая качество картинки.

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

Я тоже люблю извращения с PNG, но только в тех случаях, когда это даёт несомненное преимущество в размере. И это не тот случай, когда для женщины размер имеет значение. В каждом случае нужно исходить из уместности применения факторов, с логически выстроенной последовательностью избирательности важных звеньев, для построения нового конечного преобразования материи в единственно верное заключение. Это как раз тот случай, когда, после множества плавающих запятых, нужно заставить центральный процессор, находящийся на несколько уровней выше заднего прохода, поставить определённую точку.

---

Ну и исходя из возможностей форматов, внимательно посмотрев на рисунок, мой процессор, моими окулярами, видит на этой картинке огромное множество однотонных материй, а так же, подсчитывает количество однородных цветов и плавных переходов от одного цвета к другому:

1,4 KБ (1*420 байт)

PNG.png

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

Но, просто тупо пересохранить файл в PNG любым графическим редактором - это на самом деле тупо. Мы же видим, что нету плавных переходов между цветами и на картинке используется совсем небольшое количество цветов, а именно 5. Поэтому даём команду редактору сохранять только указанное количество цветов:

Преобразование в цветное с указанным количеством цветов

Эту картинку по любому пришлось выложить в PNG, т.к. JPG не поддерживает прозрачность. А у меня окошко справа выходит за пределы изображения, поэтому, чтобы не захватить лишний фон под этими пределами в картинку, сохранял в PNG с прозрачностью.

Преобразовать в цветное 8 цветов.png

А так как здесь нету плавных переходов между цветами, то нет никакой необходимости использовать сглаживание Floyd Steindberg, которое по умолчанию выставляется в том же окне.

В JPG можно ведь преобразовать PNG вообще без изменения качества, тот же lossless. Есть такая функция у JPG - 100% качество, т.е. без удаления соседних пикселей. Правда размер от этого значительно не уменьшится.

Но можно умеренно снизить коэффициент качества так, что как бы ты не присматривался, но разницы не увидишь. Зато значительно съэкономишь в размере и с комфортом для других покажешь своё творение, и наглядно продемонстрируешь качество выложенного видео.

Для сравнения вот 2 наглядных примера. Загадка называется: ...

...Найди 2 отличия...

Как видно, основная часть изображения одного голубого оттенка, НО!, происходит плавный переход от одного оттенка к другому. А это на самом деле несколько тысяч отдельных цветов, с чем никак положительно не справится архиватор PNG.

А вот формат JPG с лёгкостью удалит соседние схожие пиксели, коих тут то же навалом и покажет изображение аналогично исходному. Использовалось удаление информации следующими опциями:

• Качество: 85%
• Метод DCT: Медленный
• Коэффициент: 0
• Дискретизация: 2х2,1х1,1х1 (по умолчанию)
• Не прогрессивный
• По алгоритму Хоффмана

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

PNG 173 KБ (176*857 байт) vs JPG 29 KБ (29*327 байт)
Flower.png Flower.jpg

Разница в 6 раз ощутима!
И это наиболее важный фактор даже для современного интернета.

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

Эмм, как бы я понимаю, что ты уже продвинутый гуру в этом вопросе. Однако твоё преклонение к формату PNG несколько не соответствует статусу "Гуру". В частности, это краткое выступление, по большей части, написано для наших маленьких друзей, молодых новобранцев, вступающих на путь истинный и праведный.

[ErikPshat]

Сообщение от COOLERbyPSP Единственная проблема - слайдшоу не 1 в 1 по размеру. И это самое...можно обойтись без рамочки вокруг рамочки?))

Я так подумал, что делать слайдер размером 960х544 слишком круто для нашего форума. Ведь есть и другие разделы, где не требуется такое разрешение. Да и размер 700х390 думаю вполне подходящий - не слишком огромный и не совсем маленький.
Тут происходит автомасштабирование, т.е. маленькие картинки растягиваются, а большие сжимаются. Это конечно не очень хорошо, но умнее я ничего не смог придумать. Можно подумать, о возможности вставки в ББ-код кастомного размера по своему желанию.

Рамочка вокруг мне очень нравится. Без неё будет как-то не комфортно, как будто сидишь не в кинотеатре, а просто перед экраном старенького телевизора.
Ну если это будет массовое желание, тогда рамочку уберу.
И хочу убрать возможность изменения фона форума ))).
Стрелочки конечно я прикручу, они прячутся под картинкой почему-то, нужно выяснять, какое-то действие форума заставляет их делать невидимыми.

---

На предыдущей странице специально отфлудил несколько постов, чтобы выложить слайдер с новой страницы в шапке.
Тут смотрю за всё время никто так и не отписался о моём красивом телевизоре )). Я его так долго шлифовал и отрисовывал, старался целые сутки. По видимому никому не понравилась эта затея, дизайн и функции...

[riktus]

Ну почему же не понравилось? Вот это очень даже здорово. Еще бы его код посмотреть и было бы совсем хорошо.

[vash]

Сообщение от ErikPshat Тут смотрю за всё время никто так и не отписался о моём красивом телевизоре )). Я его так долго шлифовал и отрисовывал, старался целые сутки. По видимому никому не понравилась эта затея, дизайн и функции...

Вот ведь наворотил (в смысле: наваял, придумал, завернул...). Курсором мышки под телевизором поводить, фон страницы меняется:



Будет-ли востребован такой навороченный просмотр картинок? Может, попроще тоже оставить, как было ранее предложено?

[ErikPshat]

Сообщение от riktus Вот это очень даже здорово.

Ну вот это ещё здоровее ))) https://www.pspx.ru/forum/AnythingSli...mes/index.html
Там даже стрелочки навигации по бокам есть.

Сообщение от riktus Еще бы его код посмотреть и было бы совсем хорошо.

А что его смотреть? Скачай Index.html по ссылке из расширенного просмотра правой кнопкой "Сохранить как..." и увидишь весь код. Собственно телик работает на том же плагине AnythingSlider(там и факью есть и описание функций), как предыдущий наш слайдер. Просто я нарисовал примитивную темку в CSS3 с небольшим кодом, поэтому появилось новое оформление и функции.

---

Сообщение от vash Курсором мышки под телевизором поводить, фон страницы меняется

Ага, я уже писал об этом на предыдущей странице. Думаю убрать эту фичу.

Сообщение от vash Может, попроще тоже оставить, как было ранее предложено?

В смыслях?
Насчёт этих предложений?

Сообщение от COOLERbyPSP Единственная проблема - слайдшоу не 1 в 1 по размеру. Можно обойтись без рамочки вокруг рамочки?))

То есть, убрать лишнюю рамочку и сделать размер 960х544?

[COOLERbyPSP]

Сообщение от ErikPshat Можно подумать, о возможности вставки в ББ-код кастомного размера по своему желанию.

Я только "за"!

JPEG

Ну не любит он текст(

То есть, убрать лишнюю рамочку и сделать размер 960х544?

Угу, хотелось бы посмотреть на это. Ну и выбор фона нафиг, не вижу полезности, хоть и прикольно.
Просто опять же вернёмся к размеру и формату - с таким успехом можно и JPEG, при уменьшении размера этой рамкой сжатие в глаза не так бросится. Но тогда можно и просто брать PNG меньшего размера. Появляется вопрос - нафига делать скрины с рипа, если с таким же успехом можно взять скриншот откуда угодно. Либо постить JPEG с PNG по клику.
Война против джипега продолжается, но вот на такое я почти согласен:

Разница в размере ощутима, потери минимальны, а без увеличения не различимы. На 98 уже артефакты вокруг текста появляются =(
На низких SubSampling factor у него красный галстук тускнеет.
Ну и ещё оговорочка, PNG из примера после оптимизации 570Кб весит. Что тоже не конкурент по размеру JPEG 99%, согласен.

1185

Добавим.

Хоть и надо бы сменить эту картинку на что-нибудь более-менее, но речь не об этом.
Её с центра сместило вправо, BB-код CENTER вокруг неё отдельный.
И теперь мне нравится этот "телек", угодил

[ErikPshat]

Сообщение от COOLERbyPSP Сообщение от ErikPshat Можно подумать, о возможности вставки в ББ-код кастомного размера по своему желанию. Я только "за"!

Тогда придётся поменять какую-то опцию.

• Если сменить опцию описания, типа титров к картинке, тогда это сделает бездарной половину моей работы
• Если сменить опцию названия, тогда на странице можно помещать только 1 слайдер.

Сообщение от COOLERbyPSP То есть, убрать лишнюю рамочку и сделать размер 960х544? Угу, хотелось бы посмотреть на это. Ну и выбор фона нафиг, не вижу полезности, хоть и прикольно.

Если убрать рамочку, то это сделает бездарной ещё 4тверть моей работы
Если убрать выбор фона, то это ещё 4тверть в корзину.
Ну эти 4твертинки можно выкинуть или сделать фон только на рамочку, хотя хз.

Ну вот такой пример на время подогнал под размер 960х544.

[COOLERbyPSP]

Сообщение от ErikPshat Если сменить опцию названия, тогда на странице можно помещать только 1 слайдер

Не беда, по сути место такому слайдшоу (по крайней мере у меня в темах) только в шапке.

Сообщение от ErikPshat Если убрать рамочку, то это сделает бездарной ещё 4тверть моей работы

Ты сейчас про какую рамочку? Мне вот так нравится.

И страничка в 1280 по ширине вписывается, нормально.

Я только 2 косяка вижу, глядя на "эталон"
Там фейды из картинки в картинку и нормально отображающиеся стрелочки. На форуме пока не вижу такого

[ErikPshat]

Сообщение от COOLERbyPSP Не беда, по сути место такому слайдшоу (по крайней мере у меня в темах) только в шапке.

Ну и получается, что слайдер делается только под тебя, ибо картинки такого размера мало кто будет выкладывать.

Кстати, описание к картинкам в твоей теме не увидел. Или они не отображаются или ты оставил это поле опции пустым.

ОК, думаю сделать опцией ширину и высоту - думаю это будет лучший и универсальный выход.
Синтаксис будет такой: [width: 960px; height: 544px] (через точку с запятой)

Щас подумаю немного и что-нибудь замучу...

P.S. Старый слайдер на предыдущей странице удаляю, ибо его коды перекликаются с новым. Новый вставлю в первое сообщение.

[COOLERbyPSP]

Сообщение от ErikPshat описание к картинкам в твоей теме не увидел

С фантазией плохо, нечего написать над скринами)

Сообщение от ErikPshat картинки такого размера мало кто будет выкладывать

Поэтому я и за настраиваемый размер. Скриншоты можно и нужно не только в темах с видео выкладывать, но и в игровых. В идеале)

ОК, думаю сделать опцией ширину и высоту - думаю это будет лучший и универсальный выход.
Синтаксис будет такой: [width: 960px; height: 544px] (через точку с запятой)
Я вижу)

[ErikPshat]

Сообщение от COOLERbyPSP С фантазией плохо, нечего написать над скринами)

Это очень хорошо Я думал, что без описания будет появляться всё равно пустое окно.

[COOLERbyPSP]

ErikPshat, забавы ради, если я ткну картинку, например, размером в 720х544 (приспичит анаморфное видео сделать) оно растянется до 960х544 при указании [width: 960px; height: 544px]? Или только окно подтянется?
Это мелочь, врядли я таким займусь (если только за жЫрный шумный Kill la Kill опять возьмусь) , просто интересно =)

[ErikPshat]

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

Что интересно, даже увеличенные картинки смотрятся без видимого растяжения.

[ErikPshat]

Пока верну как было. А вот и стрелочки, только к ним применяется скрипт форума выделения фона при наведении.

[vash]

Сообщение от ErikPshat В смыслях? Насчёт этих предложений?

ErikPshat, имелось ввиду, с чего всё начиналось - с простого слайд-шоу.

Я про это:

Сообщение от ErikPshat Планирую этот код внедрить в виде ББ-кода, чтобы вставлять в сообщения несколько картинок в один такой ротобан. Синтаксис будет элементарным - ссылки на картинки нужно будет просто вставлять в ненумерованный листинг: [LIST][*]Картинка 1[*]Картинка 2[*]Текст+Картинка 3[*]И т.д.[/LIST]

Но, благодаря твоим усилиям, тема выросла до "Телевизор для форума", а это уже совсем другое.

[ErikPshat]

Ну в общем обновлённый телик уже готов. Осталось только некоторые файлы обновить на серваке. Только Космик что-то не появляется. Наверное теперь уже вечером зальём и запустим.
Будет теперь на странице только один слайдер, т.к. вместо уникального названия будем вписывать ширину и высоту по своему усмотрению.
Синтаксис будет такой: [width: XXXpx; height: XXXpx] (через точку с запятой), как говорилось выше.

Да, в шапке уже полностью отшлифованная версия. Вроде работает, как надо. Обновление только уберёт лишнюю рамочку вокруг рамки экрана и управление фоном будет поуже и потоньше. Фон применяется только на сам телевизор.

[ErikPshat]

COOLERbyPSP, погоди. Только что обновили файлы на сервере.
Только ввожу новый слайдер.
Синтаксис нужно менять: [slider-size="width: XXXpx; height: XXXpx"][slider="Описание"]IMG[/slider][/slider-size]

И немного нужно подправить ББ-коды, чтобы правильно по новому работали...

[ErikPshat]

Ты забыл внутренности: [slider="Описание"]IMG[/slider]
И, кроме того, как уже говорилось, все другие слайдеры на одной странице не будут работать. И, к тому же, будут мешать первому. В частности, у меня в шапке выставлен размер 640х360, однако из-за ваших слайдеров мой размер изменился на 960х544.

Вот так они работают в идеале:

• Версия №2: https://www.pspx.ru/forum/AnythingSli...mes/index.html (прошлая версия - slider-name)
• Версия №3: https://www.pspx.ru/forum/AnythingSli...es/index2.html (текущая версия - slider-size)

[COOLERbyPSP]

Сообщение от ErikPshat Ты забыл внутренности: [slider="Описание"]IMG[/slider]

И без них работает.
https://www.pspx.ru/forum/showthread.php?p=1078838
С YouTube это теперь и правда телевизор

[ErikPshat]

Сообщение от COOLERbyPSP И без них работает.

Хмм, странно, смотрю в инспекторе, а тег LI к этим картинкам не добавляется, однако они работают )))

А для Ютуба тебе нужно использовать другой ББ-код: (width:960 height 544)