Drupal → Как открыть в Fancybox любую страницу сайта

спасибо, милый человек. Упростили мне задачу, я собирался курить аналог с lightbox2 lightmodal functionality in the Lightbox2

Никто не в курсе, есть ли в лайтбоксе возможность сделать вот это: $.fancybox({content:content});
То есть открыть модальное окно с определенным контентом.
Там можно через rel="lightmodal" загрузить уже готовую страницу..

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

Lightbox.start(jqueryObject);

спасибо!

Скажите я правильно понимаю, что друпал автоматом убирает page.tpl.php из вывода когда видит в хедере запроса метод аякса ??? тоесть пофигу на какую страницу запрос делаешь в результате получишь чистое содержание переменной $content ???

нет, друпал не умеет отдавать page callback-и без вызова theme_page. почитайте алгоритм под скриншотом.

Ах точно, невнимательно посмотрел заметку ... эх столько компромисов и костылей, порой друпал так раздражает своей неповоротливостью)

ну у вас всегда есть шанс написать свой модуль, который исправит эту ситуацию ;)

Я подозреваю, что такой модуль будет ещё одним костылем :)
В любом случае спасибо за наводку, буду пользоваться по мере необходимости.

Сейчас смотрю модуль popups, хочу часть административных функций сделать в всплывающем окне. Это решению тоже испробую. Спасибо

Подскажите как заставить чтобы в всплывающей форме подгружался js.

Те . я вывожу форму добавления материала в которой есть поле Hierarchical Select
Оно там не работает, пишет "You don't have Javascript enabled."

Спасибо

перед показом формы подгрузите нужные скрипты с помощью $.getScript

а как это сделать?
где именно прописать?

после вызова $.fancybox.showActivity();

пишу
$.getScript("/sites/default/files/js/js_69e826c765d2c77bb668b8af5c93220e.js");
те. загружаю собственно все скрипты

форма вообще не грузится

нужно подгружать файлы Hierarchical Select а не все скрипты, плюс окно надо показывать после загрузки скриптов, смотрите документацию по getScript

к сожалению для меня js это темный лес, не могли бы вы привести пример открытия формы создания страницы с подгрузкой скажем стандартного /misc/collapse.js ?
я так понял js вообще не загружаются в fancybox

спасибо

$.getScript('/misc/collapse.js', function(){
  // всё что после $.fancybox.showActivity();
});

делаю так

 $(document).ready(function(){ 
	  
        
         $('.add-q').click(function(){
            $.fancybox.showActivity();
            $.getScript('/misc/collapse.js', function(){
            $.get(Drupal.settings.basePath + 'node/add/q', function(data){
                var form = $('#main-content-inner', data);
                $.fancybox({content:form});
        })};
           
});
       
     });
	

не работает

посчитайте число открытых и закрытых скобок

понял, не закрыл $(document).ready(function(){
но не помогло

попробуйте перед $.fancybox({content:form}); вызвать Drupal.attachBehaviors(form);

так не загружается форма :(

смотрите в консоль ошибок

ну ок, ладно фиг с ним

добрый день! не подскажете как такое же сделать с Colorbox ? мне нужно контактную форму открыть в колорбоксе. вход на сайт, регистрацию сделал с модулем Fancylogin, очень неплохой модуль, а вот с контактной формой пока не разобрался. Drupal 7 . заранее спасибо за ответ.

посмотрите api колорбокса, там ничего сложного

к сожалению не силен еще в работе с API , чуть глубже можно подсказку?

пример со страницы http://colorpowered.com/colorbox/ :

$.colorbox({html:'<p>Hello</p>'});

совсем туплю похоже, у меня на странице "контакты" есть кнопка "написать нам", при клике на которую должно открыться всплывающее окно с контактной формой, куда я должен вставить данный вызов Colorboxa ?

в js файл

т.е я должен создать новый js файл со своим названием , туда прописать данный вызов и добавить этот файл в .info в моей теме ? я правильно понял?

ну как вариант

а вы имели ввиду другой вариант?

я ничего не имел ввиду :) вариантов много, и это один из них

спасибо буду копать дальше

Не поможете тоже самое сделать с Colorbox'ом? Сколько не пытался, не получается.

Сделал ссылку:
<a class="colorbox-inline" id="contacts" title="Контакты" href="/contact">Контакты</a>
Отдельный .js файл подключил:

jQuery(document).ready(function() {
$('#colorbox-inline').click(function(){
    $.get(Drupal.settings.basePath + 'contact', function(data){
        var form = $('#contact-site-form', data);
		$.colorbox({href:form});
    });
    return false;
});
});

И еще, необходимо такое делать не только для формы контактов, но и для других страниц (нод). А там как быть? Там же нет форм?

$('.colorbox-inline')

$.colorbox({html:form.html()});

Там же нет форм?

селектор можно указать любой

Решил все таки остановится на Fancybox.
Через плагин ссылка открывается, а через ваш код нет. Drupal 7.

Сделал ссылку:
<p><a id="fancy-contact" href="/contact">контакт</a></p>
В page.tpl.php добавил:

<script type="text/javascript">
$('#fancy-contact').click(function(){
    $.fancybox.showActivity();
    $.get(Drupal.settings.basePath + 'contact', function(data){
        var form = $('#contact-site-form', data);
        $.fancybox({content:form});
    });
    return false;
});
</script>

Поменял только #contact-site-form
Не хочет работать.

http://xandeadx.ru/blog/drupal/302#comment-1305
http://drupal.org/node/756722

Ура, спасибо помогло оборачивание в jQuery(document).ready(function($) { });

здравствуйте! снова вернулся к колорбоксу, решил что все-таки нужно завершить начатое. остановился на таком моменте - в файле page.tpl.php прописываю написать нам - на всех страницах отображается ссылка НАПИСАТЬ НАМ , но дальше контактная форма открывается в колорбоксе только со страницы /myIP/mySyte/ как только переходим на любую другую страницу - то колорбокс открывается без контактной формы. подскажите куда копать дальше.

копать в сторону дебага яваскрипта

<div id="node-72"><a class="colorbox-inline" href="colorbox/form/contact_site_form?destination=контактная-форма&width=500&height=330">написать нам</a></div>

извиняюсь код забыл завернуть в теги и он отобразился ссылкой НАПИСАТЬ НАМ.

можно посильнее пинок? базовых знаний пока не хватает, хотя и стараюсь, пока могу только как обезьяна по аналогии действовать.

http://firebug.ru/js.html

Здравствуй, постоянно курю все твои статьи, решил, заодно задать вопрос, над которым думаю уже пару дней:
"Как сделать, чтобы при отправке формы данные отсылались и все validate и submit'ы проходили, в страница не перезагружалась и, вместо этого, окно просто закрывалось. А если validate не пройден, то в этом же окне юзер и видел ответ. То есть полностью на аяксе сделать весь процесс работы с формой, а не только загрузку."

Dmitry Pogodaev, http://drupalace.ru/lesson/zastavlyaem-lyubuyu-formu-vypolnyatsya-chere…
Надеюсь, xandeadx не воспримет как крайнюю наглость)

А для 6-ки нет ? забывал указать, что до сих пор пишу только на ней

Спасибо за пример, всё работает, вопрос такой: как сделать чтобы после нажатия на кнопку Отправить формы контактов, результат отправки показывался тоже в Fancybox, т.е. чтобы не уходить с текущей страницы.

В IE 8 Не работает

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

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

Спасибо

$(function() {
  $('#fancy-contact').click(function() {
    $.fancybox.showActivity();
    $.get(Drupal.settings.basePath + 'contact', function(data) {
      var form = $('#contact-mail-page', data);
      $.fancybox({content:form});
    });
    return false;
  });
});

А куда это вставлять? Хочу поставить на $buttons в формах типа node/add

А куда это вставлять?

Этот вопрос конечно омрачает... люди, что второй день в друпале. Купите книгу? Сейчас кстати по 7-ке на русском наконец то достойная вышла.

В IE 8 Не работает

Этот код из примера статьи плохо работает. Да и firefoxe пришлось понять, что в версии выше 2.0 http://fancyapps.com/fancybox/#license этого - $.fancybox.showActivity(); - нет! то есть не нужно.
А DEMO - смотрите в папке demo прекрасно работает.

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

пользуйтесь ctools

ctools, конечно тоже вариант... Подскажите, как можно вызвать модальное окно (используя ctools) автоматически при загрузке сайта. Что нужно прописать в hook_init?
Заранее спасибо

Добрый день

а не подскажите как сделать так чтоб в сплывающем окне отработал эскрипт из этого модуля In Field Labels http://drupal.org/project/In-Field-Labels просто так срабатывает а с fancy не хочет

при этом этот же модуль коректно работает с модулем popup

Для тех у кого не получилось (Drupal 7.22 и fancyBox 7.x-2.0-alpha5 для формы contact):
1. Не забываем включить модули fancyBox и Contact.
2. Не забываем скачать и закинуть в папку /sites/all/libraries/fancybox содержимое скачанного архива (source, lib, demo) со страницы: http://fancyapps.com/fancybox/.
3. Для JavaScript кода из Drupal 6 незабываем обёрточку как в статье.
4. В версии 2 fancyBox: $.fancybox.showActivity(); заменяем на $.fancybox.showLoading();
5. fancy-contact - id HTML элемента по которому жмякаем для появления окна, contact - относительный URL на сайте, а contact-mail-page - id HTML формы в загружаемой странице (например в Drupal 7, форма контактов на странице contact имеет ID: contact-site-form).

:)

а нельзя ли просто перечислить селекторы в fancyBox Selectors? не могли бы вы написать законченный пример для семерки? а то не получается у меня

нет, автор, если вы списали, то дайте ссылку источника, может там я найду ответ.

а нельзя ли просто включить голову и не задавать идиотских вопросов?

эти пункты я выполнил, но все же...
1. Не забываем включить модули fancyBox и Contact.
2. Не забываем скачать и закинуть в папку /sites/all/libraries/fancybox содержимое скачанного архива (source, lib, demo) со страницы: http://fancyapps.com/fancybox/.
3. Для JavaScript кода из Drupal 6 незабываем обёрточку как в статье.
4. В версии 2 fancyBox: $.fancybox.showActivity(); заменяем на $.fancybox.showLoading();
5. fancy-contact - id HTML элемента по которому жмякаем для появления окна, contact - относительный URL на сайте, а contact-mail-page - id HTML формы в загружаемой странице (например в Drupal 7, форма контактов на странице contact имеет ID: contact-site-form).

уважаемый xandeadx прошу, для семерки покажи нормальный пример

в общем разобрался, был конфликт jquery из-за чего не получалось. теперь вопрос как устранить эту беду. у меня подключен jquery 1,8 или 1,9 версия, обновить не получится так как на сайте работает плагин datatables. как разрешить обновременную работу как jquery 1.7 и 1,8 или 1,9

вообще то это вопросы не по теме. Вам лень ваш же текст набрать в поисковике и найти первый же ответ. Не зачет!?

Спасибо за информацию. А как туда поместить ноду? т.е. без шапки футера и т.д.

по аналогии

Краткость - сестра таланта! )))
Николай, вы задали вопрос - очень примитивный, сразу видно что с js вы не работали. Здесь же не курсы для новичков. Вам стоит пройти курс. Я тоже когда то посмотрел.

Здравствуйте! Вопрос уже поднимался здесь, но у меня никак не получается сделать по аналогии с выводом нод, но через Lightbox. Подскажите, пожалуйста, на что заменяется $.fancybox.showActivity();? Вообще, $.fancybox? Простая замена на lightbox ничего не дает..

Будет ли работать аякс в этом попапе, на предмет проверки валидности полей?
И закроется ли окно после успешной отправки сообщения?

нет

Подскажите, как в открытой странице через fancybox провести валидацию полей (для формы)?
Предположим, я открыл через fancybox форму регистрации пользователя. Если я не ввел обязательные поля, то окно закрывается, а меня перекидывает на страницу регистрации и уже там выдаются ошибки. Как сделать, чтобы проверка проходила ВНУТРИ окна fancybox и ошибки выводились там же?

гуглите "drupal ajax validation"

Гуглить это хорошо, но тяжело ;-)
Проще взять модуль и глянуть код: https://www.drupal.org/project/commerce_buy_one_click
Смотрите функцию валидации!

И снова я к xandeadx обращусь:
В Drupal 7 нужно дополнительно обернуть код в:

(function($) {
  ...
})(jQuery);

Так правильнее? Или одинаково?

В fancybox 2.x .showActivity() заменили на .showLoading()

ну, я еще читал про анимацию загрузки тут в блоге https://shneider-host.ru/blog/animaciya-zagruzki-stranicy-v-drupal-7.html тут более проще написано, а мне, как новичку вообще сложно пока такие вещи воспринимаются))

Здравствуйте, нестандартная ситуация с FancyBox.
В модальном окне выводится форма обратной связи.
При первом нажатии кнопки вызова указанная форма выходит за пределы модального окна, появляются полосы прокрутки

При повторных вызовах форма обратной связи принимает форму модального окна.

http://scalemodels-tu154.ru/articles/7_4_Tu_154M_RA_85694.htm

С чем это может быть связано?