javascript - 颜色框和图像调整大小

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>

这是在 colorbox 中打开 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 总是比 Picture 本身大得多。 Colorbox 必须与图像一样大，并且位于屏幕中央。

Answer 1

我正在使用以下代码并解决问题。

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