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

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

Код:

$(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 и у меня к вам две новости: хорошая и так себе.
Хорошая - это то, что плагин в данном виде уже поддерживает показ видео и фрейма в модалке.
Новость "так себе" заключается в том, что мне лень адаптировать. )))

Чтобы показать видео в модалке, в сообщении нужно выложить код типа:

Код:

<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" - высота
Вам осталось в коде вставить ссылку на картинку, которая будет отображать кнопку в редакторе.

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

Для того, чтобы вставить фрейм в модальное окно, ставьте следующий код:

Код:

<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 в сообщение. А кнопка всего лишь одна. )))

Код:

$(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;}

Почти то же, что и 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>'

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