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

ErikPshat · 03.03.2014, 12:43

Слайдер 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 (устарело)

Телевизор для форума 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 · 04.03.2014, 01:33

COOLERbyPSP, думаю нет. Потому что эффект применяется к каждой картинке в отдельности.

ErikPshat · 04.03.2014, 02:48

COOLERbyPSP, твоя анимация то же работает на этой странице

Убрал время задержки и выставил по-умолчанию в 5 секунд.
Вместо этого в опцию теперь нужно вводить "Название_Анимации-БЕЗ_ПРОБЕЛОВ"
Соответственно изменил название ББ-кода: вместо [animate-duration="x"] тег называется [animate-name="Bla-Бла-Bla"]

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

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

Зато у нас испарился баг, что все другие слайдеры на странице переставали работать. И заодно пользователи не будут спрашивать каждый раз, "Чито за фигня?"
Хотя смотрю голосуют за один слайдер.

**COOLERbyPSP** · 04.03.2014, 02:57

[animate-name="Chuunibyou_demo_Koi_ga_Shitai"][animate="fadeInUp, fadeOutUp"]

Фейды теперь не пашут

ErikPshat · 04.03.2014, 03:26

COOLERbyPSP, ага, чито за фигня?

Какое отношение они имеют к названиям. Щас пороюсь.

Шорт, понял ошибку. Стиль анимации тоже имеет закреплённое название.
А там не поменял

#animate-duration так и осталось )))
Балин, придётся стиль так же вынести в опцию

Ну вот, починил

DeAmouSE · 04.03.2014, 08:27

ErikPshat, может конечно это проблемы только в хроме, но у меня из твоего первого поста, когда 4 картинка:

Не показывается картинка
Форум резко увеличивается по горизантали

А если открыть твой пост отдельно вот так. То все красиво и шикарно.

Сначала подумал, что из за того что на этой странице две анимации, но нет, вторая у меня нормально тут отображается.

Еще проблема на этой странице
При открытие 5 и 6 снимка, форум снова расширяется по вертикале, но если открыть этот пост отдельно то все корректно и ни каких проблем.

DeAmouSE · 04.03.2014, 08:29

Херня какая-то, сейчас все стало резко работать нормально... быть может закэшировалось конечно...

ErikPshat · 04.03.2014, 09:10

DeAmouSE, это просто из-за того, что страница не прогрузилась до конца или некоторые изображения ещё не догрузились. Поэтому проявляются такие баги.

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

**vash** · 04.03.2014, 10:31

ErikPshat, а может, есть возможность использовать два ВВ-кода:

С принудительным размером картинки и с автосменой картинки;
С произвольным размером картинки и сменой картинки по клику мыши.

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

ErikPshat · 04.03.2014, 17:40

vash, вполне логично. Можно замутить и так.

ErikPshat · 04.03.2014, 20:33

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

http://yadi.sk/d/C6_KXD_VJt49o

Сегодня случайно обратил внимание в стандартной ICQ на аналогичное поведение рекламы в шапке программы (выделено красным):

[gabpic="width=500"]http://i33.fastpic.ru/big/2014/0304/ec/ca274bba580aac0993b1450a1fd480ec.png[/gabpic]

Такое оформление вполне мне нравится. Можно прямо из аськи повыдёргивать все ресурсы, там стрелочки, точечки и т.п. Зачем рисовать заново, когда уже всё сделано

Ещё понравилось оформление слайдера на сайте http://www.pluso.ru/

**Wlqpnxl** · 04.03.2014, 20:42

http://www.xiper.net/collect/js-plug...ycarousel.html
Тут простейшая листалка с html кодом и исходниками.

**COOLERbyPSP** · 04.03.2014, 21:17

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

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

Мне вот стрелочки не нравятся. Точнее эти полукруги, стремные какие-то)

**vash** · 05.03.2014, 10:40

ErikPshat, в сообщении https://www.pspx.ru/forum/showpost.ph...postcount=2536 нормально всё смотрится.
Вопрос: размер слайдов принудительный или зависит от размера картинок?

ErikPshat · 05.03.2014, 18:56

Размер слайдеров я пока никак не выставлял.
Просто если выставить большой размер окна 960х544, как у экрана Виты, что вполне нормально для форума, тогда как же вставлять маленькие картинки? Окно будет всё равно большое и с маленькими картинками получатся большие отступы.

Я предлагаю отказаться от баловства с эффектами, а выставить единый эффект принудительно, например fadeIn fadeOut. Но зато опцию использовать для указания ширины и высоты картинки.

ErikPshat · 06.03.2014, 00:18

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

https://www.pspx.ru/forum/showthread.php?p=1084691
Почему бы и нет?

Не совсем понимаю. зачем ты понавешал картинок в формате PNG?
Все 6 штук общим весом более 4 Мб, думаю не совсем будет комфортно рассматривать.
А учитывая, что пока они будут грузится с фотохостинга, то в этот момент будет слайдер ужасно искажаться и растягиваться.

Не у всех скорость 30-100 Мб/с, как в Москве.
А на периферии, чем дальше в лес - тем меньше скорость. Там рады безлимитке в 2 Мбит/с (Мегабит! а не Мегабайт, т.е. разделить на 8).

Вот сравнение твоих картинок в PNG и моих в JPG без зримой потери качества:

**KirJan-DeSign** · 06.03.2014, 16:20

ээмммм... Я пока пытаюсь понять ЭТО, но предварительно за)

ErikPshat · 06.03.2014, 17:58

Ну так чо? После суток мучений, я наконец нарисовал слайдер, который не шевелится.
Нарисовал кнопочки и стрелочки, добавил эффект FX для показа сверху информации или титров.
Сделал рамочку с задумкой под iPAD, но потом получился телевизор

Ну ещё можно менять фон под плеером

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

Будем смотреть и тестировать или я оставлю его себе? Если вы ЗА, то уже всё готово... Если нет, то я пошёл спать.

**COOLERbyPSP** · 06.03.2014, 19:45

Насчет PNG - каюсь, не прогнал через optiPNG. Джипег можно, но разве что без ресайза хромы. Не нравится он мне.

ErikPshat · 06.03.2014, 20:02

COOLERbyPSP, ну ты же не фильм показываешь, чтобы заботиться о резайзе хромы

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

Другое дело, если PNG состоит из однотонных кусочков, тогда да, это как в архиваторе, можно файл с гигабайтом нулей сжать до 1 кбайта.

**COOLERbyPSP** · 06.03.2014, 20:40

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

ну ты же не фильм показываешь

Я это прекрасно понимаю, но сжимать и так сжатое...

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

чтобы наглядно показать суть происходящего в нём

Убиваю 2х зайцев, показывая качество картинки. Единственная проблема - слайдшоу не 1 в 1 по размеру. И вот тут ты с "хромой" оказываешься прав)

И это самое...можно обойтись без рамочки вокруг рамочки?))

UPDATE: стрелки сдохли

JPEG