Вопрос по jquery-tools, overlay, jquery, iframe, lightbox – Как сделать лайтбокс «прорывом» из фрейма?

4

У меня есть iframe на первой странице сайта. Iframe загружает страницу .php, которая имеет ротатор, созданный с помощью вкладок инструментов jQuery. На первой вкладке я использую jQuery Tools Overlay, чтобы выложить видео YouTube в лайтбокс.

Это все работает нормально на отдельной странице, однако при просмотре на главной странице сайта лайтбокс ограничивается рамкой iframe.

Мне нужен лайтбокс для всплывающего окна / перехода из iframe и захвата всей главной страницы сайта.

Есть ли способ получить родительское окно iframe или верхнее окно, а затем открыть там лайтбокс?

Или есть другой метод, с помощью которого я мог бы достичь этого?

Сайт заблокирован для разработки, но вы можете просмотреть отдельную страницу php здесь: Автономная страница

Спасибо вам за ваши предложения. Я посмотрю в Fancybox. Скрещенные пальцы... aethergy
Попробуйте пользовательский интерфейс jQuery, чтобы получить несколько виджетов в одном пакете, таких как вкладки, диалоги, автозаполнение, календарь и т. Д., А также различные эффекты, такие как анимация, перетаскивание и т. Д. Если вам нужны только всплывающие окна с наложением, тогда Fancybox очень хорош. Harshith J.V.
Вы, вероятно, должны использовать «модальный» оверлеи, посмотрите демо здесь -jquerytools.org/demos/overlay/modal-dialog.html , Я бы порекомендовал вам использовать плагин jQuery UI или Fancybox, потому что они проще в использовании и модальные диалоги могут быть включены прямо из опции, отправленной в самом вызове javascript / jquery. Не нужно беспокоиться о CSS, как вы видите по ссылке, которую я дал. Harshith J.V.

Ваш Ответ

1   ответ
3

Если вы гибкий, вы можете использоватьFancybox (v2.x) и добиться этого эффекта, как в этой демонстрации:http://picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html

На этой странице есть два iframe: слева показывает ваш текущий сценарий, а справа - решение, которое вы ищете.

UPDATE: использованиеjQuery.noConflict()

<script type="text/javascript" src="other_lib.js"></script> (mootools)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
Error: User Rate Limit Exceeded aethergy
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded aethergy
Error: User Rate Limit Exceeded aethergy
Error: User Rate Limit Exceededapi.jquery.com/jQuery.noConflictError: User Rate Limit Exceeded$Error: User Rate Limit ExceededjQueryError: User Rate Limit Exceeded$(document).ready()Error: User Rate Limit ExceededjQuery(document).ready()Error: User Rate Limit Exceededparent.$.fancyboxError: User Rate Limit Exceededparent.jQuery.fancyboxError: User Rate Limit Exceeded

Похожие вопросы