Могу ли я иметь два экземпляра Fancybox 2.0?

Question

У меня на сайте установлен Fancybox 2.0, слегка измененный, чтобы он выглядел как окно предварительного просмотра изображений Facebook.Я хочу иметь второй «экземпляр» Fancybox, но для его позиционирования по-другому.Предпросмотр моего изображения Fancybox (текущий экземпляр) должен быть 20px сверху (как на данный момент), но мой диалог Fancybox (второй экземпляр) должен быть 450px на 300px (размеры только для примера, я не смотрелна глубине) и расположен в центре страницы (как Fancybox по умолчанию).Это возможно?Если да, то как?

Answer 1

да, вы можете ... Я сделал это на своем веб-сайте ..

первая необычная коробка ..

.fancybox-wrap {
margin: Xpx 0 0 Ypx;
}

для позиционирования вашего ящика ..

для динамической установки позиции ... вам нужно сделать две вещи ... A: добавить javascript перед функцией document.ready () B: добавить гиперссылку на клик ...

поэтому, когда кто-то щелкнет по ссылке, он изменит css до появления fancybox ..

java-скрипт следующим образом (я получаю из Интернета, это функция для динамического изменения значения CSS)

    function css(selector, property, value) {
for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
//Try add rule
try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}',
document.styleSheets[i].cssRules.length);
} catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err)
{}}//IE
}
}

Пример гиперссылки:

<a class="fancybox fancybox.iframe" href="showmybox.html"  onclick="css('.fancybox-
wrap', 'margin', '-100px 0 0 250px')">

(это покажет вам коробку в правом верхнем углу)

Answer 2

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

Единственное модальное окно, которое я видел, это наложение jQuery Tools - http://jquerytools.org/demos/overlay/multiple.html