Помогите разобраться со скриптом

  • 9 Ответов
  • 755 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Здравствуйте!

Использую WidgetKit, следовательно у меня подключен Uikit framework со всеми своими плюсами и минусами.

Нужно вывести iframe в Lightbox.

У Uikit есть свой lightbox:  http://getuikit.com/docs/lightbox.html, всем он мне нравится, НО он может выводить либо скрытые блоки, либо видео и картинки, т.е. фрейм в него (по внешней или внутренней ссылке) не запихать... В скрытом блоке iframe выводить - неправильно.

Решение я нашёл, вот оно: https://gist.github.com/malles/423a1eb266f169d01edc

Оно работает, прошу помощи в двух вопросах:
  • Скрипт работает если его разместить текстом непосредственно в index.php шаблона, я бы хотел подключить отдельный файл.js, но так не срабатывает, наверное что-то нужно изменить. Подскажите как!
  • В скрипте прописана ширина и высота открывающегося фрейма. Скажите, а возможно ли эти параметры передать прям в ссылке, и как это сделать.

P.S. О существовании таких плагинов как "modals" от nonumber, я знаю. Но мне кажется и одного WidgetKit много, я его и установил, так сказать, для универсальности.

На всякий случай, вот сам скрипт:

Код
(function () {

    "use strict";

    UIkit.on('beforeready.uk.dom', function () {

        UIkit.plugin("lightbox", "iframe", {

            init: function (lightbox) {

                lightbox.on("showitem.uk.lightbox", function (e, data) {

                    var resolve = function (source, width, height) {

                        data.meta = {
                            'content': '<iframe class="uk-responsive-width" src="' + source + '" width="' + width + '" height="' + height + '"></iframe>',
                            'width': width,
                            'height': height
                        };

                        data.type = 'iframe';

                        data.promise.resolve();
                    };

                    if (data.type === 'iframe' || data.source.match(/\.(html|php)$/)) {
                        resolve(data.source, (lightbox.options.width || 800), (lightbox.options.height || 600));
                    }
                });

            }
        });
    });
}());

Работает со ссылкой такого вида:
Код
<a class="uk-button" href="http://getuikit.com" data-uk-lightbox data-lightbox-type="iframe">Iframe lightbox</a>
« Последнее редактирование: 23.01.2016, 04:39:17 от Театрал »

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите разобраться со скриптом
« Ответ #1 : 23.01.2016, 03:54:36 »
"Нужно вывести iframe в Lightbox."

Так в JCE Box есть сразу вывод?!
И там ширина и высота заявлена и прописывается для каждой ссылки.
Модалка там уже готовая, я сегодня лично делал!

Что не так у вас? зачем скрипты, если они в плагине и движке?

///

Напишите точное ТЗ , что вам надо.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

Re: Помогите разобраться со скриптом
« Ответ #2 : 23.01.2016, 04:33:05 »
Так в JCE Box есть сразу вывод!

Дело в том, что я хотел ограничиться минимальным набором: Joomla, свой простенький шаблон, WidgetKit (как универсальная вещь для слайдеров скроллеров, галлереи и подобного).

Что в общем-то и получилось. Модальные окна от WidgetKit уже использую для галереи например.
Для полного счастья не хватило только фрейма в модальном окне.
Просто не хочу под каждую новую задачу устанавливать определённое расширение, которые потянут свои скрипты и стили. Стандартного TinyMCE мне вполне хватает.

Ну как уже точнее написать...
1. Данный скрипт у меня заработал, но только если вставляю в Index.php прям текстом в тегах <script>, хочу вынести в отдельный файл JS, но тогда он не работает. Наверное для этого нужно какие-то правки внести, спрашиваю какие.
2. Когда фрейм открывается в Lightbox, у него размеры те, что прописаны в скрипте, я бы хотел что бы эти параметну можно было указывать прямо в ссылке. Как-нибудь вот так:
Код
<a class="uk-button" href="http://getuikit.com" data-uk-lightbox data-lightbox-type="iframe" width="400" height="200">Iframe lightbox</a>
« Последнее редактирование: 23.01.2016, 04:40:42 от Театрал »

*

dmitry_stas

  • ********
  • 9652
  • 929
Re: Помогите разобраться со скриптом
« Ответ #3 : 23.01.2016, 04:40:27 »
1. судя по коду, прекрасно работает во внешнем файле. вероятно вы вызываете функцию до того когда загружен/определен UIkit или еще не готова DOM. загружайте после основной библиотеки и/или используйте jQuery.ready
2. судя по коду, точно также как если бы вы задавали ширину и высоту lighbox, но выводили в нем не iframe, а например скрытый блок. видимо это не width="400" height="200" а как то иначе для этого lighbox
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

Re: Помогите разобраться со скриптом
« Ответ #4 : 23.01.2016, 05:16:29 »
1. вероятно вы вызываете функцию до того когда загружен/определен UIkit.

Точно, спасибо! как-то не посмотрел даже...

Цитировать
2. точно также как если бы вы задавали ширину и высоту lighbox, но выводили в нем не iframe, а например скрытый блок.

Наверное размер самого lighbox-а вообще не регулируется... Т.е. он будет такого размера как его содержимое, если оно в пределах области просмотра (если больше монитора, то уменьшается)...

Вот страница компонента: http://getuikit.com/docs/lightbox.html, тут тесты: http://getuikit.com/tests/components/lightbox.html. Там такое не описано и не используется.

Получается, что только через высоту и ширину iframe можно получить нужный размер. А как это передать через скрипт, не поможете?

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите разобраться со скриптом
« Ответ #5 : 23.01.2016, 11:14:26 »
 в ручную, скрипт так не переделаете.
и повторюсь: боксом пользуйтесь и нормальным редактором.
когда поймёте, что он лучше-пропадут ошибки ваши.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

dmitry_stas

  • ********
  • 9652
  • 929
Re: Помогите разобраться со скриптом
« Ответ #6 : 23.01.2016, 13:23:58 »
Наверное размер самого lighbox-а вообще не регулируется...

должен. у вас в коде

Код: javascript
lightbox.options.width || 800

т.е. если определена lightbox.options.width, то использовать ее, иначе 800. сделайте вывод

Цитировать
console.log(lightbox);
resolve(data.source, (lightbox.options.width || 800), (lightbox.options.height || 600));

и посмотрите в консоли что это за объект
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

Re: Помогите разобраться со скриптом
« Ответ #7 : 24.01.2016, 06:55:00 »
должен...

Действительно.

Консоль.лог я подключил, правда понял там не много...
Но и этого хватило, чтобы допёрло, что  через ссылку для у lighbox-ов можно передать атрибут с опциями: data-uk-lightbox="{...'}", где можно объединить их в группу, указать время анимации, добавить стрелки.

Как оказалось, туда же можно добавить ширину и высоту iframe для этого скрипта.

Dmitry_stas, выражаю вам огромную благодарность! Без вас я бы не разобрался!

*

dmitry_stas

  • ********
  • 9652
  • 929
Re: Помогите разобраться со скриптом
« Ответ #8 : 24.01.2016, 14:13:09 »
Действительно.
красота :) недокументированная возможность?
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
Re: Помогите разобраться со скриптом
« Ответ #9 : 24.01.2016, 18:13:38 »
красота :) недокументированная возможность?
Дмитрий дельный! И я выражаю просто так свой "плюс" В карму добавлю!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями