Colorbox和图像调整大小

Question

我有一个画廊,我希望用户用Colorbox打开图片.(然后发送带有邮件的图片或打印它等)

本网站必须动态编程,因为它也必须在IPad上工作.

现在到实际问题:

此div应显示在Colorbox中:

<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>

这是Javascripit函数,其中div在颜色框中打开.

$(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总是比Picture本身大得多.Colorbox必须与图像一样大,并且位于屏幕中央.

Answer 1

我使用以下代码并解决问题.

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