Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» [решено]Редактирвоание темыавтор AlexDarkTech Октябрь 13th 2024, 08:14
» совет админам
автор лексей2222 Октябрь 12th 2024, 08:31
» Проблема с гугл из-за Hitskin
автор лексей2222 Октябрь 11th 2024, 11:30
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
» Как загружать ролики и мультики по ссылкам напрямую
автор лексей2222 Сентябрь 14th 2024, 19:22
» Интернет адрес форума
автор Mierena Сентябрь 7th 2024, 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
FancyBox в сообщениях
Страница 1 из 1
FancyBox в сообщениях
С помощью этого плагина вы можете организовать компактную и удобную для просмотра галерею. Раньше я у себя вставлял несколько скриптов для этого плагина. Ну у него больше возможностей было. Даже видео можно было открыть в модальном окне.
Так.. что мы делаем.. Размещаем в сообщении картинки, задав им одинаковый размер, чтобы они аккуратно ложились в ряд. Для просмотра поможет этот скрипт.
Расположение: На всех страницах
Обратите внимание, что в сам скрипт интегрирована подгрузка стилей и скрипта 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.
На анимашке в правом верхнем углу видна панелька управления. Зум - увеличение, далее старт слайдера (автолистание), вкл/откл листание колесиком мышки, ну и закрыть окно.
Лилэя поставил(а) лайк
Re: FancyBox в сообщениях
Вчера перечитал скрипт FancyBox и у меня к вам две новости: хорошая и так себе.
Хорошая - это то, что плагин в данном виде уже поддерживает показ видео и фрейма в модалке.
Новость "так себе" заключается в том, что мне лень адаптировать. )))
Хорошая - это то, что плагин в данном виде уже поддерживает показ видео и фрейма в модалке.
Новость "так себе" заключается в том, что мне лень адаптировать. )))
FancyBox в сообщениях (видео в модалке)
Чтобы показать видео в модалке, в сообщении нужно выложить код типа:
Где
В данной ссылке нужно заменить всего лишь код видео.
Теперь, чтобы код для контейнера FancyBox был всегда под рукой и не мучаться каждый раз, вставляем в основные скрипты с расположением на всех страницах следующий скрипт.
Если надо задать размер для превью, то замените фрагмент кода
width="120" - это ширина превью
height="90" - высота
Вам осталось в коде вставить ссылку на картинку, которая будет отображать кнопку в редакторе.
Кстати, плагин поддерживает показ видео в модалке со всех ресурсов. Как достать превью на других сайтах, я не знаю.
Как вариант, можно снять скриншот и зафиксировать его на хостинге.
- Код:
<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 в сообщениях (iframe в модалке)
Для того, чтобы вставить фрейм в модальное окно, ставьте следующий код:
Ссылка на страницу тоже можете поменять на своё усмотрение.
Пример:
На замену тока
- Код:
<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://ссылка_фрейма
Re: FancyBox в сообщениях
Предлагаю следующую альтернативу кнопок в редактор для выдачи контейнера FancyBox в сообщение. А кнопка всего лишь одна. )))
Размещение : На всех страницах
Далее открываем таблицу стилей CSS и добавляем картинку кнопки.
- Код:
$(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 в сообщениях (AJAX в модалке)
Почти то же, что и iframe, но немного по-другому отображается.
В сообщении нужно выложить код
Можете добавить кнопку в последнем скрипте
Смотрите сообщение https://help.forum2x2.ru/t41328-topic#278323
Для этого найдите в нём фрагмент кода
Вернее, вам нужно добавить действие очередной кнопочки.
В сообщении нужно выложить код
- Код:
<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>'
Вернее, вам нужно добавить действие очередной кнопочки.
Похожие темы
» Код в сообщениях
» Шрифт в сообщениях!
» как кнопки в сообщениях
» Шрифт в сообщениях
» Подпись в сообщениях
» Шрифт в сообщениях!
» как кнопки в сообщениях
» Шрифт в сообщениях
» Подпись в сообщениях
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения