Colorbox和Image Resize

Question

我有一個畫廊，我希望用戶使用Colorbox打開圖片。 （然後發送郵件或打印它的圖片等）

本網站必須動態編程，因爲它必須在iPad上工作。

我們實際的問題：

這個div應該在彩盒中顯示：

<div style = "display:none"> 
<div id="inline" style="height:100%; width:auto"> 
    <img src="#" id="inline_img" style="max-height:90%; max-width:100%"/> 
    <div id="buttons"> 
     <button > test </button> 
     <button > test1 </button> 
     <button > test2 </button> 
    </div> 
</div> 
</div> 

而這正是在div的顏色框打開了Javascripit功能。

$(function(){ 
    //$('.element a').colorbox({}); 
    $('.element a').click(function(){ 
     // Using a selector: 
    $('#inline_img').attr('src',$(this).find("img").attr('src')); 
    $.fn.colorbox({ 
     inline:true, 
     href:"#inline", 
     maxHeight:'90%', 
     maxWidth:'90%' 
     }); 
    return false; 
    }); 
    $('.element a').colorbox({  
     onComplete : function() { 
     $(this).colorbox.resize(); 
     }  
    }); 

但是Colorbox總是比圖片本身大得多。 Colorbox必須與圖像一樣大，並且位於屏幕中央。

Answer 1

這結果對我來說很有意義。你給colorbox一個沒有定義寬度的display：block元素，並要求它估計尺寸，當然這個尺寸是可用寬度的100％。

Answer 2

我使用下面的代碼並解決問題。

$('.colorBox').colorbox({ 
    scalePhotos: true, 
    maxWidth: '100%' 
});