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

[ErikPshat]

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

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

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

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

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

Виды возможных эффектов:

[LIST=a]
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
Убрали из-за невозможности выставить свой размер окна слайдера.
Лишняя красивая рамка так же отнимала рабочее пространство.
Из преимуществ - возможность указания названия слайдера (уникальный ID, в результате возможность многократного использования на странице без конфликтов с другими слайдерами)
Оставлен для истории: http://www.pspx.ru/forum/AnythingSlider/Themes/index.html

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

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

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

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

Эталон (http://www.pspx.ru/forum/AnythingSlider/Themes/index2.html)

http://www.pspx.ru/forum/AnythingSlider/Themes/demos/1.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/2.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/3.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/4.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/5.jpg"]http://www.pspx.ru/forum/AnythingSlider/Themes/demos/6.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 01.jpg"]http://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 02.jpg вставляем прямую ссылку на картинку"]http://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 03.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 04.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 05.jpghttp://www.pspx.ru/forum/AnythingSlider/Themes/demos/Chuunibyou demo Koi ga Shitai! 06.jpg

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

1. ... - в опцию вписываются размеры слайдера по ширине и высоте (через точку с запятой, без пробелов). Этот тег обрамляет список картинок в тегах пункта №2 ниже, аналогично тегу [LIST].

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

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

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

[vash]

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

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

http://www.pspx.ru/forum/picture.php?albumid=18&pictureid=187&thumb=1 (http://www.pspx.ru/forum/picture.php?albumid=18&pictureid=187)

[COOLERbyPSP]

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

[riktus]

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

[COOLERbyPSP]

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

[ErikPshat]

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

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

Из-за тряски выделение постоянно меняется.(
Ну есть кнопка "Стоп" :)

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

[Wlqpnxl]

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

[ErikPshat]

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

[Wlqpnxl]

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

[ErikPshat]

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

[COOLERbyPSP]

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

[ErikPshat]

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

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

[vash]

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

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

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

[ErikPshat]

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

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

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

Чтобы форум не кроллился из-за разных размеров, необходимо выбрать что-то одно:

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

Затем, нужно решить, какой вид эффекта нам брать на вооружение. Например vash имеет желание использовать эффект увеличения по клику - первый эффект вот здесь (http://www.pspx.ru/forum/AnythingSlider/demos.html). То есть, при клике по картинке, будет открываться всплывающее окно с полноразмерной картинкой и там можно по кликам так же листать картинки, но вручную. Либо такая анимация, которая есть сейчас - это эффект на чистом CSS3 (http://www.pspx.ru/forum/AnythingSlider/css3.html).

[Wlqpnxl]

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

[COOLERbyPSP]

выставить унифицированно принудительный размер, например, как в теге Ютуба 360p (640х360).
Учитывая то, что все мои скрины 960x544 - никаких возражений.
Но над кнопочками бы пошаманил, мож в пеинте чего сделаю, чтобы показать то, что в голове :D

UPDATE
https://downloader-default2h.disk.yandex.ru/rdisk/f0194796c249a55d98974318bf9751de/mpfs/NSqza97xnhWs8dXdKMcmUT_Ec3bWfTKQmAqnRDgUK1eHWd0x5-0-mZfcCdApANMzf-mm4oRMEA2-5-Ivd_Y7YA==?uid=0&filename=2014-03-03%2022-50-12%20%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%20%D1%8D%D0%BA%D1%80%D0%B0 %D0%BD%D0%B0.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&rtoken=09c0214b690f9c11e316f50705a76e95&rtimestamp=5314d21e
Но, как видишь, я против автолистания. Почему-то хочется вручную.

[ErikPshat]

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

UPDATE
https://downloader-default2h.disk.yandex.ru/rdisk/f0194796c249a55d98974318bf9751de/mpfs/NSqza97xnhWs8dXdKMcmUT_Ec3bWfTKQmAqnRDgUK1eHWd0x5-0-mZfcCdApANMzf-mm4oRMEA2-5-Ivd_Y7YA==?uid=0&filename=2014-03-03%2022-50-12%20%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%20%D1%8D%D0%BA%D1%80%D0%B0 %D0%BD%D0%B0.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&rtoken=09c0214b690f9c11e316f50705a76e95&rtimestamp=5314d21e
Но, как видишь, я против автолистания. Почему-то хочется вручную.
Ну я понял тебя насчёт кнопочек.
Эмм, ты предлагаешь делать размер окна 960x544 или всё-таки ресайзить до 360p (640x360)? - аспект одинаковый, это да.

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

[COOLERbyPSP]

403
http://yadi.sk/d/C6_KXD_VJt49o
С размером, наверное, немного переборщил. Тут под палец :D
или всё-таки ресайзить до 360p
Не, не надо ничего ресайзить. 960х544 это немного, клик для просмотра в полном размере будет лишним.
Кстати, на скриншоте ресайз скриншота (:dash:) до 864х489, непорядок :blush:
Кнопки с номерами сверху, ибо внизу субтитры и наложение выглядит некрасиво =\

[ErikPshat]

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

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

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

[COOLERbyPSP]

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

[ErikPshat]

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

[ErikPshat]

COOLERbyPSP, твоя анимация (http://www.pspx.ru/forum/showthread.php?p=1084832#post1084832) то же работает на этой странице ;)


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

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

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

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

[COOLERbyPSP]

[animate-name="Chuunibyou_demo_Koi_ga_Shitai"][animate="fadeInUp, fadeOutUp"]
Фейды теперь не пашут :girl_crazy:

[ErikPshat]

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

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

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


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

[DeAmouSE]

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

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


А если открыть твой пост отдельно вот так (http://www.pspx.ru/forum/showpost.php?p=1084845&postcount=1). То все красиво и шикарно.

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

Еще проблема на этой странице (http://www.pspx.ru/forum/showthread.php?p=1084691)
При открытие 5 и 6 снимка, форум снова расширяется по вертикале, но если открыть этот пост отдельно (http://www.pspx.ru/forum/showpost.php?p=1084691&postcount=1) то все корректно и ни каких проблем.

[DeAmouSE]

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

[ErikPshat]

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

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

[vash]

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

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

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

[ErikPshat]

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

[ErikPshat]

http://yadi.sk/d/C6_KXD_VJt49o
Сегодня случайно обратил внимание в стандартной ICQ на аналогичное поведение рекламы в шапке программы (выделено красным):

http://i33.fastpic.ru/big/2014/0304/ec/ca274bba580aac0993b1450a1fd480ec.png (http://i33.fastpic.ru/big/2014/0304/ec/ca274bba580aac0993b1450a1fd480ec.png)

Такое оформление вполне мне нравится. Можно прямо из аськи повыдёргивать все ресурсы, там стрелочки, точечки и т.п. Зачем рисовать заново, когда уже всё сделано :)
Ещё понравилось оформление слайдера на сайте http://www.pluso.ru/ (http://www.pluso.ru/)

[Wlqpnxl]

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

[COOLERbyPSP]

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

[vash]

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

[ErikPshat]

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

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

[ErikPshat]

http://www.pspx.ru/forum/showthread.php?p=1084691
Почему бы и нет?
Не совсем понимаю. зачем ты понавешал картинок в формате PNG?
Все 6 штук общим весом более 4 Мб, думаю не совсем будет комфортно рассматривать.
А учитывая, что пока они будут грузится с фотохостинга, то в этот момент будет слайдер ужасно искажаться и растягиваться.

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

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

http://i60.fastpic.ru/big/2014/0305/52/7676b7148e5d2673e31a0dbf13f01d52.jpg

[KirJan-DeSign]

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

[ErikPshat]

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

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

[COOLERbyPSP]

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

[ErikPshat]

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

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

[COOLERbyPSP]

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

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

UPDATE: стрелки сдохли
http://nya.sh/i/f37d71277d2ebd701bbf6730418c0841.jpg

[ErikPshat]

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

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

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


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

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

9740

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

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

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

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

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

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

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

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

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

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

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

PNG 173 KБ (176*857 байт) vs JPG 29 KБ (29*327 байт)
9742 9743

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

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

[ErikPshat]

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

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

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


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

[riktus]

Ну почему же не понравилось? Вот это (http://www.pspx.ru/forum/showpost.php?p=1084969&postcount=41) очень даже здорово. Еще бы его код посмотреть и было бы совсем хорошо.

[vash]

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

http://www.pspx.ru/forum/picture.php?albumid=18&pictureid=229 http://www.pspx.ru/forum/picture.php?albumid=18&pictureid=230 http://www.pspx.ru/forum/picture.php?albumid=18&pictureid=231

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

[ErikPshat]

Вот это (http://www.pspx.ru/forum/showpost.php?p=1084969&postcount=41) очень даже здорово.Ну вот это ещё здоровее ))) http://www.pspx.ru/forum/AnythingSlider/Themes/index.html
Там даже стрелочки навигации по бокам есть.

Еще бы его код посмотреть и было бы совсем хорошо.
А что его смотреть? Скачай Index.html по ссылке из расширенного просмотра правой кнопкой "Сохранить как..." и увидишь весь код. Собственно телик работает на том же плагине AnythingSlider (http://www.pspx.ru/forum/AnythingSlider/index.html)(там и факью есть и описание функций), как предыдущий наш слайдер. Просто я нарисовал примитивную темку в CSS3 с небольшим кодом (http://www.pspx.ru/forum/AnythingSlider/Themes/css/theme-simple.css), поэтому появилось новое оформление и функции.


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

Может, попроще тоже оставить, как было ранее предложено?
В смыслях?
Насчёт этих предложений?


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

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

[COOLERbyPSP]

Можно подумать, о возможности вставки в ББ-код кастомного размера по своему желанию.
Я только "за"!
Ну не любит он текст(
http://cdn.joxi.ru/uploads/prod/2014/03/07/41b/9be/1de7bd0d4e20a77d9f88548e31160c452bfa6ff9.png
То есть, убрать лишнюю рамочку и сделать размер 960х544?
Угу, хотелось бы посмотреть на это. Ну и выбор фона нафиг, не вижу полезности, хоть и прикольно.
Просто опять же вернёмся к размеру и формату - с таким успехом можно и JPEG, при уменьшении размера этой рамкой сжатие в глаза не так бросится. Но тогда можно и просто брать PNG меньшего размера. Появляется вопрос - нафига делать скрины с рипа, если с таким же успехом можно взять скриншот откуда угодно. Либо постить JPEG с PNG по клику.
Война против джипега продолжается, но вот на такое я почти согласен:
http://cdn.joxi.ru/uploads/prod/2014/03/07/529/7c2/1999153443ffcfb7c7d4f2c827171df2f9f1dc42.png
Разница в размере ощутима, потери минимальны, а без увеличения не различимы. На 98 уже артефакты вокруг текста появляются =(
На низких SubSampling factor у него красный галстук тускнеет.
Ну и ещё оговорочка, PNG из примера после оптимизации 570Кб весит. Что тоже не конкурент по размеру JPEG 99%, согласен.

1185
http://puu.sh/7mn3T.png


Добавим.
http://cdn.joxi.ru/uploads/prod/2014/03/07/d0a/1d2/91a60bbb62291f851f6d10c550015c75bc9f3353.png
Хоть и надо бы сменить эту картинку на что-нибудь более-менее, но речь не об этом.
Её с центра сместило вправо, BB-код CENTER вокруг неё отдельный.
И теперь мне нравится этот "телек", угодил :clapping:

[ErikPshat]

Можно подумать, о возможности вставки в ББ-код кастомного размера по своему желанию.
Я только "за"!Тогда придётся поменять какую-то опцию.

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


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

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

[COOLERbyPSP]

Если сменить опцию названия, тогда на странице можно помещать только 1 слайдер
Не беда, по сути место такому слайдшоу (по крайней мере у меня в темах) только в шапке.
Если убрать рамочку, то это сделает бездарной ещё 4тверть моей работы
Ты сейчас про какую рамочку? Мне вот так нравится.
http://cdn.joxi.ru/uploads/prod/2014/03/07/d0a/1d2/91a60bbb62291f851f6d10c550015c75bc9f3353.png
И страничка в 1280 по ширине вписывается, нормально.

Я только 2 косяка вижу, глядя на "эталон" (http://www.pspx.ru/forum/AnythingSlider/Themes/index.html)
Там фейды из картинки в картинку и нормально отображающиеся стрелочки. На форуме пока не вижу такого :scratch_one-s_head:

[ErikPshat]

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

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

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

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

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

[COOLERbyPSP]

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

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

[ErikPshat]

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

[COOLERbyPSP]

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

[ErikPshat]

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

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

[ErikPshat]

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

[vash]

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

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


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

[ErikPshat]

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

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

[ErikPshat]

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

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

[ErikPshat]

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

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

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

[COOLERbyPSP]

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

[ErikPshat]

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

А для Ютуба тебе нужно использовать другой ББ-код: http://www.pspx.ru/forum/images/editor/youtres.gif (width:960 height 544)

[COOLERbyPSP]

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

[ErikPshat]

По клику "Поделиться" HTML-код

http://www.youtube.com/embed/1ovaaxhKpgI

http://www.youtube.com/embed/1ovaaxhKpgI
По клику "Поделиться" обычный-код

http://youtu.be/1ovaaxhKpgI

http://youtu.be/1ovaaxhKpgI

Эм. Так разницы на лицо нет.Ваще-та да, что так, что эдак, одно и то же растяжение. Ну разве что если на Ютубе выбрать формат ссылки HD.

P.S. Да, не нравится что-то, что один слайдер на страницу и у всех получается один ID. Если зайдёт какой-нибудь нуб и повесит свой слайдер, то проявится глюк. Есть идея сделать уникальный ID для каждого слайдера, например по номеру поста.

[COOLERbyPSP]

Если зайдёт какой-нибудь нуб и повесит свой слайдер, то проявится глюк.
Нефиг нубам слайдеры вешать :D
Да и если он проявится, думаю, нуб додумается удалить сообщение.

[ErikPshat]

COOLERbyPSP, ну и как тебе версия №3? Вроде работает, как задумывалось и как голосовалось :)
Думаю именно так ты рисовал свою картину ранее?

Описание с инструкцией в шапке обновил. Позже добавлю кнопки к ББ-кодам в расширенный режим редактирования.

[COOLERbyPSP]

Смотрится отлично, ничего лишнего. И выбор палитры покомпактнее стал.
Я хоть и видел по-другому (кнопочки покрупнее), но так даже больше нравится)
Осталось починить переходы, если это возможно вообще.

[ErikPshat]

Осталось починить переходы, если это возможно вообще.Да переходы работают. Просто происходит задержка из-за скриптов форума. В эталоне задержек не видно, потому что это отдельная страница HTML, без всяких форумных скриптов.
Там есть возможность выставить другие виды переходов:

horizontal - прокрутка по горизонтали
vertical - прокрутка по вертикали
fade - фейдер (затухание) - установлено сейчас

Собсно все они работают. А это значит, что и фейдер работает, просто немного с запозданием, т.е. как будто в фон.

[ErikPshat]

Ты забыл внутренности: IMG
И без них работает.
http://www.pspx.ru/forum/showthread.php?p=1078838
С YouTube это теперь и правда телевизор :good:
Кстати, аттачи [ATTACH] отлично подхватываются тоже, внутри [slider-size]
http://www.pspx.ru/forum/showpost.php?p=1085235 (http://www.pspx.ru/forum/showpost.php?p=1085235&postcount=1)


P.S. Добавил примечание к инструкции в шапке.

[ErikPshat]

Нужно ли добавить кнопочки для BB-кода слайдера в панель редактирования расширенного режима? Или так обойдёмся?


Нужно ли сделать возможность добавления нескольких слайдеров на странице?
Если да, то нужно будет в первом обрамляющем теге [slider-size="width:940px;height:544px"] вписывать в опцию размеры БЕЗ пробелов (т.е. НЕ так: width: 940px; height: 544px), тогда эту опицию можно использовать в качестве уникального названия слайдера и изменяя размер хоть на 1 пиксель, получится уже другое название слайдера. Но если на одной странице будут 2 слайдера с одинаковыми размерами, то получатся 2 слайдера с одним и тем же названием, тогда будет работать только 1-ый слайдер.


Какие будут ещё предложения по дизайну и функционалу слайдера? Что молчим-то?

[COOLERbyPSP]

Нужно ли добавить кнопочки для BB-кода слайдера в панель редактирования расширенного режима? Или так обойдёмся?



было бы неплохо

[ErikPshat]

было бы неплохоОК! Как появится время, сразу же займусь этим. Просто добавить ББ-коды в панель редактирования - это ручная работа, связанная с редактированием шаблона написания сообщений. Поэтому тут не всё так просто, в админке всё пилиять сделано не для админов :D

Ах да, нужно будет ещё нарисовать GIF-ки 21х20 для этих 2-ух ББ-кодов.


Переносы строк внутри ББ-кодов по прежнему не прокатывают.
Допускаются только пробелы между ББ-кодами.

[ErikPshat]

Добавил иконки в форму расширенного ответа, а так же в форму публичных сообщений в личном кабинете.

Синтаксис снова поменялся!

Обрамляющий тег [slidersize="width:960px;height:544px"] теперь пишется слитно. Если вы где-то оставляли в темах слайдеры, то исправляйте. Не забудьте про закрывающий тег, он так же слитный! В написании ширины и высоты не следует делать пробелов - это потребуется для возможности вставки нескольких слайдеров на одной странице, эту функцию я добавлю позже. Пожалуй больше никаких изменений в слайдере не планируется.

Да, оказывается нельзя в названиях ББ-кодов использовать тире(-), так как при попытке добавить его в панель редактирования, вся панель крашится и пропадает :)
Поэтому название [slider-size=""] пришлось сделать слитным.