title: Colorbox and Image Resize
body: <p>I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)</p>
  
  <p>This Site must be programmed dynamically because it has to work on an IPad too.</p>
  
  <p>Now to the actual Problem:</p>
  
  <p>This div should be shown in the Colorbox:</p>
  
  <pre><code>&lt;div style = "display:none"&gt; 
   &lt;div id="inline" style="height:100%; width:auto"&gt; 
      &lt;img src="#" id="inline_img" style="max-height:90%; max-width:100%"/&gt; 
      &lt;div id="buttons"&gt;
          &lt;button &gt; test &lt;/button&gt;
          &lt;button &gt; test1 &lt;/button&gt;
          &lt;button &gt; test2 &lt;/button&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the Javascripit function where the div opens up in the colorbox. </p>
  
  <pre><code>$(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(); 
          }    
      });
  </code></pre>
  
  <p>But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.</p>
  
  <p><img src="https://i.stack.imgur.com/rf0lX.png" alt="Problem"></p>