2012-04-26 67 views
0

我想知道是否有一種簡單的方法來縮放fancyBox(2.0.6)容器內的較小圖像。用Fancybox縮放較小的圖像

現在我的頁面正常工作,當我有高分辨率圖像時,fancybox縮放到視口。

我想要做的是如果有一個小圖像(比如200x300px),我想調整圖像大小以適應視口。我知道它會降低質量,但我仍然希望它可以擴大規模。

可以這樣做嗎?我沒有在fancyBox API中找到任何東西來做到這一點,也沒有插件。

謝謝!

回答

0

這是可行的,但過渡看起來很奇怪(因爲不是正常的方式工作,但迫使高檔)

假設你有這樣的HTML:

<a class="fancy" href="images/01.jpg">open small image and upscale</a> 

你可以試試這個腳本:

$(document).ready(function(){ 
$(".fancy").fancybox({ 
    afterShow: function(){ 
    this.height = $(window).height(); 
    this.width = 'auto' 
    } 
}); // fancybox 
});//ready 

PS。使用您自己的風險

+0

謝謝,這工作就像一個魅力。我只想知道如何保持寬高比。 :d – seven7seven 2012-04-27 11:48:46

1

保持縱橫比我修改了上面的

afterShow: function(){ 
wh = $(window).height()/this.height; 
ww = $(window).width()/this.width; 
if (wh<ww) 
{ 
     this.height = this.height*wh; 
     this.width = this.width*wh; 
} 
else 
{ 
     this.height = this.height*ww; 
     this.width = this.width*ww; 
} 
}