Fancybox 2 beforeLoad и afterClose не запускается, чтобы скрыть / показать div, когда активен

Question

Fancybox 2 beforeLoad и afterClose не запускается, чтобы скрыть / показать div, когда активен

0

Я пытаюсь использовать beforeLoad и afterClose в Fancybox 2.

Мне нужно, чтобы скрыть флэш - анимации в качестве IFRAME - которая находится внутри #elanceiframe дел - в то время как FancyBox открыт и показывает портфель, а затем показать снова в DIV на FancyBox близко.

Это потому, что iFrame не уважает z-индекс в IE и не "исчезает" Fancybox и находится на переднем плане рядом с изображениями Fancybox. Поэтому я хочу display:none #elanceiframe div во время работы Fancybox.

Это функция init fancybox, и она работает с портфолио ОК, но beforeLoad и afterClose не срабатывают.

$(document).ready(function() {
   $("a[data-fancybox-group=portfolio]").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.7,
    'beforeLoad' : function(){
       $("#elanceiframe").css('display', 'none');
     },
    'afterClose': function() {
       $("#elanceiframe").css('display','block');
     } 
   });
});

Я использую beforeLoad и afterclose правильно?

Нужен ли мне CSS на div #elanceiframe div, как #elanceiframe на #elanceiframe display:none для начала?

Редактировать 12/04/13

Вышеприведенный пример отлично работает; Я вызывал неправильный div в функции :(

markratledge 30 нояб. 2013, в 21:01

Источник

0

они выглядят хорошо для меня. Вы можете даже поиграть, манипулируя значениями атрибута src в iframe чтобы ваш документ не перескочил, как это было бы с display: none jsfiddle.net/Nsxcn Кстати, некоторые из ваших опций API предназначены для fancybox v1.3.x и выиграли не работает с v2.x. Проверьте документы для правильных вариантов fancyapps.com/fancybox/#docs
JFK 01 дек. 2013, в 07:39
0

Ах, ты прав; Я обманываю и называю неправильный div по имени. Но ваша идея держать размер контейнера с рамой была хорошей; это в боковой панели, поэтому это менее критично. Но вы должны добавить это в качестве ответа, чтобы я мог отдать вам должное и предложить более новые варианты API.
markratledge 01 дек. 2013, в 19:54
0

Ответ опубликован. Спасибо
JFK 02 дек. 2013, в 04:00

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

iframe

fancybox-2

1 ответ

Ещё вопросы

они выглядят хорошо для меня. Вы можете даже поиграть, манипулируя значениями атрибута src в iframe чтобы ваш документ не перескочил, как это было бы с display: none jsfiddle.net/Nsxcn Кстати, некоторые из ваших опций API предназначены для fancybox v1.3.x и выиграли не работает с v2.x. Проверьте документы для правильных вариантов fancyapps.com/fancybox/#docs
Ах, ты прав; Я обманываю и называю неправильный div по имени. Но ваша идея держать размер контейнера с рамой была хорошей; это в боковой панели, поэтому это менее критично. Но вы должны добавить это в качестве ответа, чтобы я мог отдать вам должное и предложить более новые варианты API.

JFK · Accepted Answer · 2013-12-02T01-34-00.000Z

Параметры в вашем коде

beforeLoad: function () {
    $("#elanceiframe").css('display ', 'none');
},
afterClose: function () {
    $("#elanceiframe").css('display ', 'block ');
}

хорошо выглядишь для меня.

Вы даже можете манипулировать значениями атрибута src iframe, чтобы ваш документ не перескакивал, как это было бы при display: none

var thesrc;
$(".fancybox").fancybox({
    beforeLoad: function () {
        thesrc = $("#elanceiframe").attr("src");
        $("#elanceiframe").attr("src", "");
    },
    afterClose: function () {
        $("#elanceiframe").attr("src", thesrc);
    }
});

См. JSFIDDLE. Кстати, некоторые из ваших опций API для fancybox v1.3.x и не будут работать с v2.x. Проверьте документы для правильных параметров: http://fancyapps.com/fancybox/#docs

Спасибо за вашу помощь и предложения! Моя флеш-карта находится в боковой панели div, поэтому она не влияет на макет страницы, но в итоге я вызвал другой CSS для хранения размера div. Но в целом получается, что я вызываю неправильный div в своей функции.