Система Светлый Тёмный

Редактор темы

Настройки страницы Внешний вид

  • Ширина страницы

    Переключить ширину страницы

    Позволяет изменить ширину страницы

    Выбор цвета

    Палитра цветов

    Позволяет изменить цвета некоторых элементов

    Типографика

    Выберите шрифт

    Раскладка разделов

    Сеточная раскладка

    Выстраивает разделы форума аккуратной сеткой.

  • Языки

    Выберите язык

    Вариант темы

    Светлая или тёмная тема
    Система Светлый Тёмный

Вопрос? Трейлер в модальном окне

Tolstyak87

Tolstyak87

Бывалый
Регистрация
21 Мар 2018
Сообщения
638
Рейтинг реакций
50
Баллы
28
Возраст
39
1/3
Автор темы
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код: 
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код: 
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },          
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {            
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код: 
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код: 
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
 

Вложения

  • Безымянный.png
    Безымянный.png
    560,9 КБ · Просмотры: 57
Последнее редактирование:
Tolstyak87 написал(а):
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код: 
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код: 
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },         
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {           
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код: 
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код: 
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Нажмите для раскрытия...
js код где находится в shortstory или в js ?
 
Автор темы
igrovik js находится в libs.js
 
Tolstyak87 написал(а):
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код: 
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код: 
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },         
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {           
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код: 
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код: 
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Нажмите для раскрытия...
В полной новости прописан id - #trailer-place, там где хранится трейлер?
 
Модальное окно может вообще не поддерживать определенные теги и так же плеер
 
Автор темы
salomonkayn в полной новости без хештега, вот так
Код: 
            <div class="fplayer video-box tabs-b" data-tab="tab-2" id="trailer-place">
            <iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>
             <!-- Трейлер -->   
            </div>
 
Автор темы
ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...
 
Tolstyak87 написал(а):
ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...
Нажмите для раскрытия...
Попробуйте поместить js код в shortstory и посмотрите результат. Насколько помню в файлах js доп поля не обрабатываются, их нужно как-то силой туда передавать, например ajax-ом .
 
Tolstyak87 написал(а):
salomonkayn в полной новости без хештега, вот так
Код: 
            <div class="fplayer video-box tabs-b" data-tab="tab-2" id="trailer-place">
            <iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>
             <!-- Трейлер -->  
            </div>
Нажмите для раскрытия...
Пробуй

HTML
Код: 
<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>

JS
Код: 
$('body').on('click','.showTrailer',function(){
   
        $('body').append('<div class="trailer_frame"><div class="iframe" id="trailer-box"></div><div class="overlay"></div> <span class="icon-close far fa-times"></span></div>');
       
        var w = $(window).width()-40;
        var meta = $(this);
        if( $('.trailer_frame').width() > w ) {
            $('.trailer_frame').height(w/($('.trailer_frame').width()/$('.trailer_frame').height())).width(w).css({'margin-left': 0-w/2});
        }
       
        $('.trailer_frame').animate({opacity: 1, top: $(window).height()/2-$('.trailer_frame').height()/2}, 'slow', function() {

                    metaS = meta.data('src'),
                    $.ajax({
                        url: metaS,
                        beforeSend: function() {
                            ShowLoading('');
                        },             
                        success: function(data) {
                           $("#trailer-box").append($('#trailer-place', data).html());
                           $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                            HideLoading('');
                        },
                          error: function() {               
                            HideLoading('');
                            alert('Что-то пошло не так');
                          }
                    });
                   
        });
       
    });
    $('body').on('click', '.trailer_frame .icon-close, .trailer_frame .overlay', function() {
        $(this).parent().find('iframe').remove();
        $('.trailer_frame').animate({opacity: 0, top: 0}, function() {
            $(this).remove();
        });
       
    });
CSS
Код: 
.iframe {
    width: 100%;
    height: 100%;
}

.trailer_frame {
    width: 700px;
    height: 394px;
    margin-left: -350px;
}

.trailer_frame {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 999;
    opacity: 0;
}

.trailer_frame .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
}

.trailer_frame .far {
    right: -20px;
    position: absolute;
    top: -20px;
    background-color: #1d1c21;
    padding: 14px 17px;
    color: #6d2bd6;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}

.iframe {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background: #1d1c21;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    z-index: 1;
}

.trailer_frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.trailer_frame .icon-close:hover {
    fill: #eee;
}
 
Автор темы
salomonkayn написал(а):
В твоем случае в HTML
добавь
data-src="{full-link}"
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" data-src="{full-link}"><span class="icon ion-md-play"></span></div>
Нажмите для раскрытия...
Этот способ все решил, достаточно было вставить {full-link}🙂😉
 
Tolstyak87 написал(а):
ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...
Нажмите для раскрытия...
Просто у меня модальное не поддерживает вообще кроме текста ничего

А что за шаблон где есть такое модальное?
 
Автор темы
В шаблоне плэйфилм к примеру.
ДЛЕ поддерживает модальные окна. У тебя все обстоит в рабочем js и стилях. Код js, который в стартпосто, рабочий, там же и строчка, для вставки в шортстори.
Если хочешь, завтра вечером буду дома, покопаюсь, поищу стили, попробуешь у себя.
 
Tolstyak87 написал(а):
В шаблоне плэйфилм к примеру.
ДЛЕ поддерживает модальные окна. У тебя все обстоит в рабочем js и стилях. Код js, который в стартпосто, рабочий, там же и строчка, для вставки в шортстори.
Если хочешь, завтра вечером буду дома, покопаюсь, поищу стили, попробуешь у себя.
Нажмите для раскрытия...
Да у меня модуль стоит попап, в нем поддержка только текста и full link
 
Автор темы
ArtAlf ну, а у меня без модуля все пашет.
 
salomonkayn написал(а):
Пробуй

HTML
Код: 
<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>

JS
Код: 
$('body').on('click','.showTrailer',function(){
  
        $('body').append('<div class="trailer_frame"><div class="iframe" id="trailer-box"></div><div class="overlay"></div> <span class="icon-close far fa-times"></span></div>');
      
        var w = $(window).width()-40;
        var meta = $(this);
        if( $('.trailer_frame').width() > w ) {
            $('.trailer_frame').height(w/($('.trailer_frame').width()/$('.trailer_frame').height())).width(w).css({'margin-left': 0-w/2});
        }
      
        $('.trailer_frame').animate({opacity: 1, top: $(window).height()/2-$('.trailer_frame').height()/2}, 'slow', function() {

                    metaS = meta.data('src'),
                    $.ajax({
                        url: metaS,
                        beforeSend: function() {
                            ShowLoading('');
                        },            
                        success: function(data) {
                           $("#trailer-box").append($('#trailer-place', data).html());
                           $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                            HideLoading('');
                        },
                          error: function() {              
                            HideLoading('');
                            alert('Что-то пошло не так');
                          }
                    });
                  
        });
      
    });
    $('body').on('click', '.trailer_frame .icon-close, .trailer_frame .overlay', function() {
        $(this).parent().find('iframe').remove();
        $('.trailer_frame').animate({opacity: 0, top: 0}, function() {
            $(this).remove();
        });
      
    });
CSS
Код: 
.iframe {
    width: 100%;
    height: 100%;
}

.trailer_frame {
    width: 700px;
    height: 394px;
    margin-left: -350px;
}

.trailer_frame {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 999;
    opacity: 0;
}

.trailer_frame .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
}

.trailer_frame .far {
    right: -20px;
    position: absolute;
    top: -20px;
    background-color: #1d1c21;
    padding: 14px 17px;
    color: #6d2bd6;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}

.iframe {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background: #1d1c21;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    z-index: 1;
}

.trailer_frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.trailer_frame .icon-close:hover {
    fill: #eee;
}
Нажмите для раскрытия...
Как заставить работать этот код в fullstory.tpl ? Выводит модальное окно без плеера. Хотя в исходном код код плеера есть
 

Вложения

  • 2e907f8354.jpg
    2e907f8354.jpg
    322,1 КБ · Просмотры: 15
Ссылку копируй через iframe
 
Diesellboy написал(а):
Может неправильно понял но так видео должно работать если в доп поле ссылка будет такая:
View: https://www.youtube.com/embed/7-0etDF6FBI
Нажмите для раскрытия...
В шот стори этот же код отрабатывает нормально
При нажатии на
<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>
Выводит модальное окно с плеером
в фул стори просто модальное окно
 
Чтобы ответить, войдите или зарегистрируйтесь.

Похожие темы Последние темы Популярные темы

Сейчас на сайте
134 онлайн  (5 участн., 129 гост.)
Кто онлайн
Темы 20.834
Сообщения 407.056
Участники 17.791
Новый пользователь ScroogePay
Назад
Сверху