Colorbox and Image Resize

colorbox, javascript

Solution

I'm use the following code and resolve problem.

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

Problem

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.

Original source