Fancybox 2 - Включить новый Div в изображение?

Question

Как я могу вставить новый div (не в формате .js) в fancybox (когда fancybox - изображение открыто)? Как это:

изображение http://s14.directupload.net/images/120319/qbrd6nev.png

Answer 1

Я также пытаюсь сделать div css, чтобы соответствовать этому описанию :)) все еще безрезультатно.Я отстой в стиле CSS, вернусь к этому, когда я понял это.моя теория такова, что это должен быть div внутри div внутри div, если вы понимаете, что я имею в виду:))

!!!!!!!!ОБНОВЛЕНИЕ Я попытался возиться с CSS, и это то, что я получил (я использую 1.3.4v для простоты с моей стороны) и для справки, эти изображения и коды, которые я использовалнаходятся в демонстрационном пакете 1.3.4 от fancybox.net

Если я плохо объяснил свой код, это просто означает, что я все еще работаю над ним, поэтому я просто надеюсь, что вы понимаете, почему он расплывчатый,но дело в том, что это выполнимо, и вам нужно всего лишь разработать файл CSS.Я надеюсь, что у кого-то есть более приятный код

Вывод: MySampleTry http://img52.imageshack.us/img52/3034/fancytry.png

1. Я все это из jquery.fancybox-1.3.4.css просто изменитьэти 1 2 3 и возиться с example7 там в демо

 #fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%;  /*this part extends the right side of the photo so it would look like thet're on the same page*/
  }

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

.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}

3.Мой новый RED div, где я буду

div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}

Answer 2

Так получилось, что я создал эту фантастическую демонстрацию "а-ля" на Facebook, которая выглядит примерно так, как вы хотите:

http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html

Answer 3

В вашем fancybox JS установите тип iframe:

$(document).ready(function() {
    $('.callout').fancybox({
        type: 'iframe',
        width:  '640px',
        height: '480px',
    });
});

Затем вы можете открыть все, что захотите в fancybox, просто применив класс к вашей ссылке:

<a class="callout" href="{path}">{link}</a>

Если у вас есть проблемы с отображением iframe, вы можете попробовать добавить дополнительный класс, чтобы сообщить fancybox, на какой тип контента вы ссылаетесь (это новое соглашение, появившееся в последней версии, поэтому я не знаю,рекомендую использовать его по умолчанию):

<a class="callout callout.iframe" href="{path}">{link}</a>

Надеюсь, это поможет!

ty

Answer 4

Я пытался использовать fancybox в одном из моих проектов, но мне пришлось вернуться к реализации моего собственного всплывающего окна с использованием элементов DIV. Довольно просто создавать свои собственные всплывающие окна вместо использования fancybox или facebox, если вы немного знакомы с JQuery, попробуйте взглянуть на эти ссылки. Вы можете настроить теги div так, чтобы они содержали все, что вам нужно.

выход источник