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