Связывание iframe для открытия в Lightbox

Question

Можно ли использовать ссылку для ссылки на iFrame контента, который открывается в лайтбокс или fancybox?

EG; Посмотреть мою галерею графического дизайна Нажмите здесь> Лайтбокс, отображающий мою галерею с другого сайта

возможно? Как бы я закодировал его в лайтбокс / fancybox? Я знаю, что это возможно сейчас - но не могу реализовать его с моим макетом.

Обновление - 17 декабря 2011

Я пытаюсь сделать это с помощью fancybox, ниже приведена ссылка на разрабатываемый мной макет - я смог реализовать это в другом документе с нуля, вызывая те же библиотеки / css в голове, поэтому Этого не может быть. Я чувствую, что между некоторыми из моих других встроенных JavaScript-кодов должны быть какие-то конфликты. Может ли кто-нибудь помочь мне понять, почему модная коробка iFrame не будет реализована в моем макете? (Я знаю, что есть некоторый JS и код, который не используется в atm layout, но просто потому, что я сократил его до отладки, я буду использовать весь этот код)

Соответствующая ссылка

Answer 1

С DivBox вы бы сделали что-то вроде следующего:

<script type="text/javascript">
  $("#link").divbox({ type: 'iframe' });
</script>

<a id="link" href="http://your.other.site">Click Here</a>

Answer 2

После опробования всех различных лайтбоксов я остановился на Colorbox .Он построен с использованием jQuery, поэтому нет конфликтов.Он прост в реализации, поставляется с несколькими вариантами внешнего вида и при необходимости легко меняет стиль.

Answer 3

Я использую shadowbox и делаю это. Скачать и справку в javascript shadowbox и css.Затем вы можете использовать следующее для просмотра iframe внутри shadowbox.В iframe может содержаться что угодно (включая iframe).

Создайте в своем теле ссылку:

<a class="modal" href="/path/to/iframe" rel="shadowbox;height=594;width=620">Click Me!</a>

Затем, нажав на это событие, выполните следующие действия в DOM Ready.

$(document).ready(function(){
    $('.modal').click("click", function(e){
        e.preventDefault();             // Prevent the default action
        var url = $(this).attr('href'); // Get the iFrame href
        Shadowbox.open({
            content:    url,
            player:     "iframe",
            height:     400,
            width:      510
        });
    });
});

Answer 4

Lightbox предназначен только для изображений, но вы можете использовать fancybox .

Есть 2 способа сделать это:

$.fancybox({'href':'http://www.google.com',
  'type':'iframe'
});

или

<a href="http://www.google.com" id="linktogoogle">google</a>

jQuery(document).ready(function () {
  $("#linktogoogle").fancybox();
});

Нажав на ссылку, вы загрузите Google в iframe. если вы хотите, чтобы он загружался без нажатия кнопки:

 jQuery(document).ready(function () {
   $("#linktogoogle").fancybox().click();
 });

Вы также можете установить скрытый стиль видимости ссылки.

Answer 5

Colorbox это один! Я использую его с самого начала проекта, и он легок и прост в реализации.

<a id="link" href="http://www.link.to.page.com">click here</a>

$("#link").colorbox({ iframe: true });

Посмотрите на примеры на этом сайте.