4

ユーザーに 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 は常に、Picture 自体よりもはるかに大きくなります。カラーボックスは画像と同じ大きさで、画面の中央になければなりません。

問題

4

2 に答える 2

10

次のコードを使用して問題を解決しています。

$('.colorBox').colorbox({
     scalePhotos: true,
     maxWidth: '100%'
});
于 2013-10-10T07:47:11.663 に答える
2

その結果は私には理にかなっています。カラーボックスに幅が定義されていないdisplay：block要素を指定し、サイズを見積もるように依頼しました。これはもちろん、使用可能な幅の100％になります。

于 2012-07-10T21:34:29.767 に答える