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

PSPx форум (https://www.pspx.ru/forum/index.php)

- BB-коды форума (https://www.pspx.ru/forum/forumdisplay.php?f=424)

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

Слайдер 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 (Сообщение 1084813)

Выбрал анимированный эффект с FX.

По-моему, лучше смену картинок вручную стрелочкой оставить, без автоматического переключения. А то здесь ты картинки выравняешь, а другой не станет этого делать и форум будет "трясти", как сейчас.

Цитата:

Сообщение от ErikPshat (Сообщение 1084813)

ОК, снимаю до 5000

Блиин, чтобы цитату выделить пришлось несколько раз делать выделение. Из-за тряски выделение постоянно меняется.(
Кстати, переделал картинки в сообщении на ссылки из альбома форума: https://www.pspx.ru/forum/showpost.ph...88&postcount=1
Там одна картинка большая стала быстрее грузиться, чем раньше?
И ещё вопрос: если вставить миниатюру, то она на первый клик открывается целиком, на второй - увеличенной. Можно-ли сделать сразу по первому клику увеличенной и читабельной?

https://www.pspx.ru/forum/picture.php...id=187&thumb=1

А чего у меня в предварительном просмотре работает, а тут нет?

В общем что-то случилось и у меня форум разнесло по горизонтали. Очень сильно. Хром.

Яндекс.Браузер
Всё в порядке.

Цитата:

Сообщение от COOLERbyPSP (Сообщение 1084832)

А чего у меня в предварительном просмотре работает, а тут нет? =(

Мне так кажется, что оно работает только в одном экземпляре на страницу. Если один уже есть, то все следующие уже не работают. Можно найти применение ей только при оформлении шапок тем, а в остальном в постах им делать нечего.
Думаю не нужна нам такая плюшка, не?

Цитата:

Сообщение от riktus (Сообщение 1084833)

у меня форум разнесло по горизонтали. Очень сильно. Хром.

В Опере нормально.

Цитата:

Сообщение от vash (Сообщение 1084820)

Из-за тряски выделение постоянно меняется.(

Ну есть кнопка "Стоп" :)

Цитата:

Сообщение от vash (Сообщение 1084820)

И ещё вопрос: если вставить миниатюру, то она на первый клик открывается целиком, на второй - увеличенной. Можно-ли сделать сразу по первому клику увеличенной и читабельной?

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

ErikPshat, у меня хром и опять форум скроллится!

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

ErikPshat, Вертикально вниз и вверх. Пока только тут заметил.

Цитата:

Сообщение от ErikPshat (Сообщение 1084835)

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

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

Цитата:

Думаю не нужна нам такая плюшка, не?

https://www.pspx.ru/forum/showthread.php?p=1084691
Почему бы и нет?)
Правда рамочка сверху и снизу, ИМХО, лишнее. Да и кнопки выбора прямо поверх скринов в нижнем левом углу были бы уместнее, не?

Цитата:

Сообщение от elisey474 (Сообщение 1084838)

ErikPshat, Вертикально вниз и вверх. Пока только тут заметил.

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

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

Цитата:

Сообщение от ErikPshat (Сообщение 1084835)

Ну есть кнопка "Стоп"

Здесь кнопка стоп непричём, это из-за

Цитата:

Сообщение от ErikPshat (Сообщение 1084841)

картинки, которые сменяются в моём посту выше, имеют разный размер. Поэтому при смене картинки мой пост становится то выше, то ниже.

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

Цитата:

Сообщение от ErikPshat (Сообщение 1084835)

Да я не про это, а про ту миниатюру картинки, что выложил для примера.
Прям тест на трезвость какой-то, только попасть надо не в кончик носа, а в нужный участок экрана, который постоянно скачет. :crazy:

Цитата:

Сообщение от COOLERbyPSP (Сообщение 1084840)

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

Ну тогда, ради тебя, любые капризы по вашему желанию. Можно конечно всё довести до ума.

Нужно решить несколько вопросов...

Чтобы форум не кроллился из-за разных размеров, необходимо выбрать что-то одно:
1. Либо самим ресайзить картинки, чтобы они все имели один размер.
2. Либо выставить унифицированно принудительный размер, например, как в теге Ютуба 360p (640х360). Тогда любые картинки будут уменьшаться до такого размера окна. Но если они не будут соответствовать аспекту окна, тогда есть ещё 2 варианта - либо будут выползать за пределы аспекта и края будут отсекаться, либо будут вписываться в окно и недостающий аспект будет иметь пустое пространство по ширине или по высоте.
Затем, нужно решить, какой вид эффекта нам брать на вооружение. Например vash имеет желание использовать эффект увеличения по клику - первый эффект вот здесь. То есть, при клике по картинке, будет открываться всплывающее окно с полноразмерной картинкой и там можно по кликам так же листать картинки, но вручную. Либо такая анимация, которая есть сейчас - это эффект на чистом CSS3.

ErikPshat, я за первый вид!

Цитата:

выставить унифицированно принудительный размер, например, как в теге Ютуба 360p (640х360).

Учитывая то, что все мои скрины 960x544 - никаких возражений.
Но над кнопочками бы пошаманил, мож в пеинте чего сделаю, чтобы показать то, что в голове :D

UPDATE

Но, как видишь, я против автолистания. Почему-то хочется вручную.

Цитата:

Сообщение от COOLERbyPSP (Сообщение 1084846)

Но, как видишь, я против автолистания. Почему-то хочется вручную.

Ну я понял тебя насчёт кнопочек.
Эмм, ты предлагаешь делать размер окна 960x544 или всё-таки ресайзить до 360p (640x360)? - аспект одинаковый, это да.

Цитата:

403 Владелец запретил доступ к этому файлу. Попросите владельца открыть доступ к файлу и снова поделиться ссылкой на него.

Цитата:

403

http://yadi.sk/d/C6_KXD_VJt49o
С размером, наверное, немного переборщил. Тут под палец :D

Цитата:

или всё-таки ресайзить до 360p

Не, не надо ничего ресайзить. 960х544 это немного, клик для просмотра в полном размере будет лишним.
Кстати, на скриншоте ресайз скриншота (:dash:) до 864х489, непорядок :blush:
Кнопки с номерами сверху, ибо внизу субтитры и наложение выглядит некрасиво =\

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

P.S. Голосование сделал закрытым, если вас это как-то стесняет.

Заключил свой слайдер в таблицу, назначил ширину таблицы по ширине максимальной картинки, а высоту по высоте максимальной по высоте картинки + добавляемая высота самого слайдера. Форум не шевелится :)

Ещё хороший вопрос: возможен ли fadeOut непосредственно в следующее изображение, а не в прозрачное ничто?

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

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

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

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

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

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

Цитата:

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

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

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

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

Шорт, понял ошибку. Стиль анимации тоже имеет закреплённое название.
А там не поменял :) #animate-duration так и осталось )))
Балин, придётся стиль так же вынести в опцию

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

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

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

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

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

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

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

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

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

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

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

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

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

Цитата:

Сообщение от COOLERbyPSP (Сообщение 1084849)

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/

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

Цитата:

Сообщение от ErikPshat (Сообщение 1084897)

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

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

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

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

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

Цитата:

Сообщение от COOLERbyPSP (Сообщение 1084840)

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

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

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

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

http://i60.fastpic.ru/big/2014/0305/...bf13f01d52.jpg

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

Ну так чо? После суток мучений, я наконец нарисовал слайдер, который не шевелится.
Нарисовал кнопочки и стрелочки, добавил эффект FX для показа сверху информации или титров.
Сделал рамочку с задумкой под iPAD, но потом получился телевизор :D
Ну ещё можно менять фон под плеером :xDD: Думаю эта фича с бэкграундом всё испортила, т.к. в чисто белом виде смотрится замечательно.
Аккуратненькие стрелочки перемотки вправо/влево поставил на изображение по бокам.

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

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

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

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

Цитата:

Сообщение от ErikPshat (Сообщение 1084971)

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

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

Цитата:

Сообщение от ErikPshat (Сообщение 1084971)

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

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

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

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

JPEG