Форум русской поддержки Joomla!® CMS
09.12.2016, 06:01:54 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 444 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Театрал
Осваиваюсь на форуме
***

Репутация: +5/-0
Offline Offline

Сообщений: 96



« : 23.01.2016, 01:47:27 »

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

Использую 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, 03:39:17 от Театрал » Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #1 : 23.01.2016, 02:54:36 »

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

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

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

///

Напишите точное ТЗ , что вам надо.
Записан
Театрал
Осваиваюсь на форуме
***

Репутация: +5/-0
Offline Offline

Сообщений: 96



« Ответ #2 : 23.01.2016, 03: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, 03:40:42 от Театрал » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7776



« Ответ #3 : 23.01.2016, 03:40:27 »

1. судя по коду, прекрасно работает во внешнем файле. вероятно вы вызываете функцию до того когда загружен/определен UIkit или еще не готова DOM. загружайте после основной библиотеки и/или используйте jQuery.ready
2. судя по коду, точно также как если бы вы задавали ширину и высоту lighbox, но выводили в нем не iframe, а например скрытый блок. видимо это не width="400" height="200" а как то иначе для этого lighbox
Записан
Театрал
Осваиваюсь на форуме
***

Репутация: +5/-0
Offline Offline

Сообщений: 96



« Ответ #4 : 23.01.2016, 04:16:29 »

1. вероятно вы вызываете функцию до того когда загружен/определен UIkit.

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

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

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

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

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #5 : 23.01.2016, 10:14:26 »

 в ручную, скрипт так не переделаете.
и повторюсь: боксом пользуйтесь и нормальным редактором.
когда поймёте, что он лучше-пропадут ошибки ваши.
Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7776



« Ответ #6 : 23.01.2016, 12:23:58 »

Наверное размер самого lighbox-а вообще не регулируется...

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

Код
lightbox.options.width || 800

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

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

и посмотрите в консоли что это за объект
Записан
Театрал
Осваиваюсь на форуме
***

Репутация: +5/-0
Offline Offline

Сообщений: 96



« Ответ #7 : 24.01.2016, 05:55:00 »

должен...

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

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

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

Dmitry_stas, выражаю вам огромную благодарность! Без вас я бы не разобрался!
Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7776



« Ответ #8 : 24.01.2016, 13:13:09 »

Действительно.
красота Azn недокументированная возможность?
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #9 : 24.01.2016, 17:13:38 »

красота Azn недокументированная возможность?
Дмитрий дельный! И я выражаю просто так свой "плюс" В карму добавлю!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet