2010-08-18 1 views
1

Я использую причудливую коробку, в которой отображаются изображения, видеоролики YouTube и другие видео. Пользователь может перемещаться в причудливом поле, чтобы перейти к следующему дисплею или предыдущему экрану. Моя проблема заключается в том, что причудливый ящик не получает редизайн на основе отображаемого содержимого. Мой код, как показано ниже:Fancybox resize

$.fancybox(href,{ 
       'autoScale': true, 
       'autoDimensions': true, 
       'padding': 30, 
       'transitionIn': 'none', 
       'transitionOut': 'none', 
       'type': 'iframe', //'iframe', //'image', 
       'changeFade': 300, 
       'cyclic': false,     

      }); 

Я попытался решить эту проблему, вызвав функцию «OnComplete», но не успех до сих пор. Просьба предоставить несколько материалов по этому вопросу.

Благодаря

+0

Whoops - Возможно, это был обман http://stackoverflow.com/questions/994876/jquery-fancybox-resize –

+0

Помогли ли ответы по связанным вопросам решить вашу проблему? –

ответ

0

Я не разработчик веб-страниц с помощью любых средств, но documentation говорит:

$.fancybox.resize  Auto-resizes FancyBox height to match height of content

Это то, что вы хотите?

+0

'$ .fancybox.resize' не помогает. Его просто уменьшает высоту до некоторой фиксированной высоты. Он не основан на содержании и не фиксирует никакой ширины. – San

+1

Я переживаю ту же проблему - вы когда-нибудь находили исправление для этого? – Filth

0

Вы должны вызвать новый FancyBox в старой. Если вы «откроете» новый fancybox с первого, он изменит размер. Попытка:

<script type="text/javascript"> 
$(document).ready(function() { 
    var content = ' 
    <div id="nextbox">Box 1</div> 

    <script type="text/javascript"> 
    $("#nextbox").click(function() { 
    $.fancybox('Box2',{ 
     'autoDimensions': false, 
     'height' : 400, 
     'width' :400 
    }); 
    }); 
    </script> 
    '; 

    $.fancybox(content,{ 
    'autoDimensions': false, 
    'height' : 200, 
    'width' : 200 
    }); 

</script> 

Это откроет fancybox, в котором говорится «Вставка 1». Когда вы нажмете «Врезка 1», он изменит размер с 200 пикселей на 200 пикселей на 400 пикселей на 400 пикселей и изменит текст на «Врезка 2». И вы можете продолжать делать это за столько коробок, сколько хотите.

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

0

В моем случае при использовании FancyBox 2 установка называлась fitToView

множество его истинной

вот что я использую для запуска FancyBox, вам не нужно положить его в готовом

(function($){ 
    $(document).on('click','.fancybox',function(e){ 
     //don't follow link 
     e.preventDefault(); 

     //update fancybox image registry for gallery and open it 
     var fbox = $('.fancybox'); 
     //this always opens the first image first 
     $.fancybox(fbox,{ 
      index: fbox.index(this), 
      padding: 5, 
      live: false, 
      helpers : { 
       overlay : { 
        css : { 
         'background-color' : 'rgba(17, 17, 17, 0.3)', 
        }, 
        closeClick: true, 
        showEarly : true, 
        locked : false //if true, causes background to jump 
       }, 
       thumbs : { 
        width : 140, 
        height : 100, 
        source : function(item) { 
         var href = $(item.element).data('thumb'); 
         if(typeof href === 'undefined'){ 
          if (item.element) { 
           href = $(item.element).find('img').attr('src'); 
          } 
          if (!href && item.type === 'image' && item.href) { 
           href = item.href; 
          } 
         } 
         return href; 
        } 
       } 
      }, 
      scrolling: 'visible', 
      fitToView: true, 
      iframe:{ 
       scrolling : 'auto', 
       preload : false 
      } 
     }); 
    }); 
})(jQuery);