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

This Site must be programmed dynamically because it has to work on an IPad too.

Now to the actual Problem:

This div should be shown in the 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>

And this is the Javascripit function where the div opens up in the colorbox.

$(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(); 
        }    
    });

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.

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

This Site must be programmed dynamically because it has to work on an IPad too.

Now to the actual Problem:

This div should be shown in the 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>

And this is the Javascripit function where the div opens up in the colorbox.

$(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(); 
        }    
    });

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.

• javascript
• colorbox

Share Improve this question Follow edited Jul 11, 2012 at 8:47 MrTouch asked Jul 10, 2012 at 13:40 MrTouchMrTouch 65422 gold badges1212 silver badges2929 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

I'm use the following code and resolve problem.

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

That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.