jquery colorbox의 높이를 자동으로 조절합니다.

Question

colorbox 팝업에서 접을 수있는 콘텐츠가 있습니다.

폭을 자동으로 설정하는 'auto'로 설정했는데 자동 높이는 어떨까요? 예를 들어 colorbox가 튀어 나오면 첫 번째 이미지에 적합하지만 두 번째 접을 수있는 이미지의 이미지를 클릭하면 창의 크기가 조정되지 않습니다. 이것이 가능한가?

HTML

<p><a class='inline' href="#inline_content"><img src="http://www.paycoservices.co.uk/images/find-scheme.png" alt="find your scheme" /></a></p> 

<div style='display:none'> 
     <div id='inline_content' style='padding:10px; background:#fff;'> 
     <div class="two-step"> 
<a href="#"><img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="990" height="100" class="show_hide" alt="3 steps" /></a> 
</div> 

<div class="slidingDiv"> 
<img src="http://www.paycoservices.co.uk/images/step1.png" width="60" height="58" class="show_hide" alt="step 1" /> 
<font color=white><strong><h3>I want my employment status to be:</h3></strong></font> <a href="#" class="show_hide"></a> 
<div id="question_1"> 
<a href="#"><img src="http://www.paycoservices.co.uk/images/umbrella-emp.png" style="margin-left:80px;" width="300" height="118" class="first_s" alt="umbrella employee" /> </a> 
<a href="#"><img src="http://www.paycoservices.co.uk/images/self-employed.png" style="margin-left:170px;" width="300" height="118" class="second_s" alt="self employed" /> </a> 
</div> 
</div> 
</div 
</div> 

JS

$(document).ready(function(){ 
       //Examples of how to assign the Colorbox event to elements 
       $(".group1").colorbox({rel:'group1'}); 
       $(".group2").colorbox({rel:'group2', transition:"fade"}); 
       $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); 
       $(".group4").colorbox({rel:'group4', slideshow:true}); 
       $(".ajax").colorbox(); 
       $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); 
       $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); 
       $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 
       $(".inline").colorbox({inline:true, width:"auto"}); 
       $(".callbacks").colorbox({ 
        onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
        onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
        onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
       }); 

       $('.non-retina').colorbox({rel:'group5', transition:'none'}) 
       $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); 

       //Example of preserving a JavaScript event for inline calls. 
       $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
        return false; 
       }); 
    }); 

    $(document).ready(function(){ 

     // at first hide divs 
     $(".slidingDiv").hide(); 
     $(".slidingDiv2").hide(); 
     $(".slidingDiv3").hide(); 
     $(".slidingDiv4").hide(); 
     $(".slidingDiv5").hide(); 
     $(".slidingDiv6").hide(); 
     $(".slidingDiv7").hide(); 
     $(".slidingDiv8").hide(); 
     $(".slidingDiv9").hide(); 
     $(".slidingDiv10").hide(); 
     $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 
    $('.first_s').live('click', function(){ 
     $(".slidingDiv2").slideToggle(); 
    }) 
    $('.second_s').live('click', function(){ 
     $(".slidingDiv3").slideToggle(); 
    }) 
    $('.third_s').live('click', function(){ 
     $(".slidingDiv4").slideToggle(); 
    }) 
    $('.fourth_s').live('click', function(){ 
     $(".slidingDiv5").slideToggle(); 
    }) 
    $('.fifth_s').live('click', function(){ 
     $(".slidingDiv6").slideToggle(); 
    }) 
    $('.sixth_s').live('click', function(){ 
     $(".slidingDiv7").slideToggle(); 
    }) 
    $('.seventh_s').live('click', function(){ 
     $(".slidingDiv8").slideToggle(); 
    }) 
    $('.eighth_s').live('click', function(){ 
     $(".slidingDiv9").slideToggle(); 
    }) 
    $('.ninth_s').live('click', function(){ 
     $(".slidingDiv10").slideToggle(); 
    }) 
    }); 

FIDDLE

Answer 1

이 완벽한 솔루션을 봐, 완벽하게 작동합니다. =>FIDDLE (new)

여기서 스크립트는 내용의 가운데에 맞춰진 여백을 조정합니다.

당신은 <a goToStep="2">...</a> 및 <div step="2">...</div> 여러 단계를 보여 <a closeStep="2">...</a>와 다른 여러 단계를 숨길 수, 즉 당신은 반응 colorbox를 들어 동시에 <a goToStep="4,5" closeStep="1,3">...</a>

모든 일을 할 수 ... 사용하기 정말 간단합니다, 당신은 할 수 의 maxWidth 함께 할 :

$(".group1").colorbox({rel:'group1', maxWidth:'100%'}); 

모든 바이올린에 .. 답장을