Fancybox調整大小

我正在使用一個花哨的盒子，它顯示圖像，YouTube視頻鏈接和其他視頻。用戶可以在漂亮的方框中導航，進入下一個顯示或前一個顯示。我的問題是，花式框不會根據顯示的內容重新調整大小。我的代碼如下：Fancybox調整大小

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

      });

我試圖通過調用「的onComplete」功能，但沒有成功到現在解決這個問題。請提供幾點意見。

感謝

來源

2010-08-18 San

哎呀 - 這可能是一個愚蠢的http://stackoverflow.com/questions/994876/jquery-fancybox-resize – 2010-08-18 16:17:50

在鏈接的問題的答案是否解決您的問題？ – 2010-08-19 01:56:47

我不以任何方式一名Web開發人員，但documentation說：

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

這是你想要的嗎？

來源

2010-08-18 16:14:31

'$ .fancybox.resize'沒有幫助。它只是將高度降低到一定的高度。它不是基於內容，它不能修復任何寬度。 – San 2010-08-18 16:18:02

我正在經歷同樣的問題 - 你有沒有找到解決這個問題的方法？ – Filth 2012-06-10 22:23:04

設置「自動定標」假應該工作...

來源

2011-10-07 11:12:49 user951595

你需要調用舊內新的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」時，它將從200px200px調整爲400px400px，並將文本更改爲「方框2」。你可以繼續爲你想要的盒子做這個。

我看到這個問題很古老，但希望有人可以使用它，因爲我一直在努力尋找如何調整fancybox一旦啓動它。

來源

2012-01-08 15:02:43 skoTner

在我的情況下，同時使用的fancybox 2的設定被稱爲fitToView

其設置爲true

這裏是我用它來推出的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);

來源

2014-06-23 09:26:45

Fancybox調整大小

回答

相關問題