Видео в lightbox


Добрый день!

Возможно ли встроенными средставми сделать вывод видео в лайтбоксе? Чтобы по клику на ссылке видео открывалось во всплывающем модуле с затемнением экрана. Пример тут: http://b.mega-tray.ru/ - справа сбоку. Если нет, то что нужно дополнительно прикрутить?

Спасибо!

10 ответов
  • Владимир Сергеев
    Разработчик
    Решение
    28 октября 2016 09:46

    Думал я, думал, и придумал! =)
    Встраиваем iframe с видео на страницу.
    Скрываем её из меню и от роботов: доп. параметры: hide=1 и hide_robots=1


    Копируем чистую ссылку на страницу (без ?preview=...).

    Идём в блок, или туда, где вам нужно вставить ссылку на видео.
    И вставляем туда следующий код:
    <a href="ссылка на страницу с видео" class="popUpLink">Ссылка на видео</a>

    Самое главное указать класс popUpLink
    При нажатии по такой ссылке, в модальном окне откроется всё содержимое страницы по ссылке.

  • Владимир Сергеев
    Разработчик
    Решение
    26 октября 2016 15:19

    Это нужно брать код ролика, прятать его в блоке lightbox'a, а затем на ссылку вешать вызов этого лайтбокса.

  • Яхъяев Сулим
    26 октября 2016 15:27

    Это я понимаю :) Вопрос в том, как именно этот лайтбокс в данной теме реализован. Вот так:

    <!-- --><!-- --><a href="xxx" data-toggle="lightbox"> <img src="eee" class="img-fluid"> </a>

    не работает. Видео вылезает на все окно, без лайтбокса.

  • Владимир Сергеев
    Разработчик
    Решение
    26 октября 2016 15:30

    Хотя может быть всё проще.
    Нужно включить Fancybox в настройках темы (если у вас сторонний плагин её тоже не использует).

    В теме используется первая версия Fancybox, если у вас какой-нибудь плагин подключает, вторую версию, то тогда будет конфликт и лучше не подключать Fancybox в теме.

    Затем встроить ссылку на видео таким образом:

    <a class="iframe" href="ссылка на ютуб">Текст ссылки</a>

    Посмотреть, что будет.
    Если открывать не будет, то нужно эту ссылку инициализировать – добавить скрипт на сайт:

    $(document).ready(function() {
      $("a.iframe").fancybox();
    });
  • Яхъяев Сулим
    26 октября 2016 16:10

    Fancybox включен изначально. Класс iframe ничего не дал, ссылка открывается как обычная, т.е. с переходом на ютуб в полноэкранном режиме. Дополнительный код куда именно нужно вставить? Пробовал прямо перед ссылкой - он текстом вывелся на сайте...

  • Яхъяев Сулим
    26 октября 2016 16:17

    Вставил в flatty.footer.user_scripts - ничего не произошло...

    • Владимир Сергеев
      Разработчик
      Решение
      26 октября 2016 16:20

      А ссылочку можно на сайт?

      • Яхъяев Сулим
        26 октября 2016 16:31

        сбоку картинка с лобстером на гриле (тестовая). должна открывать видео.

        http://www.krafthaus.ru/tandyry/

      • Владимир Сергеев
        Разработчик
        Решение
        26 октября 2016 16:51

        Там, по ходу, смешивание контента происходит. Когда сайт без http пытается получить данные с сайта на https. У вас ссылка на ютуб https. Не уверен, что он вам даст по http что-то показать..

        Здесь я, если честно, не знаю даже что предпринять можно.. =(

        • Яхъяев Сулим
          26 октября 2016 17:04

          Странно... тут у меня вроде тоже сайт без хттпс, но все работает. Да и как связан лайтбокс и его отсутствие с тем, по какому протоколу в него данные заливать? Ведь ссылка открывается, и простой айфрейм с ютуба (тоже через хттпс) я могу на шопскриптовский сайт вставить спокойно. А вот как его в лайтбокс запихать - не понимаю тоже...

          • Владимир Сергеев
            Разработчик
            Решение
            26 октября 2016 17:11

            Не знаю как влияет.
            Но когда идёт перемешка с протоколами в консоли всегда ошибки появляются.
            Когда iframe вставляете, это что-то типа "песочницы". Он живёт своей жизню, на сколько я понимаю. А тут идёт загрузка, видимо, по аяксу. А аякс блокируют из-за перемешки протоколов.

            На вашем другом сайте может быть по другому всё реализовано.
            Можно прпобовать ещё спрятать встроенный iframe на самом сайте, а по клику по картинки его открывать.

            Но это долгая история. Постараюсь завтра посмотреть, как это можно сделать..

  • Яхъяев Сулим
    26 октября 2016 16:20

    a class="fancy" - тоже ничего не дает

  • Владимир Сергеев
    Разработчик
    Решение
    27 октября 2016 18:22

    Сегодня не удалось.. Завтра посмотрю.

  • Яхъяев Сулим
    30 октября 2016 21:11

    Супер! Спасибо большое! Так работает.

    Только есть пара странностей, которые я пока не до конца понял, откуда берутся...

    1. Если закрыть всплывающее окно, то продолжает играть саундтрек из видео, то есть оно продолжает грузиться и играть, но управлять им нет никакой возможности - только перезагрузка/уход со страницы или повторный вызов ссылки на видео. Как бы сделать так, чтобы при закрытии окошка айфрейм полностью гасился и все запущенное в нем тоже закрывалось?

    2. Если задать габариты айфрейма отличные от стандартных, попап-окошко остается шириной 600. Я так понимаю, потому что класс .modal-dialog задает ширину в пикселях, можно ли поправить это так, чтобы ширина окна стала "резиновой" и растягивалась в пределах от заданной жестко до ширины контента, в случае если последняя больше заданной?

    • Владимир Сергеев
      Разработчик
      Решение
      31 октября 2016 18:53

      1. Откройте приложение Сайт - дизайн - Формула успеха - шаблоны - файл options.site.script.html.
      В этом файле найдите строку:

      popUp.modal();

      И сразу за ней вставьте этот код:

      $(popUp).on('hidden.bs.modal', function (e) {
        popUpLabel.empty();
        popUpBody.empty();
      });

      2. На счёт второго. Не уверен, что это хорошая идея..
      Т.к. эти окошки много где используются в дизайне, и данные изменения могут вызвать эффект домино в остальных модальных окошках.

      Я вам советую задать ширину iframe равной 100%.

      • Якубов Андрей
        5 марта 2017 23:31

        1. Я правильно понял, получится:

        У меня не помогает - все равно при закрытии iFrame идет звук.
        М.б. что то не так сделал ?

        p/s/ ссылки на http://elementsv.ru , под слайдером


        • Владимир Сергеев
          Разработчик
          Решение
          6 марта 2017 09:11

          У вас предыдущая версия темы.
          Я не знаю в чём там может быть ошибка. Нужно смотреть админку.

  • Яхъяев Сулим
    18 апреля 2017 15:13

    Вроде ничего не трогали, а тут раз - и снова видео слетело. http://www.krafthaus.ru/tandyry/ - жмем на видео, грузится пустая страница со счетчиком вместо лайтбокса. Если убрать class="popUpLink", то грузится обычная страница сайта с видео в содержимом... может обновление какое-то что-то сбило? Как бы "вернуть все взад"? :)

    • Владимир Сергеев
      Разработчик
      Решение
      18 апреля 2017 15:23

      Не знаю, как вам всё в зад вернуть =)
      Все так говорят: Ничего не делали, оно само "сломалось". =)

      Что-то у вас со скриптами случилось. Ищите, может, может какой-то плагин установили, который конфликт в скриптах вызывает.

      • Яхъяев Сулим
        19 апреля 2017 15:11

        а есть какой-то стандартный дебаггер для таких целей или как ускорить этот процесс, не прибегая к "все снести и поставить заново"? :) кстати, в каком файле прописаны свойства класса popuplink?

      • Владимир Сергеев
        Разработчик
        Решение
        19 апреля 2017 15:37

        А у вас, случайно, нет никаких скрытых поселений с одинаковыми урлами?

        Бебаггера как такового нет.
        Можно включить логирование php в настройках приложения Логи. И посмотреть, что там происходит.

        Но есть ошибка именно в скриптах, то php логи могут ничего не показать.
        А так можно в инсталлере – установлено отключать по очереди плагины. Сносить ничего не надо.

        • Яхъяев Сулим
          19 апреля 2017 17:07

          не нашел в логах ничего существенного... скрытых одноименных поселений нет.

          скачал всю папку с шаблоном по фтп, сделал поиск по всем файлам на предмет popUpLink - нигде не нашел. где-все такие этот класс задается?

          • Владимир Сергеев
            Разработчик
            Решение
            19 апреля 2017 17:11

            Обработчик этого класса popUpLink находится в файле options.site.script.html в файлах темы для приложения Сайт.

    • Меркулов Иван
      19 апреля 2017 14:58

      откуда у вас эти модули? где их взять?

      • Яхъяев Сулим
        19 апреля 2017 15:09

        Это стандартный плагин "купить в 1 клик", который вроде бесплатный даже. А второе - это собственная реализация групповых продаж на основе плагина "товары-комплекты" (просто 2 разных предложения с разным оформлением).

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!