FancyBox - альтернатива Lighbox [3.1][3.2]

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

Модератор: vigor05

Ответить
Аватара пользователя
beholder
Администратор
Сообщения: 1164
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Пол:
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение beholder » 09 дек 2016, 04:36

Название расширения: FANCYBOX
Автор: Jeff Cocking
Статус: релиз
Языки: английский/русский
Поддержка стилей: все


Еще одна альтернатива LIGHTBOX (более красивый, чем стандартный, вывод изображений при клике на миниатюры вложений и просмотр всех изображений темы).

Установка расширения:
Идем в >>> Администраторский раздел >>> Персонализация >>> Управление расширениями >>> Fancybox >>> Включить


Разумеется, не стоит включать одновременно с другими расширениями, реализующий подобный функционал (т.е. Lightbox или HighSlide)
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя
ForChat
Сообщения: 59
Зарегистрирован: 01 янв 2016, 10:14
Пол:
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение ForChat » 09 дек 2016, 08:32

С позволения дополню, чтобы изображения вставляемые с помощью BB-кода img (т.е. не имеющих миниатюр), были не по размеру сообщения, а как в Lightbox, нужного размера. Можно изменить в CSS строчку (у кого загруженные стили):
Персонализация > Загрузка стилей > Файлы > папка theme > content.css

Код: Выделить всё

.postbody img.postimage {
	max-width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
где 100% заменить на нужный размер, например, 400px, т.е. строчка будет выглядеть так:

Код: Выделить всё

.postbody img.postimage {
	max-width: 400px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
У кого предустановленные стили, придется сделать костыль, добавив, например, в:
Hosting > Файлы > overall_header_stylesheets_after.html

Код: Выделить всё

<style>
.postbody img.postimage {max-width:300px !important;}
</style>
Либо, если вы уже писали свои стили, то в них эту строчку.

Отправлено спустя 27 минут 22 секунды:
В FancyBox можно создавать окна для вывода не только изображений, но и текста, фреймов или видео. Как пример, всплывающее при загрузки сайта сообщение. Вставить скрипт, например, в overall_footer_after.html

Код: Выделить всё

<script type="text/javascript">
$(document).ready(function() {
 $.fancybox({
 modal: true,
 title: 'Внимание! Сайт закрыт!',
 content: 'Уважаемые пользователи! В данный момент сайт находится в стадии разработки. Следите за обновлениями.<br>Приносим извинения за возможно доставленные неудобства!'
 });
});
</script>
где modal: true, убирает крестик для закрытия сообщения, можно удалить.

Отправлено спустя 1 час 12 минут 55 секунд:
Ну и ещё пример скрытого текста открываемого в FancyBox:

Код: Выделить всё

<a class="fancybox" href="#fancyblock">Смотреть</a>
<div id="fancyblock" style="display:none">Содержимое</div>
Так же FancyBox может открывать внутри себя swf, например:

Код: Выделить всё

<a class="fancybox" href="ссылка на swf-файл">Смотреть</a>

Аватара пользователя
Вчерашний борщ
Сообщения: 291
Зарегистрирован: 19 сен 2015, 17:25
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение Вчерашний борщ » 09 дек 2016, 16:06

ForChat писал(а): В FancyBox можно создавать окна для вывода не только изображений, но и текста, фреймов или видео. Как пример, всплывающее при загрузки сайта сообщение. Вставить скрипт, например, в overall_footer_after.html
такой скрипт вряд ли кому пригодится. :)

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

Жалко, что расширение без настроек. :( Есть же типовые задачи для картинок, хотя бы уменьшение до определенного значения максимума пикселей в высоту и ширину.
"Хочется сделать форум поддержки информативным и удобным :) " ©

Аватара пользователя
ForChat
Сообщения: 59
Зарегистрирован: 01 янв 2016, 10:14
Пол:
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение ForChat » 09 дек 2016, 18:55

Вчерашний борщ писал(а): такой скрипт вряд ли кому пригодится.
Ну почему, привязать куки и сделать всплывашку с попрошайкой регистрации, довольно популярный скрипт.
Вчерашний борщ писал(а): Интересно было бы, если б скриптом можно было вытаскивать и накладывать на изображения комментарии к картинке для вложений и из галереи (они есть для обоих видов картинок, по галерее имеется в виду авторский комментарий к картинке, он может быть более увесистым, чем у вложений).
Такое можно реализовать, только на загружаемых стилях. Правда, тут скрипт немного перестроен. Но я думаю, если покопаться, то можно.
Вчерашний борщ писал(а): Жалко, что расширение без настроек. :( Есть же типовые задачи для картинок, хотя бы уменьшение до определенного значения максимума пикселей в высоту и ширину.
Настройки там есть, вывод кнопок и миниатюр в слайд-шоу и привязка к изображениям без миниатюр. Максимум я писал выше как реализовать, он точно так же реализован, как и в Ligthbox. Скорей проблема с минимум, чтобы скрипт не создавал просмотр для маленьких изображений. Это настройка в самом скрипте, а вот доступа к его редактированию нет. В итоге он подцепляется ко всем изображениям больше 50px.)

Аватара пользователя
Вчерашний борщ
Сообщения: 291
Зарегистрирован: 19 сен 2015, 17:25
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение Вчерашний борщ » 09 дек 2016, 19:30

ForChat, я привыкла, что если у расширения есть настройки, то скрины в первом посте. :roll: Просто устанавливать и смотреть можно, когда есть время и запал, пользователей же не оставить без уменьшения, пока смотришь.
Я так понимаю, что есть настройки у скрипта, значит все для продвинутых, настройки расширения - это более понятное и не требует ломки стиля.
50 - это круто :D в плохом смысле слова.

В чем смысл расширения? Подключить Фансибокс как библиотеку? Продвинутые пользователи и так умеют подключать, а не продвинутым это ничего не дает.
"Хочется сделать форум поддержки информативным и удобным :) " ©

Аватара пользователя
ForChat
Сообщения: 59
Зарегистрирован: 01 янв 2016, 10:14
Пол:
Контактная информация:

FancyBox - альтернатива Lighbox

Сообщение ForChat » 13 фев 2017, 09:38

Ещё дополню тему, примерами создания ВВ-кодов, т.к. проверял для себя, может ещё кому пригодится. Лучше ограничить к ним доступ только для проверенных пользователей.

ВВ-код для просмотра видео с YouTube и открытия Google Maps в окне fancyBox:
1) Создаем BB-код:

Код: Выделить всё

[ifancy={URL}]{TEXT}[/ifancy]

Код: Выделить всё

<a href="{URL}" class="fancybox fancybox.iframe">{TEXT}</a>
2) Т.к. по-сути в окне открывается фрейм, то и ссылки на видео с YouTube и Google Maps нужно брать в виде HTML. На YouTube нажать кнопку "Поделиться" под видео, далее "HTML-код" и взять ссылку из этого кода, т.е. вставлять примерно так:

Код: Выделить всё

[ifancy=https://www.youtube.com/embed/9bZkp7q19f0]PSY - GANGNAM STYLE[/ifancy]
У Google Maps так же есть подобная функция.
Возможно и другие сервисы будут работать, позволяющие вставлять контент через фрейм, надо пробовать.)

Так же можно создать ВВ-код с выводом какой-нибудь страницы в окне fancyBox через ajax:
Создаем BB-код:

Код: Выделить всё

[jfancy={URL}]{TEXT}[/jfancy]

Код: Выделить всё

<a href="{URL}" class="fancybox fancybox.ajax">{TEXT}</a>
Пример вставки:

Код: Выделить всё

[jfancy=/memberlist.php?mode=contactadmin]Контакты[/jfancy]
И можно создать похожий ВВ-код который будет выводит страницу не через ajax, а в фрейме:
Создаем BB-код:

Код: Выделить всё

[ffancy={URL}]{TEXT}[/ffancy]

Код: Выделить всё

<a class="fancybox" data-fancybox-type="iframe" href="{URL}">{TEXT}</a>
Пример вставки:

Код: Выделить всё

[ffancy=/memberlist.php?mode=contactadmin]Контакты[/ffancy]
Ну вот так как-то.

Ответить

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя