Автоматическая настройка высоты цветной коробки jQuery

Question

У меня есть сворачиваемый контент в всплывающем окне 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>, что это действительно простой в использовании ... Вы можете делать все в то же время <a goToStep="4,5" closeStep="1,3">...</a>

Для отзывчивым ColorBox, вы можете сделать это с MaxWidth:

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

Все это в скрипку ..