Недавно столкнулся с темой использующей модальные окна facebox.
Довольно интересное решение.
Наверное все уже встречали окна типа lightbox — красивые всплывающие окна с картинками. При помощи lightbox можно делать как отдельные картинки , так и целые галереи.
Но есть в этом и один минус — показывать в этих окнах можно только картинки.
Facebox — это такие же всплывающие окна, как и lightbox только с одним большим отличием : загружать в них можно как картинки, так и текст, код, да и вообще почти все что угодно.
Facebox работает на jQuery — т.е. для ее работы необходимо подключить эту библиотеку версии не ниже 1.2.1.
Скачать facebox можно тут.
<script src="/js/jquery.js" type="text/javascript"></script> |
Далее подключаем сам скрипт и его стили:
<!-- facebox start --> <link href="/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> <script src="/js/facebox/facebox.js" type="text/javascript"></script> <!-- facebox end --> |
А так же скрипт по которому понятно, что окно должно быть модальным:
<!-- facebox rel= --> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loading_image : 'loading.gif', close_image : 'closelabel.gif' }) }) </script> <!-- facebox rel= end --> |
Чтоб вывести произвольный текст модальном окне пишем следующий код:
<a rel="facebox" href="#info">Появление произвольного блока в facebox</a> <div id="info" style="display: none;"> Ваш текст </div> |
Пример блока :
Появление произвольного текстового блока в facebox
Чтобы загрузить удаленную страничку в модальном окне пишем :
<a rel="facebox" href="remote.html">text</a> |
Пример robots.txt в модальном окне
Что эти окна могут делать?
Эта технология похожа на всплывающие окна , но в отличии от последних не блокируются браузером.
К тому же очень красиво :) и функционально.
с вин-1251 кодировкой не дружит. в окне кракозябры. где и что прописать.
Читаем документацию — работает только с utf-8 — это если делать iframe.
При обычном выводе — дружит хорошо. А вот если внешнюю страницу подгружать — то только utf-8.
Подскажите как это это все подключить что бы работало в wordpress?
А это и работает в вордпресс. Сайт у меня именно на нем.
Попробуйте еще раз прочитать статью.
Скрипты ложим в подпапку темы и прописываем полный путь к ним.
Вывод окна — в посте.
В данном примере используется скрипт выполняемый на серверной стороне ? У меня на Yandex-narod работает страшно коряво. То не догружается контент в IE и FF, то загружается и далее пытается уйти на другую страницу в ОПЕРЕ . Как решить проблему.
Скрипт выполняется у клиента — это основа javascript.
На "Народе" разрешают использовать java-скрипты ?
Посмотреть бы код — подкружаете ли Вы на странице библиотеку jQuery, правильно ли прописаны классы и прочее.
У себя на машине проверьте может стоять банерорезка ) проверьте с другой машины Ваш сайт.
Посмотрите здесь пожалуйста ( Щелкните по названию любого канала ) . Правда тут не facebox , но его я тоже использовал с идентичным результатом. Только iFrame работает.
Не работает именно AJAX
Почитайте документацию — как правильно использовать Pretty, и как правильно передавать в нео Ajax-контент.
Сразу не скажу , но мне кажется что только iframe и будет работать.
Из модальных окон попробуйте использовать fancybox — мне он понравился больше.
И с Ajax точно работает.
Спасибо за совет. Fancybox пробовал , отлично работает , но Ajax только на локалке. Дошло до того , что я тупо вставил ДЕМО на сайт удалив со страницы все остальное. Результат тот же. Все работает , кроме Ajax.Я уже не знаю что делать. Может вместо Ajax использовать iFrame. Или что другое порекомендуете для загрузки в модальные окна внешних файлов. Спасибо!
т.е. с Fancybox такие же симптомы ?
Тогда вариантов 3:
1. Переходите на платный хостинг;
2. Используйте API Fancybox или Pretty для подгрузки ajax-контента;
3. Используйте iFrame для подгрузки внешних файлов.
Заметил , что в Googl Chrome работает отлично на любом компе..Что бы это значило ?
Я нашел причину. Yandex в запрашиваемый вншний файл вставляет свой фрагмент кода с рекламой.
Вот он :
</textarea></form>
</title></comment>
</div></span></ilayer></layer></iframe></noframes></style></noscript></table></script></applet></font>
<style>
#bn {display:block;}
#bt {display:block;}
</style>
<div style="background:url )"></div>
<script language="JavaScript" src=";
<!— mailto:spm111@yandex.ru —>
Подскажите , как избавиться от вредоносного влияния кода Yndex ?
Существует какой-нибудь метод вырезать рекламу при приеме . Или может указывать какой DIV вставлять в мод. окно , а остаток игнорировать скриптом ?
Видимо никак :(
Смотрите п.1. Сменить хостинг — без рекламы который.
Или говорите с народом — возможно при проплате есть возможность рекламу убрать.
Спасибо !
на локалке работает на всех браузерах. На других машинах как и на моей не работает правильно с удаленного узла ( сервера НАРОД ).
Подскажите пожалуйста, можно ли как-нибудь действие facebox привязать к кнопке input, как к ссылке?
Конечно. Вызывайте модальное окно на OnClick или любое другое действие.
Спасибо, получилось)
У меня ещё один вопрос;)
А как сделать чтобы у внутренних ссылок и кнопок тоже работал facebox? Т.Е. человек нажал на ссылку и оно перетрансформировалось в следующее окно
Хочется чтобы процесс продолжался в окне, пока человек не нажмет "закрыть"..
Используйте в модальном окне iframe
Спасибо!
ссылка на архив не открывается, исправьте
Здравствуйте.
Подскажите плз, почему если я загружаю через фейсбокс другую страничку, а именно форму с капчей, у меня картинки капчи не загружаются? Видимо им надо где-то путь перепрописать, но никак не могу понять где? Спасибо.
Попробуйте для начала просто вставить любую картинку. Если картинка загрузится искать причину нужно не в модальных окнах, а в коде капчи. И еще попробуйте капчу без модального окна.