jQuery Fancybox＆Image Frame Size Control

我知道我可以使用frameWidth和frameHeight選項來控制內聯和iframe內容的幀大小，但是在顯示圖像時可以如何手動控制幀大小？jQuery Fancybox＆Image Frame Size Control

我的問題是，我有圖像，我想顯示在一個fancybox是非常水平的，並沒有太多垂直; fancybox將它縮放，以便燈箱真的很寬而且不很高，這意味着你根本看不到圖像。

我想要的是讓圖像在lightbox中水平滾動。（不，我不能改變圖像）。

有什麼想法？

2009-06-25 neezer

我結束了只是黑客FancyBox和添加另一個選項來做我想做的。這裏的要點：

if (opts.imgManSize) { 
    _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20); 
} else { 
    _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height); 
} 

... 

if (opts.imgManSize) { 
    $("#fancy_content").css('overflow','auto'); 
} 

... 

if (opts.imgManSize) { 
    $('#fancy_img').css('width','auto'); 
} 

... 

$.fn.fancybox.defaults = { 
    ... 
    imgManSize:false, 
    imgWidth:425, 
    imgHeight:355, 
    ... 
}

工程就像一個魅力。

來源

2009-10-12 14:51:54 neezer

包裹在一個div的圖像（如果它的在線），或在一個頁面，如果您使用的是AJAX負荷。然後，將div上的樣式設置爲iframs的寬度，並將overflow css屬性設置爲溢出：scroll;

來源

2009-08-11 16:19:14

通過修改CSS，您可以使幀大小相對於圖像的大小進行調整。

要覆蓋的寬度和高度聲明的插件創建，添加：

#fancybox-inner { 
    width: auto!important; 
    height: auto!important; 
} 

#fancybox-wrap{ 
    width: auto!important; 
    height: auto!important; 
}

和#fancybox-inner

來源

2010-03-16 14:28:51 Barry

我有這個問題我自己刪除position:absolute，並寫一些代碼來解決這個嵌入新的Vimeo IFRAME的視頻基於我找到的現有片段。這將允許你通過fancybox爲fancybox添加WIDTH和HEIGHT的URL參數。如果您不添加它們，默認將打開一個高度爲90％和90％的IFRAME。

(function($){ 
    $(function(){ 
     // Fancybox: IFRAME 
     var fancybox_iframe = $('.fancybox-iframe'); 
     if (fancybox_iframe.length > 0){ 
      fancybox_iframe.each(function(index){ 
       // Inline frame width param 
       if($(this).attr('href').match(/width=[0-9]+/i)){ 
        var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=','')); 
       } else { 
        var fWidth = '90%'; 
       } 
       // Inline frame height param 
       if($(this).attr('href').match(/height=[0-9]+/i)){ 
        var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=','')); 
       } else { 
        var fHeight = '90%'; 
       } 
       if(window.console&&window.console.log) { 
        console.log('fWidth #'+index+': '+fWidth); 
        console.log('fHeight #'+index+': '+fHeight); 
       } 
       $(this).fancybox({ 
        'titlePosition' : 'inside', 
        'type'    : 'iframe', 
        'autoScale'   : true, 
        'padding'   : '10', 
        'width'    : fWidth, 
        'height'    : fHeight, 
        'centerOnScroll' : true 
       }); 
      }); 
     } 
    }); 
})(jQuery);

要使用這一點，你可以使用以下：

<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>

我希望這可以幫助別人了！

來源

2010-12-06 18:33:26

jQuery Fancybox＆Image Frame Size Control

回答

相關問題