Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

FancyBox в сообщениях Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

FancyBox в сообщениях Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


FancyBox в сообщениях

Перейти вниз

FancyBox в сообщениях Empty FancyBox в сообщениях

Сообщение автор Феникс Январь 21st 2021, 20:51

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

Код:
$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).not(contents.find('a img')).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

Расположение: На всех страницах

Обратите внимание, что в сам скрипт интегрирована подгрузка стилей и скрипта FancyBox.

FancyBox в сообщениях 0313010001611250472

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


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Лилэя поставил(а) лайк

Вернуться к началу Перейти вниз

FancyBox в сообщениях Empty Re: FancyBox в сообщениях

Сообщение автор Феникс Январь 23rd 2021, 12:36

Вчера перечитал скрипт FancyBox и у меня к вам две новости: хорошая и так себе. smile
Хорошая - это то, что плагин в данном виде уже поддерживает показ видео и фрейма в модалке.
Новость "так себе" заключается в том, что мне лень адаптировать. )))


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

FancyBox в сообщениях Empty FancyBox в сообщениях (видео в модалке)

Сообщение автор Феникс Январь 23rd 2021, 12:47

Чтобы показать видео в модалке, в сообщении нужно выложить код типа:
Код:
<a data-fancybox href="https://www.youtube.com/v/pbB-dkdyKRg">

   <img src="https://i3.ytimg.com/vi/pbB-dkdyKRg/0.jpg">

</a>

Где
Код:
https://www.youtube.com/v/pbB-dkdyKRg
-Это ссылка на видео.
В данной ссылке нужно заменить всего лишь код видео.
Код:
https://i3.ytimg.com/vi/pbB-dkdyKRg/0.jpg
- Это ссылка на превьюшку. В ней так же нужно заменить код видео на свой.

Код:
pbB-dkdyKRg  
- собственно сам код видео. Не забывайте, что код должен быть одинаковым в ссылках на видео и превью.

Теперь, чтобы код для контейнера FancyBox был всегда под рукой и не мучаться каждый раз, вставляем в основные скрипты с расположением на всех страницах следующий скрипт.
Код:
$(function(){
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Ютуб модалка"><div unselectable="on" style="background-image:url(http://ссылка на картинку кнопки 16х16px)"></div></a>').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("<a data-fancybox href="https://www.youtube.com/v/КодВидео"><img src="https://i3.ytimg.com/vi/КодВидео/0.jpg"></a>");
 });
 });
 });


Если надо задать размер для превью, то замените фрагмент кода
Код:
<img src="https://i3.ytimg.com/vi/КодВидео/0.jpg">
на
Код:
<img src="https://i3.ytimg.com/vi/КодВидео/0.jpg" width="120" height="90" >

width="120" - это ширина превью
height="90" - высота
Вам осталось в коде вставить ссылку на картинку, которая будет отображать кнопку в редакторе.

Кстати, плагин поддерживает показ видео в модалке со всех ресурсов. Как достать превью на других сайтах, я не знаю.
Как вариант, можно снять скриншот и зафиксировать его на хостинге.


Последний раз редактировалось: Феникс (Январь 23rd 2021, 19:55), всего редактировалось 1 раз(а)


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Лилэя поставил(а) лайк

Вернуться к началу Перейти вниз

FancyBox в сообщениях Empty FancyBox в сообщениях (iframe в модалке)

Сообщение автор Феникс Январь 23rd 2021, 17:49

Для того, чтобы вставить фрейм в модальное окно, ставьте следующий код:
Код:
<a data-fancybox="" data-type="iframe" data-src="https://ссылка_фрейма" href="javascript:;">
 Ссылка на страницу
</a>
Дальше по аналогии туториала выше, чтобы сделать кнопку в редакторе. В скрипте меняете код.

Ссылка на страницу тоже можете поменять на  своё усмотрение.

Пример:
Код:
$(function(){
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="IFRAME модалка"><div unselectable="on" style="background-image:url(http://ссылка на картинку кнопки 16х16px)"></div></a>').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("<a data-fancybox="" data-type="iframe" data-src="https://ссылка_фрейма" href="javascript:;">
 Ссылка на страницу
</a>");
 });
 });
 });

На замену тока
Код:
https://ссылка_фрейма
и ссылка на изображение кнопки. Напоминаю, что важно, чтобы размер не превышал 16х16 px.


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

FancyBox в сообщениях Empty Re: FancyBox в сообщениях

Сообщение автор Феникс Январь 23rd 2021, 21:52

Предлагаю следующую альтернативу кнопок в редактор для выдачи контейнера FancyBox в сообщение. А кнопка всего лишь одна. )))

Код:
$(function () {
        if (!$.sceditor) return;

        $.sceditor.command.set('messages', {
                dropDown: function (editor, caller, callback) {
                        var messages = {
                                'ВидеоЮтуб': '<a data-fancybox href="https://www.youtube.com/v/КодВидео"><img src="https://i3.ytimg.com/vi/КодВидео/0.jpg" width="120" height="90"></a>',
                                'Фрейм': '<a data-fancybox="" data-type="iframe" data-src="https://ссылка_фрейма" href="javascript:;">Ссылка на страницу</a>'
                        },
                                a, d = document.createElement('DIV'),
                                i;

                        for (i in messages) {
                                a = document.createElement('A');
                                a.className = 'sceditor-font-option';
                                a.title = messages[i];
                                a.innerHTML = i;
                                a.onclick = function () {
                                        callback(this.title);
                                        editor.closeDropDown(true);
                                        return false;
                                };
                                d.appendChild(a);
                        }

                        editor.createDropDown(caller, 'messages', d);
                },

                exec: function (c) {
                        var e = this;
                        $.sceditor.command.get('messages').dropDown(e, c, function (content) {
                                e.insertText(content);
                        });
                },

                txtExec: function (c) {
                        var e = this;
                        $.sceditor.command.get('messages').dropDown(e, c, function (content) {
                                e.insertText(content);
                        });
                },

                tooltip: 'Предустановленные сообщения'
        });

        toolbar += '|messages'
});

Размещение : На всех страницах

Далее открываем таблицу стилей CSS и добавляем картинку кнопки.
Код:
.sceditor-button-messages div {background-image:url('https://i.servimg.com/u/f37/19/34/71/86/scomme12.png')!important;}

FancyBox в сообщениях 0659375001611428188


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

FancyBox в сообщениях Empty FancyBox в сообщениях (AJAX в модалке)

Сообщение автор Феникс Январь 25th 2021, 17:27

Почти то же, что и iframe, но немного по-другому отображается.
В сообщении нужно выложить код
Код:
<a data-fancybox="" data-type="ajax" data-src="https://ссылка_на_страницу" href="javascript:;">
    Открыть
</a>

Можете добавить кнопку в последнем скрипте
Смотрите сообщение https://help.forum2x2.ru/t41328-topic#278323

Для этого найдите в нём фрагмент кода
Код:
var messages = {
                                'ВидеоЮтуб': '<a data-fancybox href="https://www.youtube.com/v/КодВидео"><img src="https://i3.ytimg.com/vi/КодВидео/0.jpg" width="120" height="90"></a>',
                                'Фрейм': '<a data-fancybox="" data-type="iframe" data-src="https://ссылка_фрейма" href="javascript:;">Ссылка на страницу</a>'
и замените на

Код:
var messages = {
                                'ВидеоЮтуб': '<a data-fancybox href="https://www.youtube.com/v/КодВидео"><img src="https://i3.ytimg.com/vi/КодВидео/0.jpg" width="120" height="90"></a>',
                                'Фрейм': '<a data-fancybox="" data-type="iframe" data-src="https://ссылка_фрейма" href="javascript:;">Ссылка на страницу</a>',
                                'Ajax': '<a data-fancybox="" data-type="ajax" data-src="https://ссылка_на_страницу" href="javascript:;">Открыть</a>'

Вернее, вам нужно добавить действие очередной кнопочки.


FancyBox в сообщениях Userba11

• Где находится CSS?
ПА > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

• Где искать Виджеты?
ПА > Модули >  Портал & Виджеты > Виджеты форума
Феникс
Феникс
Помощник
Помощник

Мужчина

Сообщения : 1000
Возраст : 49
Регистрация : 2015-10-29
Благодарности : 237

Без предупреждений

https://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения