fancybox 2 с div

Я думал, что у меня проблемы с использованием fancybox 2 со слайдером nivo, обернутым в div, но после некоторых тестов я обнаружил, что у меня проблемы с использованием facybox 2 с div. Поэтому я реорганизую свой вопрос. Чтобы было понятнее, я опубликую свои коды следующим образом:

Для CSS:

<style>
  #content{
    background: red;
  }
  #maximize{ width: 24px; height: 24px; }
</style>

Для html:

<a href='#content' id="maximize"> max </a>
<div id="content"> </div>

Для JS:

$('#maximize').click(function() {
$('#maximize').fancybox({
     'href' : '#content'
   });
});

Это работает, как и ожидалось, если я нажал кнопку max. Однако, если я закрыл fancybox, всплывающее окно исчезло, и исходный div с id = «content» также исчез. этого не ожидается. Я хочу, чтобы контент стал таким, каким был, а не исчез.

Другой вопрос: как я могу изменить размер всплывающей причудливой коробки? Я хочу сделать причудливую коробку больше.

Надеюсь, мой вопрос достаточно ясен. Заранее спасибо.


javascript jquery fancybox fancybox-2
person Joey    schedule 11.12.2012    source источник
comment
Если fancybox открывает div с помощью id="slider-wrapper", то это не должно быть $("#slider-wrapper").show() внутри обратного вызова afterClose?   -  person JFK    schedule 11.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

На самом деле вам не нужно:

$('#maximize').click(function() {
   $('#maximize').fancybox({
     'href' : '#content'
   });
});

... но только это:

$('#maximize').fancybox({
    // API options here
});

... так как .fancybox() уже связывает событие click с селектором #maximize, в противном случае это избыточно .... то же самое и с опцией 'href' : '#content', поскольку href уже взято из атрибута href в ссылке.

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

$('#maximize').fancybox({
    afterClose: function() {
        $("#content").show();
    }
});

Что касается второго вопроса, используйте параметры width и height вместе с fitToView и autoSize, чтобы установить предпочтительные размеры коробки, например:

$('#maximize').fancybox({
    fitToView: false, // avoid the adjusting size to viewport
    autoSize: false, // avoid set size based on content
    width: 420, // or whatever
    height: 320,
    afterClose: function() {
        $("#content").show();
    }
});​

См. рабочую DEMO.

person JFK    schedule 11.12.2012