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

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-ной перенос и окно картинок будет увеличиваться в высоту с прогрессией. Допускаются только пробелы между ББ-кодами.

**vash** · 03.03.2014, 14:03

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

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

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

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

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

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

**COOLERbyPSP** · 03.03.2014, 21:30

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

**riktus** · 03.03.2014, 21:35

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

**COOLERbyPSP** · 03.03.2014, 21:37

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

ErikPshat · 03.03.2014, 21:48

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

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

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

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

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

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

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

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

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

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

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

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

**Wlqpnxl** · 03.03.2014, 21:50

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

ErikPshat · 03.03.2014, 21:52

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

**Wlqpnxl** · 03.03.2014, 21:54

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

ErikPshat · 03.03.2014, 21:57

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

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

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

**COOLERbyPSP** · 03.03.2014, 21:58

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

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

ErikPshat · 03.03.2014, 22:01

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

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

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

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

**vash** · 03.03.2014, 22:21

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

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

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

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

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

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

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

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

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

ErikPshat · 03.03.2014, 22:39

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

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

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

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

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

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

**Wlqpnxl** · 03.03.2014, 22:40

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

**COOLERbyPSP** · 03.03.2014, 22:47

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

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

UPDATE

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

ErikPshat · 03.03.2014, 23:13

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

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

UPDATE

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

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

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

**COOLERbyPSP** · 03.03.2014, 23:16

403

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

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

Не, не надо ничего ресайзить. 960х544 это немного, клик для просмотра в полном размере будет лишним.
Кстати, на скриншоте ресайз скриншота (

) до 864х489, непорядок

Кнопки с номерами сверху, ибо внизу субтитры и наложение выглядит некрасиво =\

ErikPshat · 04.03.2014, 00:49

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

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

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

**COOLERbyPSP** · 04.03.2014, 00:53

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